Вышел Riot.js 3.0

22 ноября года сиего вышло обновление Riot.js — минималистичной библиотеки для создания веб-интерфейсов. Как пишут её авторы на главной странице своего сайта, Riot.js — это «Simple and elegant component-based UI library». И она действительно очень простая и элегантная.

Я большой поклонник данного изобретения. Оно не забивает мой мозг лишней логикой, правилами и принципами. Оно даёт мне очень простое API для создания вложенных друг в друга компонентов и даёт возможность в действительно короткие сроки реализовать то, что мне требуется.

Для меня программирование и API различных популярных библиотек всегда было чем-то похожим на математику. На основе чего работает вся математика? На основе чистых и минималистичных формул, доведённых до совершенства. За время существования этой науки человечество смогло довести различные сложнейшие идеи до коротких и чистых выражений. И примерно тем же самым занимаются и хорошие библиотеки и фреймворки в мире программирования. Они предоставляют инженерам ПО простой и понятный API для решения проблем. Все мы знаем jQuery с его короткими и лаконичными методами для работы в браузере и её девиз "write less, do more". Или, скажем, многие знают о такой замечательной библиотеке, как Sugar.js для добавления разумной порции сахарка вашим глобальным объектам JavaScript. И Riot.js — в точности об этом же, только на тему веб-компонентов с учётом всех последних тенденций в эволюции веб-технологий.

В совокупности с Pug-шаблонизатором, ваши веб-компоненты на основе Riot.js могут выглядеть как-нибудь вот так:

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(onclick="{ openPasswordForm }") Забыли пароль?
                span.link.clickable(onclick='{ openRegisterForm }') Регистрация

    script.
        /* JS логика вашего компонента */
        var tag = this

        tag.openRegisterForm = function() {
            RegisterForm.open()
        }

        tag.openPasswordForm = function() {
            PasswordForm.open()
        }

    style.
        /* Стили вашего компонента */

Это — практически стандартный HTML вместе со стандартным JS, при этом, он позволяет разбивать ваш код на независимые компоненты и инкапсулировать их логику и представление в отдельных и ясных сущностях, также, как это можно делать в React.js, к примеру. Есть всего несколько моментов, которые надо знать о работе Riot.js, чтобы начать на нём писать. Это вам не дока по Angular 2.0 (я даже думать не хочу о том, чтобы сидеть и читать всю эту гору документов. Сколько времени уйдёт на это?).

Версия 3.0 не принесла никаких кардинальных изменений. Практически всё осталось работать точно также, как оно работало и ранее. Библиотека просто стала ещё более вылизанной и доработанной. Была исправлена масса мелких и тонких проблем.

Пара слов о проблемах Riot.js

Всё это конечно прекрасно, но если я не расскажу о проблемах, с которыми вы, возможно, столкнётесь при работе с данной библиотекой, я не буду достаточно правдив с вами. Как ни крути, но Riot.js медленнее своих конкурентов (единственное — версия 3.0 вроде как должна быть более производительной, а в данных тестах проверяется вторая ветка библиотеки. Также следует иметь ввиду, что команда Riot.js в данный момент нацелена на увеличение скорости рендеринга компонентов и считает это своей целью на ближайшее будущее).

Где это может создать проблемы? Ну, скажем, у нас на том проекте, разработкой которого мы тут занимаемся, возникли проблемы с серверным рендером одного модуля, в котором у нас имеется 5-6 уровней вложенности компонентов. Так надо, по-другому невозможно написать этот модуль. Наш сервер на Digital Ocean рендерил этот модуль около 20-30 секунд на один запрос. Это очень уж много. Но покупать какой-нибудь выделенный сервер на Хетзнере только для того, чтобы решить эту проблему, как-то не хотелось. В итоге мы переписали конкретно данный компонент на React.js, после чего серверный рендеринг этого компонента начал отрабатывать за 5-10 секунд, что уже является вполне приемлемым для нас вариантом на данный момент (мы используем серверный рендеринг только для поисковых ботов, так что обычные пользователи не ждут 5-10 секунд до начала открытия страницы, для них контент просто рендерится в их браузерах).

В то же время, если рассуждать о производительности дальше, то я уже давно смотрю в сторону Inferno: посмотрите ещё раз на таблицу производительности библиотек. Эта библиотека практически идёт один в один с тестами на основе ванильного JS. Если честно, это действительно впечатляет. Быть может, попробовать писать сложные интерфейсы на ней? Кроме всего прочего, её явным плюсом является практически полная совместимость её API с React.js. То есть, чтобы начать работать с Inferno, вам не придётся ничего учить, если вы уже знаете React.

Также хочется отметить, что React, возможно, будет более предпочтителен для выбора, если вы собрались писать изоморфное приложение, которое будет рендерить клиентам контент со стороны сервера, так как он позволяет рендерить контент на сервере методом renderToString, благодаря которому ваш React-компонент на стороне браузера лишь навесит на созданный сервером DOM свои прослушиватели событий, избавив браузер пользователя от дополнительной нагрузки, чего в данный момент не поддерживает Riot.js: вы сможете отрендерить со стороны сервера свой контент, но он всё равно потом будет рендериться библиотекой повторно ещё и на стороне браузера.

Как мы выяснили, Riot.js более медлителен на сложных компонентах с большим количеством уровней вложенности. Но согласитесь, мы не так уж часто пишем веб-интерфейсы такой сложности?

Хотя мы и переписали один модуль нашего проекта на React.js, я всё ещё считаю Riot.js более приоритетной библиотекой для разработки фронтенд-компонентов. Причина в том, что он предоставляет более простой и лаконичный синтаксис. Он содержит в себе очень маленький набор функций, но при этом их как раз столько, сколько нужно. Riot.js не забивает мою голову сложными абстракциями, правилами, ограничениями и прочим птичьим языком. Он просто даёт мне чистое API для решения моих проблем. А что мне должно быть нужно ещё в моей работе?