- PVSM.RU - https://www.pvsm.ru -

Svelte 3: Переосмысление реактивности

Буквально на днях произошло большое событие в сообществе SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.

Svelte 3: Переосмысление реактивности - 1

Наконец-то он здесь

После нескольких месяцев, которые пролетели как пара дней, мы на седьмом небе от счастья потому, что можем объявить о стабильном релизе Svelte 3. Этот по-настоящему огромный релиз, результат сотен часов работы многих людей в сообществе Svelte, включая бета-тестеров, чьи бесценные отзывы помогали оттачивать дизайн фреймворка на каждом этапе этого пути.

Мы думаем, он вам понравится.

Что такое Svelte?

Svelte — это компонентный фреймворк, похожий на React или Vue, но с важным отличием. Традиционные фреймворки позволяют вам писать декларативный state-driven код, но не без наказаний: браузер должен выполнить дополнительную работу для преобразования этих декларативных структур в манипуляции с DOM, используя техники, такие как virtual DOM diffing [1], которые проедают имеющийся бюджет кадров отрисовки и добавляют обязанностей сборщику мусора.

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

Первая версия Svelte была посвящена проверке гипотезы [2] — что специально созданный компилятор может генерировать надёжный код и обеспечивает отличный пользовательский опыт. Вторая версия была посвящена небольшим улучшениям, которые привели ряд вещей в порядок.

Svelte 3 — это уже существенный пересмотр. В течение последних пяти или шести месяцев мы уделяли особое внимание пользовательскому опыту разработчиков. Теперь можно писать компоненты с количеством шаблонного кода, значительно меньшим [3], чем где либо ещё. Попробуйте наш совершенно новый учебник [4] и посмотрите, что мы имеем ввиду — если вы уже знакомы с другими фреймворками, думаем, вы будете приятно удивлены.

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

Доклад «Переосмысление реактивности» на You Gotta Love Frontend Code Camp 2019 [5]

Перемещение реактивности в язык

В предыдущих версиях Svelte, вы должны были сообщить компьютеру, что какая-то часть состояния изменилась с помощью вызова метода this.set:

const { count } = this.get();
this.set({
  count: count + 1
});

Он заставлял компонент реагировать. Кстати говоря, this.set практически идентичен методу this.setState, который использовался в классическом (до хуков) React:

const { count } = this.state;
this.setState({
  count: count + 1
});

Тут есть важные технические различия (как я объясняю в видео выше — React не реагирует), но концептуально это одно и то же.

По факту, Svelte 3 в основном.

Все изменилось с появлением хуков в React [6], которые управляют состоянием совсем по-другому. Многие фреймворки начали экспериментировать со своими собственными реализациями хуков, но мы быстро пришли к выводу, что это не то направление, куда бы мы хотели идти. Хуки имеют некоторые интригующие свойства, но они также включают в себя неестественный код и создают ненужную работу для сборщика мусора. Для фреймворка, который используется на embedded-устройствах [7], а также в тяжелых интерактивных анимациях, это не хорошо.

Поэтому мы сделали шаг назад и спросили себя, какой тип API был бы лучшим для нас… и поняли, что лучший API — это отсутствие API. Мы можем просто использовать язык. Обновление значения count и всех вещей, которые зависят от него, должно быть простым:

count += 1;

Поскольку мы являемся компилятором, мы можем сделать это, осуществляя фактическое присваивание за кулисами:

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

Важно отметить, что мы можем сделать всё это без лишних затрат и сложности использования прокси или аксессоров. Это просто переменная.

Новый облик

Не только компоненты получили подтяжку лица. Сам Svelte теперь имеет совершенно новый внешний вид благодаря удивительной дизайнерской работе Achim Vedam [8], создавшего новый логотип и веб-сайт, который переехал со svelte.technology [9] на svelte.dev [10].

Мы также изменили наш слоган с «Магически исчезающего UI фреймворка» на «Кибернетически улучшенные web-приложения». У Svelte много сильных сторон — отличная производительность, небольшой размер бандла, доступность, встроенная инкапсуляция стилей, декларативные анимации переходов, простота использования, тот факт, что это компилятор и многие другие. Поэтому сосредоточение внимания на одной из них кажется несправедливым по отношению к другим.

Обновление с версии 2

Если вы уже являетесь пользователем Svelte 2, боюсь, потребуется ручное обновление ваших проектов. В ближайшие дни мы выпустим руководство по миграции и обновлённую версию утилиты svelte-upgrade [11], которая сделает всё возможное, чтобы автоматизировать процесс. Но изменения слишком существенные, поэтому не всё может быть обработано автоматически.

Такое решение далось нам не легко: надеюсь, что, испытав Svelte 3, вы поймете, почему мы сочли необходимым порвать с прошлым.

Все ещё впереди

Каким бы изнурительным ни был этот релиз, мы ещё не закончили. У нас есть масса идей как генерировать код умнее, более компактно, и длинный список пожеланий. Sapper [12], наш фреймворк для приложений в стиле Next.js, всё ёще находится в процессе обновления для использования совместно со Svelte 3. Проект сообщества Svelte Native [13], который позволяет писать приложения для Android и iOS на Svelte, продвигается вперед и заслуживает более полной поддержки со стороны ядра.

У нас пока нет множества расширений для редакторов, подсветки синтаксиса, наборов компонентов, devtools и т. д., которые есть у других фреймворков, и мы должны это исправить. И мы действительно хотим добавить первоклассную поддержку TypeScript.

Несмотря на всё это, мы считаем, что сейчас Svelte 3 — лучший способ создания веб-приложений. Потратьте час, чтобы пройти учебник [4] и мы надеемся, что убедим вас в этом. В любом случае, мы хотели бы видеть вас в нашем Discord чате [14], русскоязычном канале Telegram [15] и на GitHub [16] — добро пожаловать всем, особенно вам.

Автор: PaulMaly

Источник [17]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/315851

Ссылки в тексте:

[1] virtual DOM diffing: https://ru.svelte.dev/blog/virtual-dom-is-pure-overhead

[2] проверке гипотезы: https://ru.svelte.dev/blog/frameworks-without-the-framework

[3] значительно меньшим: https://ru.svelte.dev/blog/write-less-code

[4] учебник: https://ru.svelte.dev/tutorial/basics

[5] You Gotta Love Frontend Code Camp 2019: https://www.israel.yglfconf.com/

[6] хуков в React: https://reactjs.org/docs/hooks-intro.html

[7] embedded-устройствах: https://mobile.twitter.com/sveltejs/status/1088500539640418304

[8] Achim Vedam: https://vedam.de/

[9] svelte.technology: https://svelte.technology/

[10] svelte.dev: https://svelte.dev/

[11] svelte-upgrade: https://github.com/sveltejs/svelte-upgrade

[12] Sapper: https://sapper.svelte.technology/

[13] Svelte Native: https://svelte-native.technology/

[14] Discord чате: https://discord.gg/yy75DKs

[15] канале Telegram: https://t.me/sveltejs

[16] GitHub: https://github.com/sveltejs/svelte

[17] Источник: https://habr.com/ru/post/449450/?utm_campaign=449450