Stay away from Riot.js for production grade work

If you are looking for template engines for web-development, then Riot.js looks very promising.

It is indeed very easy to learn and a lightweight library that offers web-components in a nice to use way. The only problem is, it is good enough for toy applications, but once you get into any serious development with it, you would start encountering numerous problems as discussed below.

Riot.js is centered around the concept of web-components, which is a very powerful mechanism for reusing tag-snippets across web pages and page sections. As such, the strength comes from being able to define a custom HTML tag once and then reuse it multiple times across different sections.

The problem, however, is, Riot.js, in its current state, is very bad at handling nested tags. The tag event life cycle (the mount and unmount mechanism) is so weak, you would see the child tags being instantiated out of turn (without a proper parent). You have to explicitly check for a valid parent inside the mount handlers to ensure you are dealing with a valid child tag and not a zombie instance.

Another pain point with Riot.js is lack of strong mount and unmount mechanism tied to the if-else logic. In its current state, all logic paths are evaluated (and tags instantiated) in the if-else logic branch, thus essentially making it equivalent to HTML show and hide, rather than true mount and unmount of DOM tags. (Some patches seem to be inline for fixing this, but not sure how effective they could be without a dynamic template instantiation support)

Riot.js does not support entry, exit transitions or animations for items in a list. This is a very big drawback if you are planning to build any kind of item listing sites, such as profile showcases or social network sites.

The update event propagation mechanism among the parent and child tags is another major pain point. If any child makes an update to itself, the parent tag will issue an update for all its children, thus potentially causing recalculation of the layout and data reevaluation. Either you have to manually validate the inequality of the incoming data to ignore the update or completely bypass the built-in mount/update system and follow your own event system (perhaps using the riot observable signals).

All in all, Riot.js is a good framework to start learning basic web-component concepts. But beyond that, using it in production is not really recommended for our students. Dynamic template instantiation based on scripted tag names, rendering separation from data invalidation, dynamically evaluated expressions etc. are some of the key missing points that Riot.js has still to work on before it can be considered for any production grade work.