Finally a #riotjs list of good practices.. bravo!” — Gianluca Guarini, RiotJS
The good
- Easy to learn: since Riot is a small framework (only 9kb) there’s not much to learn about it. Furthermore, it’s mostly vanilla JavaScript and HTML — no new syntax like React’s JSX that you need to learn.
- High performance: Riot has a fast runtime compiler, that’s also available as part of your JS build step. Apart from that, Riot makes use of a simplified virtual DOM which makes HTML updates and changes very fast.
- Love for modules: we like component based development. Riot is built around UI modules, called tags, that provide modularity out of the box. Appended with some of our own practices, it’s a breeze to exchange Riot tags between projects.
The bad
- State management is hard: there is no (opinionated) way to manage state within a component or between components. There is no step between a state update and re-render, and when updating a tag, all its children will be updated also. This increases the need for plumbing every time you add complexity to a Riot app. Alternatively, you could implement another library like Redux to keep state, which has its own implications and challenges.
<my-tag>
<div class={ active: isActive } onclick={ toggle }>
{ title }
</div>
this.isActive = false;
toggle(e) {
this.isActive = !this.isActive;
}
</my-tag>The style guide
The best way to work around these pitfalls is to put guidelines in place. It will allow you and your team to build stable and robust apps, even if the underlying architecture is as loose as Riot’s. We wrote a style guide just for this reason.
