Svelte

Магічно зникаючий фреймворк

Віктор Борщов, Titanium Labs

Що таке Svelte?

Svelte — це не бібліотека.

Svelte — це не фреймворк.

Svelte - це компілятор, який отримує ваш код і видає нативний JavaScript, який безпосередньо взаємодіє з DOM без необхідності в будь-якому посереднику.

Svelte - радикально новий підхід до побудови інтерфейсів користувача. У той час як традиційні фреймворки, такі як React і Vue, роблять більшу частину своєї роботи в браузері, Svelte працює на етапі компіляції, який відбувається при створенні програми.

Замість використання методів, таких як віртуальний DOM, Svelte створює код, який хірургічно оновлює DOM, коли змінюється стан вашого додатка.

Svelte - це компонентний фреймворк - як React або Vue - але з важливою відмінністю. Традиційні фреймворки дозволяють писати декларативний код, керований стейтом, але за цьому є ціна: браузер повинен зробити додаткову роботу, щоб перетворити ці декларативні структури в операції DOM, використовуючи такі методи, як сміттєзбирач (garbadge collector).

Замість цього, Svelte працює під час створення, перетворюючи ваші компоненти у високоефективний імперативний код, який хірургічно оновлює DOM. Як результат, ви зможете писати амбітні програми з відмінними характеристиками швидкодії.

Щоб зробити це можливим, ми спочатку повинні переосмислити концепцію, що лежить в основі сучасних UI фреймворків: реактивність.

Коли відбувається рендер React-додатку, копія DOM кладеться в структуру, яка називається Virtual DOM. Цей віртуальний DOM виступає посередником між вашим React-кодом і тим, що браузер відображає в DOM.

Потім, при зміні даних (наприклад, після виклику this.setState або useState), React проробляє невелику роботу, щоб визначити, які частини DOM потрібно перемалювати.

Він порівнює віртуальний DOM з реальним, щоб визначити, що змінилося після оновлення даних. Потім перемальовує тільки ті частини DOM, які мають відмінності в віртуальному DOM, усуваючи необхідність щоразу при будь-якій зміні, перемальовувати весь DOM цілком.

Все відбувається дуже швидко, тому що оновлювати віртуальний DOM набагато дешевше, ніж реальний, і React оновлює тільки необхідні шматочки реального DOM.

Ймовірно, ви помітили одну особливість. Якщо ви не повідомите React, що дані змінилися (викликавши this.setState або еквівалентний хук), віртуальний DOM не зміниться, і від React не буде ніякої реакції (та-дам!).

Ось що мав на увазі Dan, коли сказав, що React не в повному обсязі реактивний. React покладається на те, що ви самостійно відстежуєте дані своєї програми і повідомляєте про їх зміни. Це додає вам роботи.

Реактивність


count += 1;


count += 1; $$invalidate('count', count);

Менше коду - краще DX

Продуктивність

React API:

shouldComponentUpdate

useMemo

React.PureComponent

та інші

Як щодо продуктивності? І наскільки зручні додатки, написані повністю в Svelte?

Одна з причин, чому React настільки потужний, полягає в тому, що він використовує віртуальний DOM для можливості перемальовування користувацького інтерфейсу програми невеликими частинами, усуваючи необхідність перемальовувати весь DOM кожен раз, коли щось змінюється (що дійсно дуже дорого).

Однак, недоліком цього підходу є те, що в разі зміни даних компонента React буде повторно перемальовувати не тільки сам компонент, але і всі його дочірні елементи незалежно від того, змінювалися вони чи ні. Ось чому в React існують такі методи API, як shouldComponentUpdate, useMemo, React.PureComponent і т.д.

Це проблема завжди буде мати місце при використанні віртуального DOM для відтворення призначеного для користувача інтерфейсу при зміні стану програми.

Svelte не використовує віртуальний DOM, але як же тоді він вирішує проблему перемальовування DOM згідно з новими даними стану? Що ж, дозвольте мені привести цитату Rich Harris з його чудового виступу на YGLF:

Фреймворки - це не інструменти організації вашого коду. Це інструменти для організації вашого розуму.

Rich Harris

Ця думка привела до ідеї, що фреймворк може бути чимось, що працює ще на етапі складання програми, усуваючи таким чином необхідність для вашого коду мати посередника в Рантайм. Завдяки цій ідеї, Svelte став компілятором, а не фреймворком.

Ця проста ідея, також пояснює чому Svelte дуже швидкий. Svelte компілює ваш код в ефективний низькорівневий Javascript, який безпосередньо взаємодіє з DOM. Це все чудово, але як Svelte вирішує проблему перерендерінга всього DOM цілком при зміні даних?

Різниця полягає в тому, яким чином традиційні фреймворки (наприклад, React) і Svelte дізнаються, що в змозі щось змінилося. Ми вже раніше обговорили, що в React необхідно викликати метод API, щоб повідомити йому, коли дані змінюються. У разі Svelte досить просто використовувати оператор присвоювання =.

Нумо покодимо!

Переваги

Підсумковий код standalone vanilla JavaScript без залежностей
Невеликий розмір та висока продуктивність
Низький поріг входу
Потужність статичного аналізу та компіляції з коробки
Code-splitting & tree-shaking
Micro-frontends ready

Підсумковий код standalone vanilla JavaScript без залежностей. Він вирішує тільки ті проблеми, які ви вирішуєте в своїх компонентах, ніякого overhead немає.

Невеликий розмір і висока продуктивність. У Svelte немає ніяких абстракцій між кодом і DOM. Тут взагалі мінімум абстракцій.

Низький поріг входу. Всі говорять, що дуже просто навчитися Vue, але вивчити Svelte ще простіше. У нього простий гайд, відмінний REPL, причому всі посилання з гайда йдуть на готовий приклад, який можна потикати і змінювати.

Міць статичного аналізу та компіляції з коробки. Якщо, навіть, компілятор не ідеальний, і статичний аналізатор використовується далеко не на повну котушку. Але це все зашито на рівні концепції, тому буде розвиватися.

Code-splitting & tree-shaking. Знову ж на рівні концепції вирішені проблеми з code-splitting і tree-shaking. Всі компоненти і будь-яку ієрархію компоненти можна зібрати окремо. Це будуть окремі незалежні модулі, які можна поєднувати в будь-якій послідовності і отримувати різні пакети.

Micro-frontends ready. Це дуже добре для мікро-фронтенда. Коли на кожній сторінці, яка віддавалася з сервера за допомогою звичайного PHP, знаходилося повністю незалежне Svelte-додаток. притому, що загальна кодова база єдина. Компоненти для кожної сторінки збираються окремо і отримуються абсолютно незалежні додатки. Навіть всередині цих додатків можна незалежно проводити code-splitting і tree-shaking.

Недоліки

Молодий - мало готових рішень
Не можна використовувати JSX
Неперевірений підхід
Немає підтримки крупних гравців - корпорацій