Пару недель назад вышла новая версия Svelte. Рич Харрис опубликовал статью с описанием новых возможности — "Svelte 3: Rethinking reactivity".

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

Вот простой пример компонента, который отображает на кнопке количество нажатий:

<script>
 let count = 0;
 function handleClick() {
  count++
 };
</script>

<button on:click={handleClick}>{count}</button>

При компиляции хендлер превращается в такой код:

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

Таким образом view, которое использует переменную count, обновится после вызова $$invalidate.

В общем, проект интересный. Взлетит ли он как Vue, пока непонятно. Но можно точно сказать, что выход новой версии ещё сильнее подогрел конкуренцию на рынке js-фреймворков.

#jsframeworks #svelte #reactivity

https://svelte.dev/blog/svelte-3-rethinking-reactivity

Рич Харрис — создатель svelte и rollup — пару дней назад рассказал про подход для создания js-free графиков, который был проверен в бою на сайте New York Times, — "A new technique for making responsive, JavaScript-free charts".

Идея состоит в том, чтобы генерировать svg-разметку диаграммы на сервере. Весь текст и оси создаются с помощью обычного css и html, для того чтобы избавиться от искажений при изменении размера контейнера. То есть окончательная диаграмма представляет из себя "бутерброд" из html и svg. Для упрощения создания подобных графиков Рич создал библиотеку Pancake, которая работает поверх Svelte. Благодаря ей создаваемые диаграммы можно прогрессивно улучшать, добавляя интерактивность после инициализации js.

Pancake не является серебряной пулей — при большом количестве отображаемых данных есть проблемы с производительностью. Рич пишет, что планирует добавить поддержку рендеринга с помощью <canvas>.

#chart #library #svg #svelte

https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp

Райан Аткинсон рассказал, почему он выбрал Svelte для большого проекта — "Why Svelte is our choice for a large web project in 2020".

В статье Райан рассказывает про объективные преимущества Svelte относительно других фреймворков (скорость работы, гибкость компилятора, встроенная поддержка создания производительных анимаций), так и субъективные (приятно работать, легко изучать, синтаксис и семантика). В недостатках усложнение процесса сборки (компилятор должен выполнять больше работы в отличии от компиляции JSX или Vue-компонентов), новый синтаксис для новичков, реактивный синтаксис работает только с компонентами, рендеринг блокирует основной поток. Ещё есть проблемы, вызванные молодостью проекта: скромная экосистема инструментов (плагины для редакторов, поддержка TypeScript), лучшие практики ещё не устоялись, молодая экосистема библиотек, с ростом количества компонентов может значительно вырасти объём бандла (решается с помощью code splitting), мало вакансий на сегодняшний день, на данный момент у проекта нет финансовой поддержки.

Рекомендую почитать статью, если задумываетесь о переходе на Svelte и хотите узнать про плюсы и минусы фреймворка.

P.S. Спасибо @oleg_log за ссылку на статью.

#svelte

https://github.com/feltcoop/why-svelte

Орта Терокс в блоге Svelte написал статью о поддержке TypeScript — "Svelte ❤️ TypeScript".

TypeScript в Svelte поддерживался и раньше с помощью набора независимых инструментов, работа с которыми была неудобна для рядовых разработчиков. Эти инструменты были перемещены в GitHub-организацию Svelte и в целом была улучшена эргономика работы с TS в Svelte.

Поддержку TS можно включить с помощью установки необходимых пакетов и добавления атрибута lang="ts" в script. Ручную проверку типов можно запустить с помощью svelte-check. В редакторах поддерживается автодополнение кода и проверка типов в том числе внутри разметки.

Очень хорошая новость. Полноценную поддержку TypeScript в Svelte ждали многие разработчики.

#svelte #typescript #jsframeworks

https://svelte.dev/blog/svelte-and-typescript

Рич Харрис на Svelte Summit 2020 рассказал про новые фичи фреймворка, над которыми работает основная команда разработчиков Svelte — "Futuristic Web Development".

Идёт работа над интеграцией возможностей Sapper (фреймворк для построения приложений на базе Svelte с роутингом, код-сплиттингом и т.п.) в основную кодовую базу Svelte. В перспективе разработка Sapper будет остановлена.

Добавлена возможность создания гибридных приложений. В таких приложениях некоторые страницы могут быть пререндерены заранее в статический HTML.

Svelte будет полагаться на поддержку ESM в современных браузерах, так как для менеджмента зависимостей будет использоваться Snowpack. Благодаря этому не нужно постоянно собирать приложение при изменении кода. Rollup будет использоваться только для сборки финального оптимизированного бандла приложения.

Работа над новой версией фреймворка идёт в закрытом репозитории. Все новые фичи пока находятся на этапе эксперимента и могут быть исключены из финального релиза.

#svelte #jsframeworks #talk #experimental

https://www.youtube.com/watch?v=qSfdtmcZ4d0

Диего Хаз — автор библиотеки компонентов Reakit — рассказал о принципе разработки базовых компонентов — "Introducing the Single Element Pattern".

При разработке приложений Диего выделяет понятие "базовый компонент" — фундаментальную часть приложения, следующую определённым правилам, благодаря которым кодовая база проекта легко масштабируется и не усложняется в поддержке (принцип Singel). Правила:

— Компонент рендерит только один элемент (в редких случаях несколько)
— Компонент не должен ломать приложение при возникновении исключений
— Рендерит все HTML-атрибуты, переданные как пропсы
— Мёржит стили, передаваемые как пропсы
— Добавляет все обработчики событий, передаваемые как пропсы

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

#react #vue #angular #svelte

https://www.freecodecamp.org/news/introducing-the-single-element-pattern-dfbd2c295c5d/

Джек Франклин — участвует в разработке Chrome DevTools — реализовал на React и Svelte небольшое приложение для трекинга времени с сохранением данных в Firebase и рассказал о своём опыте в статье "Comparing Svelte and React".

В статье сравнивается простота интеграции с аутентификацией Firebase, работа с веб-воркерами, условный рендеринг, реактивность, композиция компонентов, стилизация. По результатам сравнения победил Svelte, так как в нём проще работать с сайд-эффектами. Кодовая база Svelte в целом также оказалась проще. Из коробки идут средства для работы со стилями. Как бы то ни было Джек пишет, что ему нравится работать и с React, и со Svelte.

Немного субъективная статья, но всё равно интересная. Рекомендую заглянуть.

#jsframeworks #react #svelte

https://www.jackfranklin.co.uk/blog/comparing-svelte-and-react-javascript/

Time-travel debugging в Svelte

Сэм Ван Тассел рассказал про DeLorian — новый инструмент для упрощения отладки Svelte-приложений — "Time Travel Debugging in Svelte with DeLorean".

DeLorian — это расширение Chrome DevTools для отслеживания изменений состояния приложения во времени (time-travel debugging). При изменении состояния создаётся снапшот, к которому можно вернуться в любое время. Перемещение по истории работает также как в Redux DevTools. Также DeLorian отображает дерево компонентов и связанные с ними переменные.

На данный момент есть ограничения: корень приложения должен находится в DOM-элементе с id="root", приложение должно быть собрано в dev-режиме и работать локально.

#svelte #debug #tool

https://medium.com/@vantassel.sam/time-travel-debugging-in-svelte-with-delorean-26e04efe9474