Від React до Riot 2.0


Ця популярна запис у блозі відправною точкою у наших дослідженнях мінімалізму. Ми почали з того, що Muut не повинен використовувати популярні фреймворки: Backbone, Angular або Ember.
Наша мотивація:
1) малий розмір клієнтського додатку. Неприйнятно, коли фреймворк набагато більше самого додатка;
2) невеликий фреймворк, робота якого цілком зрозуміла і прозора. Всі популярні фреймворки поставляються з дуже великою кількістю методів API, властивостей та інших плюшок. Повне розуміння було особливо важливо, так як у нас було вбудовується на сторонні сайти додаток.
Ми задалися питанням, а чи потрібен фреймворк взагалі? Поки API відділений від UI, проблем немає ніяких. З допомогою системи подій можна побудувати автономні компоненти, а «нативний» pushState дозволяє встановити додаток з клавішею «Back» броузера.
З этимы думками ми почали роботу над Riot 1.0.


Riot 1.0
Riot був реалізацією концепції «Без-фреймворків», описаної в блозі. Що повинен представляти із себе мінімалістичний набір для реалізації MVP? Riot стартував як допоміжний продукт, але в міру накопичення досвіду він починав дорослішати. Riot 1.0 вже включав наступні можливості:
  1. реалізація шаблону MVP;
  2. реалізація концепції вами для відділення API від подання та створення автономних компонентів;
  3. роутер, який працює з URL і кнопкою Back.

Riot 1.0 був успішним продуктом. Звичайно, не для всіх, адже він так сильно відрізнявся від інших. Його любили і ненавиділи, не в останню чергу через мотиви його створення.

Facebook React
React був іншим. Ідея об'єднати розмітку і логіку окремого компонента в автономний блок хороша. UI компонентів — це завжди поєднання HTML і JavaScript, так що їх зв'язок в компоненті очевидна.
Немає необхідності запам'ятовувати які елементи пов'язані з різними подіями. Все це знаходиться в одному місці, всередині компонента.
Templates separate technologies, not проблеми.
Шаблони поділяють технології, не відповідальність. Спасибі за цю ідею, Facebook!
Компоненти зменшують код програми, менше маніпуляцій з DOM, менше jQuery-селекторів. Код UI стає легше для розуміння. Ви можете просто змінювати код JavaScript, а уявлення подбає про себе сама.

Недоліки React
Минифицированная версія React має розмір 124K, і це проблема. Ми не можемо змушувати наших користувачів завантажувати такі величезні бібліотеки.
Велика кількість коду — ознака надмірної складності. Масове оновлення, відтворення піддерев, брудні перевірки… повинен бути більш простий спосіб зробити це.
Занадто багатослівний синтаксис: багато специфічних конструкцій, двокрапки, фігурних дужок, великий список методів. Дуже багато зайвого «з коробки» для наших цілей.
JSX майже те, що треба, але ми шукали більш простий спосіб об'єднання HTML і PHP.
У React реалізована система специфічних подій і підтримуються HTML-тегів. Ми не хотіли таких обмежень і хотіли б працювати з DOM як зазвичай.

Riot 2.0
Чи можна реалізувати подібне React, але без його недоліків? Ми знали, що так, і ось з'явився Riot 2.0.

Ми запозичили ідеї Riot 1.0 (мінімалізм), React (віртуальний DOM, компоненти) і HTML5 (користувальницькі теги).
Ми хотіли невеликої API. Ми хотіли HTML і JavaScript без жодних специфічних штук типу атрибутів riot — та інших.
Ми перевершили самі себе. Riot 2.0 виявився набагато менше і простіше, ніж ми очікували. Не в 10 разів менше, а в 24 рази менше, ніж React і тільки 9 методів API.

Що далі?
Наступні версії Riot будуть включати:
  1. компілятор в браузері, щоб уникнути складання на сервері. Наш компілятор маленьких і швидкий, тому можна сміливо використовувати в продакшені (вже реалізовано прим. перекл.);
  2. генерація HTML на сервері. Це тренд зараз і дозволяє створювати ізоморфні програми. Це має бути просто реалізувати, оскільки генерація HTML вже в ядрі;
  3. серверні тести. Більший набір тестів з використанням jsdom;
  4. валідація з допомогою HTML-атрибутів.
Ми також плануємо провести порівняння продуктивності з іншими фреймворками.
Правда, змін від 1.0 до 2.0 дуже багато. Але ми вважаємо, що 2.0 набагато краще. Користувальницькі теги прекрасно працюють і ми використовуємо їх на даному сайті.
Спробуйте, дайте Riot шанс!

RiotJS на сайті Muut
RiotJS на GitHub
Ви спробуєте RiotJS?

/>
/>


<input type=«radio» id=«vv65031»
class=«radio js-field-data»
name=«variant[]»
value=«65031» />
вже використовую 1.0
<input type=«radio» id=«vv65033»
class=«radio js-field-data»
name=«variant[]»
value=«65033» />
вже використовую 2.0
<input type=«radio» id=«vv65035»
class=«radio js-field-data»
name=«variant[]»
value=«65035» />
стало цікаво, спробую
<input type=«radio» id=«vv65037»
class=«radio js-field-data»
name=«variant[]»
value=«65037» />
не буду пробувати

Проголосувало 8 осіб. Утримався 1 людина.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр

0 коментарів

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