Вийшов Riot.js 3.0

image22 листопада року сиего вийшло оновлення 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 для вирішення моїх проблем. А що мені потрібно ще в моїй роботі?
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.