From React to Riot 2.0

This popular blog entry was the starting point for our minimalist research. We started by saying that Muut should not use popular frameworks: Backbone, Angular or Ember.

Our motivation:
')
1) small size of the client application. It is unacceptable when the framework is much larger than the application itself;
2) a small framework whose work is completely clear and transparent. All popular frameworks come with a very large number of API methods, properties and other goodies. Full understanding was especially important since we had an application embedded in third-party sites.

We wondered if the framework needed at all? While the API is separate from the UI, there are no problems. Using the event system, you can build stand-alone components, while native pushState allows you to befriend an application with the browser's Back button.

With these thoughts, we began work on Riot 1.0.

Riot 1.0

Riot was the implementation of the framework-free concept described in the blog. What should be a minimalist set for the implementation of MVP? Riot started as an auxiliary product, but as he gained experience, he began to grow up. Riot 1.0 already included the following features:

1. implementation of the MVP pattern;
2. implementation of the observable concept to separate the API from the presentation and create 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 because of the motives for his creation.

Facebook React

React was different. The idea to combine the markup and logic of a separate component into a standalone unit is good. UI components 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.

Patterns share technology, not responsibility. Thanks for this idea, Facebook!

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

Disadvantages of React

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

A large amount of code is a sign of excessive complexity. Bulk update, subtree rendering, dirty checks ... there must be an easier way to do this.

Too verbose syntax: many specific constructions, colons, curly brackets, a large list of methods. A lot of superfluous "out of the box" for our purposes.

JSX is almost what you need, but we were looking for a simpler way to merge 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 drawbacks? We knew that yes, and here came Riot 2.0.



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 pieces like riot and other attributes.
We surpassed ourselves. Riot 2.0 was much smaller and simpler than we expected. Not 10 times less, but 24 times less 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 you can safely use it in production (already implemented - approx. Transl. );
2. HTML generation on the server. This is the 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 set of tests 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 that 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 website
RiotJS on github