Riot overview : the new React like JS micro-Framework

Over the weekend, I tried to play around with Riot. Riot is very sharply focused on doing one thing right. The library is very small: 3.5kb minified. One file is responsible for one UI element, for example a todolist. That file contains both the HTML and JS responsible for that component. A UI element is represented in your application with a custom tag, for example « . You’re responsible for loading data for that view, and anything else that is not directly bound to the User interface. In that way you could very easily replace only the Storing engine for one particular UI element for example.

The syntax is very easy to learn and still very expressive. For example to have a checked attribute set when one of your variable is truthy, you could write the following code:

to have a checkbox that is checked by default.

The JS you use inside your templates can be written in ES6, the code will automatically be transpiled into working ES5 JS.

So for example, you could write:

You also have support for loops, transclusion, including scoped CSS (that will only be used in your custom tags).

The design guide is to use an event based architecture: You should load data, and have your business logic separated from your UI, and communicate changes from the Store to the UI. The UI will then call events to a global Dispatcher (which can be done with the 10 lines library RiotControl), The Dispatcher then dispatches events to the stores, that may send event to the UI as a result. With this, you have implemented a Flux architecture .

The Documentation of Riot 2.0 is very well written, easy to grasp and completely uptodate.

Riot is a UI-framework you should definitively take into consideration

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée.