Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.
После нескольких месяцев, которые пролетели как пара дней, мы на седьмом небе от счастья потому, что можем объявить о стабильном релизе Svelte 3. Этот по-настоящему огромный релиз, результат сотен часов работы многих людей в сообществе Svelte, включая бета-тестеров, чьи бесценные отзывы помогали оттачивать дизайн фреймворка на каждом этапе этого пути.
Мы думаем, он вам понравится.
Svelte — это компонентный фреймворк, похожий на React или Vue, но с важным отличием. Традиционные фреймворки позволяют вам писать декларативный state-driven код, но не без наказаний: браузер должен выполнить дополнительную работу для преобразования этих декларативных структур в манипуляции с DOM, используя техники, такие как virtual DOM diffing, которые проедают имеющийся бюджет кадров отрисовки и добавляют обязанностей сборщику мусора.
Вместо этого Svelte работает во время сборки, преобразуя ваши компоненты в высокоэффективный императивный код, который с хирургической точностью обновляет DOM. В результате вы можете писать амбициозные приложения с отличными характеристиками по производительности.
Первая версия Svelte была посвящена проверке гипотезы — что специально созданный компилятор может генерировать надёжный код и обеспечивает отличный пользовательский опыт. Вторая версия была посвящена небольшим улучшениям, которые привели ряд вещей в порядок.
Svelte 3 — это уже существенный пересмотр. В течение последних пяти или шести месяцев мы уделяли особое внимание пользовательскому опыту разработчиков. Теперь можно писать компоненты с количеством шаблонного кода, значительно меньшим, чем где либо ещё. Попробуйте наш совершенно новый учебник и посмотрите, что мы имеем ввиду — если вы уже знакомы с другими фреймворками, думаем, вы будете приятно удивлены.
Чтобы эта возможность стала реальностью, нам сначала нужно было переосмыслить концепцию, лежащую в основе современных UI фреймворков: реактивность.
Доклад «Переосмысление реактивности» на You Gotta Love Frontend Code Camp 2019
В предыдущих версиях Svelte, вы должны были сообщить компьютеру, что какая-то часть состояния изменилась с помощью вызова метода this.set:
Он заставлял компонент реагировать. Кстати говоря, this.set практически идентичен методу this.setState, который использовался в классическом (до хуков) React:
Тут есть важные технические различия (как я объясняю в видео выше — React не реагирует), но концептуально это одно и то же.
Все изменилось с появлением хуков в React, которые управляют состоянием совсем по-другому. Многие фреймворки начали экспериментировать со своими собственными реализациями хуков, но мы быстро пришли к выводу, что это не то направление, куда бы мы хотели идти. Хуки имеют некоторые интригующие свойства, но они также включают в себя неестественный код и создают ненужную работу для сборщика мусора. Для фреймворка, который используется на embedded-устройствах, а также в тяжелых интерактивных анимациях, это не хорошо.
Поэтому мы сделали шаг назад и спросили себя, какой тип API был бы лучшим для нас… и поняли, что лучший API — это отсутствие API. Мы можем просто использовать язык. Обновление значения count и всех вещей, которые зависят от него, должно быть простым:
Поскольку мы являемся компилятором, мы можем сделать это, осуществляя фактическое присваивание за кулисами:
Важно отметить, что мы можем сделать всё это без лишних затрат и сложности использования прокси или аксессоров. Это просто переменная.
Не только компоненты получили подтяжку лица. Сам Svelte теперь имеет совершенно новый внешний вид благодаря удивительной дизайнерской работе Achim Vedam, создавшего новый логотип и веб-сайт, который переехал со svelte.technology на svelte.dev.
Мы также изменили наш слоган с «Магически исчезающего UI фреймворка» на «Кибернетически улучшенные web-приложения». У Svelte много сильных сторон — отличная производительность, небольшой размер бандла, доступность, встроенная инкапсуляция стилей, декларативные анимации переходов, простота использования, тот факт, что это компилятор и многие другие. Поэтому сосредоточение внимания на одной из них кажется несправедливым по отношению к другим.
Если вы уже являетесь пользователем Svelte 2, боюсь, потребуется ручное обновление ваших проектов. В ближайшие дни мы выпустим руководство по миграции и обновлённую версию утилиты svelte-upgrade, которая сделает всё возможное, чтобы автоматизировать процесс. Но изменения слишком существенные, поэтому не всё может быть обработано автоматически.
Такое решение далось нам не легко: надеюсь, что, испытав Svelte 3, вы поймете, почему мы сочли необходимым порвать с прошлым.
Каким бы изнурительным ни был этот релиз, мы ещё не закончили. У нас есть масса идей как генерировать код умнее, более компактно, и длинный список пожеланий. Sapper, наш фреймворк для приложений в стиле Next.js, всё ёще находится в процессе обновления для использования совместно со Svelte 3. Проект сообщества Svelte Native, который позволяет писать приложения для Android и iOS на Svelte, продвигается вперед и заслуживает более полной поддержки со стороны ядра.
У нас пока нет множества расширений для редакторов, подсветки синтаксиса, наборов компонентов, devtools и т. д., которые есть у других фреймворков, и мы должны это исправить. И мы действительно хотим добавить первоклассную поддержку TypeScript.
Несмотря на всё это, мы считаем, что сейчас Svelte 3 — лучший способ создания веб-приложений. Потратьте час, чтобы пройти учебник и мы надеемся, что убедим вас в этом. В любом случае, мы хотели бы видеть вас в нашем Discord чате, русскоязычном канале Telegram и на GitHub — добро пожаловать всем, особенно вам.
Документация на русском по Svelte 3.
Учебник на русском по Svelte 3.
Примеры на русском по Svelte 3.
За работу над русскоязычным сайтом отдельное и большое спасибо AlexxNB! Гип-гип ура!
Наконец-то он здесь
После нескольких месяцев, которые пролетели как пара дней, мы на седьмом небе от счастья потому, что можем объявить о стабильном релизе Svelte 3. Этот по-настоящему огромный релиз, результат сотен часов работы многих людей в сообществе Svelte, включая бета-тестеров, чьи бесценные отзывы помогали оттачивать дизайн фреймворка на каждом этапе этого пути.
Мы думаем, он вам понравится.
Что такое Svelte?
Svelte — это компонентный фреймворк, похожий на React или Vue, но с важным отличием. Традиционные фреймворки позволяют вам писать декларативный state-driven код, но не без наказаний: браузер должен выполнить дополнительную работу для преобразования этих декларативных структур в манипуляции с DOM, используя техники, такие как virtual DOM diffing, которые проедают имеющийся бюджет кадров отрисовки и добавляют обязанностей сборщику мусора.
Вместо этого Svelte работает во время сборки, преобразуя ваши компоненты в высокоэффективный императивный код, который с хирургической точностью обновляет DOM. В результате вы можете писать амбициозные приложения с отличными характеристиками по производительности.
Первая версия Svelte была посвящена проверке гипотезы — что специально созданный компилятор может генерировать надёжный код и обеспечивает отличный пользовательский опыт. Вторая версия была посвящена небольшим улучшениям, которые привели ряд вещей в порядок.
Svelte 3 — это уже существенный пересмотр. В течение последних пяти или шести месяцев мы уделяли особое внимание пользовательскому опыту разработчиков. Теперь можно писать компоненты с количеством шаблонного кода, значительно меньшим, чем где либо ещё. Попробуйте наш совершенно новый учебник и посмотрите, что мы имеем ввиду — если вы уже знакомы с другими фреймворками, думаем, вы будете приятно удивлены.
Чтобы эта возможность стала реальностью, нам сначала нужно было переосмыслить концепцию, лежащую в основе современных UI фреймворков: реактивность.
Доклад «Переосмысление реактивности» на You Gotta Love Frontend Code Camp 2019
Перемещение реактивности в язык
В предыдущих версиях 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 не реагирует), но концептуально это одно и то же.
Все изменилось с появлением хуков в React, которые управляют состоянием совсем по-другому. Многие фреймворки начали экспериментировать со своими собственными реализациями хуков, но мы быстро пришли к выводу, что это не то направление, куда бы мы хотели идти. Хуки имеют некоторые интригующие свойства, но они также включают в себя неестественный код и создают ненужную работу для сборщика мусора. Для фреймворка, который используется на embedded-устройствах, а также в тяжелых интерактивных анимациях, это не хорошо.
Поэтому мы сделали шаг назад и спросили себя, какой тип API был бы лучшим для нас… и поняли, что лучший API — это отсутствие API. Мы можем просто использовать язык. Обновление значения count и всех вещей, которые зависят от него, должно быть простым:
count += 1;
Поскольку мы являемся компилятором, мы можем сделать это, осуществляя фактическое присваивание за кулисами:
count += 1; $$invalidate('count', count);
Важно отметить, что мы можем сделать всё это без лишних затрат и сложности использования прокси или аксессоров. Это просто переменная.
Новый облик
Не только компоненты получили подтяжку лица. Сам Svelte теперь имеет совершенно новый внешний вид благодаря удивительной дизайнерской работе Achim Vedam, создавшего новый логотип и веб-сайт, который переехал со svelte.technology на svelte.dev.
Мы также изменили наш слоган с «Магически исчезающего UI фреймворка» на «Кибернетически улучшенные web-приложения». У Svelte много сильных сторон — отличная производительность, небольшой размер бандла, доступность, встроенная инкапсуляция стилей, декларативные анимации переходов, простота использования, тот факт, что это компилятор и многие другие. Поэтому сосредоточение внимания на одной из них кажется несправедливым по отношению к другим.
Обновление с версии 2
Если вы уже являетесь пользователем Svelte 2, боюсь, потребуется ручное обновление ваших проектов. В ближайшие дни мы выпустим руководство по миграции и обновлённую версию утилиты svelte-upgrade, которая сделает всё возможное, чтобы автоматизировать процесс. Но изменения слишком существенные, поэтому не всё может быть обработано автоматически.
Такое решение далось нам не легко: надеюсь, что, испытав Svelte 3, вы поймете, почему мы сочли необходимым порвать с прошлым.
Все ещё впереди
Каким бы изнурительным ни был этот релиз, мы ещё не закончили. У нас есть масса идей как генерировать код умнее, более компактно, и длинный список пожеланий. Sapper, наш фреймворк для приложений в стиле Next.js, всё ёще находится в процессе обновления для использования совместно со Svelte 3. Проект сообщества Svelte Native, который позволяет писать приложения для Android и iOS на Svelte, продвигается вперед и заслуживает более полной поддержки со стороны ядра.
У нас пока нет множества расширений для редакторов, подсветки синтаксиса, наборов компонентов, devtools и т. д., которые есть у других фреймворков, и мы должны это исправить. И мы действительно хотим добавить первоклассную поддержку TypeScript.
Несмотря на всё это, мы считаем, что сейчас Svelte 3 — лучший способ создания веб-приложений. Потратьте час, чтобы пройти учебник и мы надеемся, что убедим вас в этом. В любом случае, мы хотели бы видеть вас в нашем Discord чате, русскоязычном канале Telegram и на GitHub — добро пожаловать всем, особенно вам.
P/S — Еще немного полезных ссылок
Документация на русском по Svelte 3.
Учебник на русском по Svelte 3.
Примеры на русском по Svelte 3.
За работу над русскоязычным сайтом отдельное и большое спасибо AlexxNB! Гип-гип ура!
