Riot.js 3.0 released

November 22, this year , an update was released Riot.js - a minimalist library for creating web interfaces. As its authors write on the main page of its website, Riot.js is “Simple and elegant component-based UI library”. And she is really very simple and elegant.

I am a big fan of this invention. It does not clog my brain with unnecessary logic, rules and principles. It gives me a very simple API for creating components embedded in each other and gives me the opportunity to implement what I need in a really short time.

For me, the programming and APIs of various popular libraries have always been something like math. What is all mathematics based on? Based on clean and minimalist formulas perfected. During the existence of this science, mankind has been able to bring various complex ideas to short and clear expressions. And about the same thing good libraries and frameworks in the world of programming do. They provide software engineers with a simple and straightforward API to solve problems. We all know jQuery with its short and concise methods for working in the browser and its motto is " write less, do more ". Or, say, many people know about such a wonderful library like Sugar.jsto add a reasonable portion of sugar to your global JavaScript objects. And Riot.js - exactly the same thing, only on the topic of web components, taking into account all the latest trends in the evolution of web technologies.

Together with the Pug template engine , your Riot.js-based web components might look something like this:

login-form
    .login-title Авторизация
    p Введите данные вашей учетной записи:
    .login-form
        form(method='POST', action='/auth/login')
            .login-field
                .login-label
                    label(for='email') E-mail
                input(type='email' name='email')
            .login-field
                .login-label
                    label(for='password') Пароль
                input(type='password' name='password' id='password')
            .login-button
                button.senddata(type='primary') Войти
            .login-links
                span.link.clickable() Забыли пароль?
                span.link.clickable(onclick='{ openRegisterForm }') Регистрация
    script.
        /* JS логика вашего компонента */
        var tag = this
        tag.openRegisterForm = function() {
            RegisterForm.open()
        }
        tag.openPasswordForm = function() {
            PasswordForm.open()
        }
    style.
        /* Стили вашего компонента */

This is almost standard HTML along with standard JS, at the same time, it allows you to break your code into independent components and encapsulate their logic and presentation in separate and clear entities, just as it can be done in React.js, for example. There are only a few points that you need to know about the work of Riot.js in order to start writing on it. This is not a dock for you on Angular 2.0 (I don’t even want to think about sitting and reading this whole mountain of documents. How much time will it take?).

Version 3.0 did not bring any fundamental changes. Almost everything remains to work just as it worked before. The library just became even more licked and refined. A lot of small and subtle problems were fixed.

A few words about the problems of Riot.js

All this is certainly fine, but if I do not talk about the problems that you may encounter when working with this library, I will not be truthful enough with you. Say what you like, but Riot.js is slower than its competitors (the only thing is that version 3.0 seems to be more productive, and in these tests the second branch of the library is checked. Also, keep in mind that the Riot.js team is currently aimed at increasing the rendering speed components and considers it their goal in the near future).

Where can this cause problems? Well, let's say, we had problems with the server rendering of one module in which we have 5-6 levels of component nesting on the project that we are developing here. So it is necessary, it is impossible to write this module in another way. Our server on Digital Ocean rendered this module for about 20-30 seconds per request. This is too much. But somehow I did not want to buy any dedicated server on Hetzner just to solve this problem. As a result, we rewrote this particular component specifically to React.js, after which the server rendering of this component began to work out in 5-10 seconds, which is already an acceptable option for us at the moment (we use server rendering only for search bots, so the usual users do not wait 5-10 seconds before the start of the page,

At the same time, if we talk about performance further, I have long been looking towards Inferno : look again at the library performance table . This library practically goes one on one with tests based on vanilla JS. To be honest, this is really impressive. Perhaps try to write complex interfaces on it? Among other things, its obvious advantage is the almost complete compatibility of its API with React.js. That is, to start working with Inferno, you do not have to learn anything if you already know React.

I would also like to note that React may be more preferable for selection if you are going to write an isomorphic application that will render content to clients on the server side, since it allows you to render content on the server using the renderToString method , thanks to which your React component is on the side the browser will only attach its event listeners to the DOM server created by the DOM server, saving the user's browser from additional load, which Riot.js does not currently support: you can render your content from the server side, but it ce the same then will be re-rendered library also on the browser side.

As we found out, Riot.js is slower on complex components with a large number of nesting levels. But you must admit, we do not write web interfaces of such complexity so often?

Although we rewrote one module of our project on React.js, I still consider Riot.js a more priority library for developing front-end components. The reason is that it provides a simpler and more concise syntax. It contains a very small set of functions, but at the same time they are just as many as needed. Riot.js does not clog my head with complex abstractions, rules, restrictions and other bird language. It just gives me a clean API to solve my problems. And what should I need more in my work?