- PVSM.RU - https://www.pvsm.ru -
Буквально на днях произошло большое событие в сообществе SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.
После нескольких месяцев, которые пролетели как пара дней, мы на седьмом небе от счастья потому, что можем объявить о стабильном релизе Svelte 3. Этот по-настоящему огромный релиз, результат сотен часов работы многих людей в сообществе Svelte, включая бета-тестеров, чьи бесценные отзывы помогали оттачивать дизайн фреймворка на каждом этапе этого пути.
Мы думаем, он вам понравится.
Svelte — это компонентный фреймворк, похожий на React или Vue, но с важным отличием. Традиционные фреймворки позволяют вам писать декларативный state-driven код, но не без наказаний: браузер должен выполнить дополнительную работу для преобразования этих декларативных структур в манипуляции с DOM, используя техники, такие как virtual DOM diffing [1], которые проедают имеющийся бюджет кадров отрисовки и добавляют обязанностей сборщику мусора.
Вместо этого Svelte работает во время сборки, преобразуя ваши компоненты в высокоэффективный императивный код, который с хирургической точностью обновляет DOM. В результате вы можете писать амбициозные приложения с отличными характеристиками по производительности.
Первая версия Svelte была посвящена проверке гипотезы [2] — что специально созданный компилятор может генерировать надёжный код и обеспечивает отличный пользовательский опыт. Вторая версия была посвящена небольшим улучшениям, которые привели ряд вещей в порядок.
Svelte 3 — это уже существенный пересмотр. В течение последних пяти или шести месяцев мы уделяли особое внимание пользовательскому опыту разработчиков. Теперь можно писать компоненты с количеством шаблонного кода, значительно меньшим [3], чем где либо ещё. Попробуйте наш совершенно новый учебник [4] и посмотрите, что мы имеем ввиду — если вы уже знакомы с другими фреймворками, думаем, вы будете приятно удивлены.
Чтобы эта возможность стала реальностью, нам сначала нужно было переосмыслить концепцию, лежащую в основе современных UI фреймворков: реактивность.
В предыдущих версиях 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 много сильных сторон — отличная производительность, небольшой размер бандла, доступность, встроенная инкапсуляция стилей, декларативные анимации переходов, простота использования, тот факт, что это компилятор и многие другие. Поэтому сосредоточение внимания на одной из них кажется несправедливым по отношению к другим.
Если вы уже являетесь пользователем 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
Нажмите здесь для печати.