Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Поэтому ниже под катом перевод статьи автора Svelte и отличное видео с его доклада на YGLF 2019. 
Наконец он здесь
Спустя несколько месяцев, которые пролетели как пара дней, мы на седьмом небе от счастья, чтобы объявить о стабильном выпуске Svelte 3. Этот поистине огромный релиз является результатом сотен часов работы многих людей в сообществе Svelte, включая бета-версию.тестировщики, чьи бесценные отзывы помогли усовершенствовать дизайн платформы на каждом этапе пути.
Мы думаем, вам понравится.
Что такое Свелте?
Svelte — это компонентная среда, похожая на React или Vue, но с важным отличием.Традиционные фреймворки позволяют писать декларативный код, управляемый состоянием, но не без штрафов: браузер должен проделать дополнительную работу, чтобы преобразовать эти декларативные структуры в манипуляции с DOM, используя такие методы, как виртуальное различие DOM , которые съедают доступный бюджет кадров рендеринга и добавляют обязанности сборщику мусора.
Вместо этого работает Svelte во время сборки превращая ваши компоненты в высокоэффективные императив код, который обновляет DOM с хирургической точностью.
В результате вы можете писать амбициозные приложения с отличными характеристиками производительности.
Первая версия Svelte была посвящена проверка гипотезы - что специально разработанный компилятор может генерировать надежный код и обеспечивать отличное взаимодействие с пользователем.
Вторая версия была посвящена небольшим улучшениям, которые привели в порядок ряд вещей.
Svelte 3 — это уже значительная доработка.
Последние пять-шесть месяцев мы фокусировались на пользовательском опыте.
Разработчики .
Теперь вы можете писать компоненты с большим количеством шаблонного кода, значительно меньше чем где-либо еще.
Попробуйте нашу новинку учебник и поймите, что мы имеем в виду: если вы уже знакомы с другими фреймворками, мы думаем, вы будете приятно удивлены.
Чтобы эта возможность стала реальностью, нам сначала нужно было переосмыслить концепцию, лежащую в основе современных UI-фреймворков: реактивность.
Выступление «Переосмысление реактивности» на Вам обязательно понравится лагерь Frontend Code 2019
Перенос реактивности в язык
В предыдущих версиях Svelte вам приходилось сообщать компьютеру, что какая-то часть состояния изменилась, вызывая метод. этот.set :Это вызвало реакцию компонента.const { count } = this.get(); this.set({ count: count + 1 });
Кстати, этот.set почти идентичен методу это.
setState , который использовался в классическом (до хуков) React: const { count } = this.state;
this.setState({
count: count + 1
});
Здесь есть важные технические различия (как я объясняю в видео выше — React не отзывчив), но концептуально это одно и то же.
Все изменилось с появлением хуки в React , которые управляют состоянием совершенно другим способом.
Многие фреймворки начали экспериментировать со своими собственными реализациями перехватчиков, но мы быстро пришли к выводу, что это не то направление, в котором мы хотим идти.
Хуки обладают некоторыми интригующими свойствами, но они также включают в себя неестественный код и создают ненужную работу для сборщика мусора.
Для фреймворка, который используется на встроенные устройства , а также в тяжелых интерактивных анимациях это нехорошо.
Поэтому мы сделали шаг назад и спросили себя, какой тип API подойдет нам лучше всего… и поняли, что лучший API — это отсутствие API. Мы можем просто использовать язык .
Обновить значение считать и все, что от него зависит, должно быть простым: count += 1;
Поскольку мы являемся компилятором, мы можем сделать это, выполнив фактическое назначение за кулисами: count += 1; $$invalidate('count', count);
Важно отметить, что мы можем сделать все это без дополнительных затрат и сложностей, связанных с использованием прокси или средств доступа.
Это просто переменная.
Новый облик
Обновлению подверглись не только компоненты.Сам Svelte теперь имеет совершенно новый вид благодаря потрясающей дизайнерской работе.
Ахим Ведам , которая создала новый логотип и веб-сайт, перенесенный с стройная технология на svelte.dev .
Мы также изменили наш слоган с «Волшебно исчезающего фреймворка пользовательского интерфейса» на «Кибернетически улучшенные веб-приложения».
У Svelte много сильных сторон — отличная производительность, небольшой размер пакета, доступность, встроенная инкапсуляция стилей, декларативная анимация перехода, простота использования, тот факт, что это компилятор и многие другие.
Поэтому сосредоточение внимания на одном из них кажется несправедливым по отношению к другим.
Обновление с версии 2
Если вы уже являетесь пользователем Svelte 2, боюсь, вам потребуется ручное обновление ваших проектов.В ближайшие дни мы выпустим руководство по миграции и обновленную версию утилиты.
svelte-обновление , который сделает все возможное для автоматизации процесса.
Но изменения слишком значительны, поэтому не все можно обработать автоматически.
Это решение далось нам нелегко: надеюсь, после тестирования Svelte 3 вы поймете, почему мы сочли необходимым порвать с прошлым.
Еще впереди
Каким бы изнурительным ни был этот выпуск, мы еще не закончили.У нас есть много идей, как генерировать код умнее, компактнее, и длинный список пожеланий.
Сапер , наша платформа приложений в стиле Next.js, все еще находится в процессе обновления для использования со Svelte 3. Проект сообщества Стройный родной , который позволяет писать приложения для Android и iOS в Svelte, развивается и заслуживает более полной поддержки ядра.
У нас пока не так много расширений редактора, подсветки синтаксиса, наборов компонентов, инструментов разработчика и т. д., которые есть в других фреймворках, и нам нужно это исправить.
И мы Действительно Мы хотим добавить первоклассную поддержку TypeScript. Несмотря на все это, мы считаем, что Svelte 3 сейчас — лучший способ создания веб-приложений.
Потратьте час, чтобы пройти учебник и мы надеемся убедить вас в этом.
В любом случае, мы хотели бы видеть Вас в нашем Дискорд чат , русскоязычный Telegram-канал и дальше GitHub - Добро пожаловать всем, особенно вам.
P/S, еще несколько полезных ссылок.
Документация на русском языке для Svelte 3. Учебник на русском языке для Svelte 3. Примеры на русском языке с использованием Svelte 3. Особая и большая благодарность за работу над русскоязычным сайтом.
AlexxNB ! Гип-гип ура! Теги: #Разработка сайтов #JavaScript #HTML #react #Оптимизация клиента #svelte #SvelteJS #Реактивное программирование
-
Глаз
19 Oct, 24 -
Менеджер Приложений Для Windows Mobile
19 Oct, 24 -
Репортаж С Южного Четвертьфинала
19 Oct, 24 -
С Днем 3D, Работники Z-Измерения!
19 Oct, 24
