jow- / luci-ng

LuCI on Angular
84 stars 26 forks source link

Consider using Mithril+Tachyons for UI instead of Angular #68

Open pdfernhout opened 3 years ago

pdfernhout commented 3 years ago

Mithril is much easier to develop with and maintain than either Angular or React. I write that as someone with significant experience working with each of those.

I wrote an essay with more details on that: https://github.com/pdfernhout/choose-mithril "tl;dr: Choose Mithril whenever you can for JavaScript UI development because Mithril is overall easier to use, understand, debug, refactor, and maintain than most other JavaScript-based UI systems. That ease of use is due to Mithril's design emphasis on appropriate simplicity – including by leveraging the power of JavaScript to define UIs instead of using an adhoc templating system. Mithril helps you focus on the essential complexity of UI development instead of making you struggle with the accidental complexity introduced by problematically-designed tools. Many popular tools emphasize ease-of-use through looking familiar in a few narrow situations instead of emphasizing overall end-to-end simplicity which -- after a short learning curve for Mithril -- leads to greater overall ease-of-use in most situations."

Mithril (using the HyperScript API) looks a bit like some of the original LuCI code where a function is used to create an HTML node. Except for Mithril, you create a virtual dom (vdom) structure that is used to update the real DOM for efficiency. Every time the user touches the UI (like a button click or selecting something in a drop down), Mithril assumes the UI is dirty and rerenders it. That makes UI behavior much easier to reason about. And you can optimize some special cases as needed where the default behavior does not seem performant enough. Angular does something like this with dirty checking, but unfortunately Angular chose a different approach using "zones" to track changes which makes code much harder to debug. Mithril just wraps UI event handlers and so other event code which is more straightforward.

Some tutorial Mithril examples I wrote are here: https://github.com/pdfernhout/mithril-demos/tree/master/hello-increasing-abstraction

Tachyons is an approach to writing CSS in an atomic/functional way which makes it easier to write modular code which works as expected. For example, adding a class like ".red" makes an element red, while ".ba" puts a border around it. Even if you stick with Angular, Tachyons or another atomic CSS library might we worth considering.

Even though LuCI2 runs in a browser and not on the router, on general design principles emphasizing simplicity, both Mithril and Tachyons seem to me to be a better match for the kind of thinking that surrounds small embedded devices than a bloated and opinionated framework like Angular.

JavaScript (ES6+) has also gotten much better than when TypeScript was created. While I use TypeScript on some projects, I tend to use plain ES6+ JavaScript in new ones because of the faster testing turnaround by avoiding a build or bundling step. Mithril works with TypeScript though of course.

I'd be happy to help with the transition of luci-ng to Mithril+Tachyons if desired -- as well as translating legacy LuCI views to Mithril or writing some code to do that semi-automatically.

You all might not want to switch to Mithril and/or Tachyons for all sorts of reasons, so feel free to close this issue as "won't do". In any case, please accept my thanks for working on more great software for OpenWRT.