Недавно я прошел 2 курса по Svelte и Sapper — один от Рича Харриса по Frontend Masters, а другой по Udemy. Я построил мини-проект с помощью Svelte и воссоздал его в Sapper — вот мои первые мысли.
Что я любил
Синтаксис — синтаксис намного компактнее!
Там очень мало шаблонов и то, как он структурирован как обычный html с тегами script и style — очень легко скопировать уценку и стили из ссылки, которую вы действительно любите. Лично я чувствовал, что у меня гораздо меньше сопротивления созданию новых компонентов, просто из-за этого:
Рич Харрис говорит, что компоненты Svelte обычно содержат на 40% меньше кода, чем React. Теперь этот пример очень простой, поэтому я не знаю, будет ли разница каждый раз такой большой. Но я определенно вижу пользу от использования Svelte.
Упрощенное глобальное управление магазином
Если вы использовали Redux — это будет похоже на то, что Бог послал! Создание редуктора может быть оооочень утомительным. Для меня это обычно происходило так. Запустить файл редуктора -> понять, что мне нужны константы действий -> создать константы в файле actionConstants -> завершить редуктор -> создать константы действий -> отправить действие из компонента… и, очевидно, это не удается, потому что я забыл добавьте редуктор в комбинированный редусер. Кстати, мне еще нужно написать селектор — Ааааа!
Со Svelte это становится намного проще. Магазин Svelte похож на класс, который инкапсулирует доступ к хранилищу и экспортирует методы, необходимые для управления хранилищем, в виде пар ключ-значение — вот и все!
Все, что вам нужно сделать сейчас, это импортировать магазин, где бы вы его ни использовали, и получить доступ к его методам, подобным этому — store.addMeetup(obj). Вы даже можете добавить селектор в этот же файл!
Легко учить
Я прошел 2 курса по Svelte — и они оказались очень полезными. Но если вы знакомы с React, внедрить Svelte не составит труда. Создать новый проект Svelte с помощью их команды degit очень просто — точно так же, как Create React App. Учебник на https://svelte.dev/tutorial/basics — это все, что вам нужно для изучения синтаксиса. Структура компонентов практически одинакова, и у нас очень похожие события жизненного цикла (onMount, onDestroy). useEffects и useMemos реализованы с помощью операторов ‘$:’ (что я нахожу действительно крутым — кстати, без массива зависимостей).
Концепции Sapper очень хорошо соответствуют Next.JS. Структура папок практически одинакова, и страницы работают одинаково.
- Далее — каталог «pages» = Sapper — «routes».
- экспортировать асинхронный getInitialProps = экспортировать асинхронную предварительную загрузку
- _app.js = _layout.js
- ‹Голова› = ‹стройная:голова›
Есть нюансы, но не критичны.
Блоки ожидания в html
Этот паттерн настолько распространен — мы ждем, когда обещание разрешится, мы хотим показать загрузчик до того момента, когда он это сделает. Если он разрешается, мы показываем содержимое, если он отклоняется, мы показываем сообщение об ошибке. В случае с React это означало управление хранилищем, переменной загрузки и переменной ошибки. Svelte обрабатывает это внутри и дает нам классный блок ожидания!
Стили, анимация, переходы
Добавлять стили очень просто. Просто добавьте тег стиля в тот же файл .svelte — это как css в js — только на самом деле это css! Стили автоматически привязаны к этому конкретному компоненту. Никакой дополнительной плиты котла для этого.
Анимации и переходы поставляются из коробки, и их не нужно добавлять в css. Вместо этого вы можете добавить их к своим элементам в качестве реквизита!
Это действительно интуитивно понятно для написания, и это делает UX намного лучше.
Самый быстрый еще
Svelte работает в 35 раз быстрее, чем React! Это безумно. Хотя это, вероятно, никогда не будет проблемой — React достаточно производительен, чтобы из-за этого вы не сталкивались с узким местом. Мне все еще нравится, что это намного быстрее. А поскольку Svelte — это компилятор, а не фреймворк, размеры ваших сборок меньше, потому что вы отправляете только те части Svelte, которые используете, а не весь оптимизированный фреймворк, такой как React.
Обеспокоенность
Иногда он терпит неудачу молча
Иногда, если вы изменили свой код и что-то пошло не так, Svelte может предоставить последнюю рабочую кешированную версию вашего кода, а не сломать код (по крайней мере, я так думаю). Сообщения об ошибках отображаются в консоли, а не в виде громких всплывающих окон — и, поскольку я привык к следующему и громко реагировать на сбои, к этому нужно привыкнуть.
Поддержка сообщества
React огромен, и поддержку React найти очень легко. Это еще не относится к Svelte. Так что пакеты и поддержка могут быть немного сложными. Однако достаточно компаний уже используют Svelte, что должно придать нам уверенности в том, что мы будем двигаться дальше.
