Javascript template/app libraries with the least steep learning curve
About a year ago I worked in a project where the devs wouldn't have had the time to learn a complex framework such as React.js. They can learn it later if needed. Eventually we went with Riot.js .
Here were some of the initial ideas:
- Prefer existing HTML tags over made-up tags
- Separate html pages for separate, well, pages
- Ability to ony partially take over a page
- Ideally for each html tag, you can specify code for it, and on what events that code should trigger
- Or the other way around, specify for an HTML element, what it is bound to
So here is a list of template/app libraries/frameworks and my initial impression of the learning curve compared to what they can do:
| Thingy | Learning curve |
Plain HTML/ Javascript |
Incremental use |
comments |
|---|---|---|---|---|
| Riot.js — Simple and elegant component-based UI library | low | No | Yes | custom tags, would prefer attributes to existing tags, there seem to be some edge cases that are documented but that could trip devs up |
| Svelte • The magical disappearing UI framework | high | |||
| Flight by Twitter | Uses events exclusively between components, so no references. Not updated for 3 years | |||
| Marko | high | |||
| Cell.js | low | Yes | Completely expressed with javascript object literals | |
| stimulusjs | Yes | Uses normal tags with custom attributes, as for example Zope Page Templates does | ||
| Polymer | high | |||
| T3 JavaScript Framework | lowish | Uses events like Flight.js, but marshalls them into an event bus. Not updated in 2 years. | ||
| Famous/framework | Not updated in 3 years | |||
| infernojs | JSX | |||
| React.js | High | |||
| Vue.js | ||||
| EJS -- Embedded JavaScript templates | High | |||
| Mithril | ||||
| Sam-js | Low | Whatever | No! | Uses SAM pattern which I like, & is similar to how I did things with desktop GUIs. APIs not stable, says site. |
| Ractive | No widget/compoent arch. | |||
| Meiosis | ||||
| Flux | ||||
| lit-html | Efficient rendering of templates from javascript template strings | |||
| https://www.npmjs.com/package/jsx-render | Render JSX without the React overhead |