From React to Riot 2.0

Original author: Tero Piirainen
  • Transfer


This popular blog entry was the starting point in our studies of minimalism. We started by saying that Muut should not use popular frameworks: Backbone, Angular or Ember.

Our motivation:

1) the small size of the client application. Unacceptable when the framework is much larger than the application itself;
2) a small framework whose work is fully understandable and transparent. All popular frameworks come with a very large number of API methods, properties, and other goodies. A full understanding was especially important since we had an application embedded on third-party sites.

We wondered if a framework was needed at all. As long as the API is separate from the UI, there are no problems. Using the event system, you can build stand-alone components, and the native pushState allows you to make friends with the browser’s back button.

With these thoughts, we started work on Riot 1.0.

Riot 1.0


Riot was an implementation of the concept of "No Frameworks" described in the blog. What should be a minimal set for implementing MVP? Riot started as an auxiliary product, but as experience gained, it began to grow up. Riot 1.0 already included the following features:
  1. implementation of the MVP template;
  2. implementation of the observable concept to separate the API from the presentation and creation of stand-alone components;
  3. a router that works with a URL and a Back button.



Riot 1.0 was a successful product. Of course, not for everyone, because he was so different from others. He was loved and hated, not least for the motives of its creation.

Facebook React


React was different. The idea of ​​combining the markup and logic of an individual component into a standalone unit is good. Component UIs are always a combination of HTML and JavaScript, so their connection in the component is obvious.

There is no need to remember which elements are associated with different events. All this is in one place, inside the component.
Templates separate technologies, not concerns.

Templates share technology, not responsibility. Thanks for the idea, Facebook!

Components reduce application code, less DOM manipulation, fewer jQuery selectors. UI code is becoming easier to understand. You can just change the JavaScript code, and the view will take care of itself.

React Disadvantages


The minified version of React has a size of 124K, and this is a problem. We cannot force our users to download such huge libraries.

A large amount of code is a sign of excessive complexity. Mass updates, rendering subtrees, dirty checks ... there should be an easier way to do this.

Too verbose syntax: many specific constructs, colons, braces, a large list of methods. A lot of extra "out of the box" for our purposes.

JSX is almost what you need, but we were looking for an easier way to combine HTML and JS.

React implements a system of specific events and supported HTML tags. We did not want such restrictions and would like to work with the DOM as usual.

Riot 2.0


Is it possible to implement a similar React, but without its shortcomings? We knew yes, and now Riot 2.0 appeared.



We borrowed ideas from Riot 1.0 (minimalism), React (virtual DOM, components) and HTML5 (custom tags).
We wanted a small API. We wanted HTML and JavaScript without any specific stuff like riot- attributes and others.
We have transcended ourselves. Riot 2.0 turned out to be much smaller and simpler than we expected. Not 10 times smaller, but 24 times smaller than React and only 9 API methods.

What's next?


The following versions of Riot will include:
  1. compiler in the browser to avoid building on the server. Our compiler is small and fast, so it can be safely used in production (already implemented - approx. Transl. );
  2. HTML generation on the server. This is a trend now and allows you to create isomorphic applications. This should be easy to implement, since HTML generation is already in the kernel;
  3. server tests. A larger test suite using jsdom;
  4. Validation using HTML attributes.

We also plan to compare performance with other frameworks.

True, there are a lot of changes from 1.0 to 2.0. But we think 2.0 is much better. Custom tags work great and we use them on this site.

Try it, give Riot a chance!

RiotJS on Muut
RiotJS on GitHub

Only registered users can participate in the survey. Please come in.

Will you try RiotJS?

  • 0% already using 1.0 0
  • 5% already use 2.0 25
  • 75.5% became interested, try 374
  • 19.3% I will not try 96

Also popular now: