Every revolution begins with a Riot.js first

Gianluca Guarini
May 30, 2019 · 6 min read
Image for post
Image for post
Eugène Delacroix — Le 28 Juillet. La Liberté guidant le peuple


I started using Riot.js few years ago and it has changed my style of developing web applications.
I was tired to learn every day new concepts and convoluted ways to create always the same trivial components (accordions, overlays, custom input fields…).
Working with Riot.js opened my mind, it let me understand that even the most complex feature can be achieved with elegance and few code relying on the power of web components.

The Problem

This year (2019) web components support across browser vendors has massively improved but their API doesn’t seem to help much developers solving their simplest problems.

The Solution

Riot.js 4 aims to be the tiniest, simplest and yet most predictable framework for web components. It is designed to offer you everything you wished native web components API looked like.

Having worked a lot with Vue.js during the last 3 years I am really impressed by the simplicity of its API.
Evan You is an incredible talented developer and I was able to take many ideas from Vue.js bringing them to Riot.js 4.

Image for post
Image for post
Skeleton of a Riot.js 4 component

The Rewrite

Riot.js 3 was ok and worked pretty well in many production environments but there were issues I couldn’t solve without redesigning it. The old compiler was fragile because based on regular expressions (no real parser ¯\_(ツ)_/¯ ), the runtime expressions evaluation was hard to maintain and it couldn’t be optimized any further and the components syntax was not really Javascript™ compliant.

  • Content Security Policy support
  • True pure Javascript expressions
  • Better <slot>s support
  • Better compatibility with other languages like Typescript
  • Modern browsers support (NO internet explorer)
  • ES2016 Javascript modules
  • 5x performance boost
  • Stabler SSR + HTML hydration
  • 6kb Library size

Of course all these features came with a cost, your old components will not work in Riot.js 4

The old codebase didn’t allow me enhancing the framework any further and I had to take a decision: I could either rewrite the whole library ecosystem with the risk of loosing part of its community, or I could just leave the maintenance of the old code to someone else. I chose the first option and I couldn’t be happier about that, because by choosing that path I have learnt much more than I though.
Here you can check the list of the new Riot.js ecosystem packages I have (re)written for you:

The New Look

Riot.js logo was updated thanks to the community help

Image for post
Image for post
Designed by https://github.com/nibushibu

The Roadmap

There is still tons of work to do…

The Conclusion

Riot.js is not backed by any big company, it’s just me working alone on ~30 Javascript modules during my spare time. I’d love to work part time on the project but for that I will need your help. It would be great to get someone else on board as contributor working on the Riot.js ecosystem as well, so please if you think that you might be the right person for it let me know it.

The Credits

Many thanks to:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store