I started using Riot.js years ago and since then I am not the same developer anymore.
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 teaching me that even the most complex feature can be achieved with elegance and few code relying on the power of composable web components.
Riot.js was initially created by muut.com and developed by Tero Piirainen in 2015. While I was working on the second major release of the framework I slowly became the main maintainer and with the help of an incredible international team of contributors we were able to massively increase its user base (from 3k npm monthly downloads to 70k).
However I was unhappy with the design of its original core and indeed with the new v4 version I took the time (almost 2 years) to completely rewrite and redesign the entire framework and all its ecosystem.
Today in 2019 the web components support across browser vendors has massively improved but the current design of the vanilla native API doesn’t seem to help developers solving the daily problems we need to face.
Frameworks like AngularJS, Ember.js and React.js seemed to simplify our life in the short term but the amount of new concept and opinionated decision you need to take working with them is a price that not every developer is willing to pay.
To solve this issue many new frameworks like Vue.js and Svelte.js proved that you don’t need a huge API in order to develop web components. While this assumption might be true on one hand, on the other they add an incredible amount of magic to your code (reactive properties, Proxy, two-way-data binding, computed, observable, meta programming techniques…) binding you (and your mind) to specific framework idioms and meta programming techniques that might change on any major release, that’s definitely not a future proof approach. Another problem is that even if these techniques might look simple at beginning, as soon as your projects starts growing you will be thrown in a nightmare of side effects hard to solve without doing dirty hacks here and there.
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 the native web components API looked like.
Having worked a lot with Vue.js during the last 3 years I was 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 adapting them to Riot.js 4.
The components interface is transparent and explicit and there are no Riot.js ways to achieve your goals: you can develop your components as you prefer.
The result is a beautiful API that will be beloved by functional programmers (like me) and at same time impressively simple.
Let’s have a look for example at a component skeleton:
The code above doesn’t need explanations and it could be easily read by any developer without having to guess what it does, how many times has this ever happened to you in your career?
With the new version I’ve tried to fix all the above issues adding tons of new improvements.
With Riot.js 4 you will get all the following new features out of the box:
- Precise source maps
- Content Security Policy support
- <slot>s instead of <yield>s
- Better compatibility with other languages like Typescript
- Modern browsers support (NO internet explorer)
- 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: either rewriting the whole Riot.js ecosystem risking to loose part of its community consensus or just leaving 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 more than I though.
Here you can check the list of the new Riot.js ecosystem packages I have (re)written for you:
- @riotjs/parser credits also to Alberto Martinez
It should be clear that you don’t need to migrate you old application to Riot.js 4 but if you want to know how to do so you can read the migration guide.
The New Look
Riot.js logo was updated thanks to the community help
There is still tons of work to do…
- Update all the Riot.js examples
- Add the <template> fragments feature
- Improve the memory consumption
- Improve the rendering performance
- Create a Riot.js official state management library
- Update the Riot.js router
- Update the Riot.js animations library
- Create new plugins installable via `riot.install`
I am focused on making the new API as stable as possible to start building new features on the top of the new ecosystem. I will still be supporting Riot.js 3 for security patches but Riot.4 is the future and I will mainly work on it.
Love or hate it, Riot.js 4 is here to stay. I will do my best to keep the framework as simple as possible without bloating its API with unnecessary stuff. My goal was to create a clean and maintainable software without the uncompelling need to compete with anyone else, it took almost 2 years but in the end I made it!
If you liked what you have just read and you want to learn a bit more about the framework you can start by reading its documentation on the official Riot.js website.
Many thanks to:
- Andrea Giammarchi for his domdiff that powers Riot.js loops
- Ben Newman for recast and ast-types, without them making the new compiler would be impossible
- Rich Harris for rollup and for being a constant source of inspiration
- Evan You for his indirect influence on the new Riot.js API
- Tim Peters for the Zen of Python that has been my mantra during the rewrite