Top of page

Riot.js: the good, the bad and the style guide


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.
  <div class={ active: isActive } onclick={ toggle }>
      { title }

  this.isActive = false;
  toggle(e) {
      this.isActive = !this.isActive;

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.

← All blog posts

Also in love with the web?

For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?
Join our team