(И почему это будет круто, когда оно есть)

Проведя последние пару недель с использованием Svelte для личного проекта, я был очень доволен этим, хотя на этом пути возникли некоторые препятствия. Эта статья направлена ​​на изучение проблем, с которыми я столкнулся, а также на то, что такого хорошего в Svelte, - и все это основано на этой паре недель опыта. Если вы новичок в Svelte или пытаетесь получить лучший обзор текущих интерфейсных фреймворков JavaScript, эта статья может вам помочь.

Что такое Svelte?

Скорее всего, вы уже слышали о Svelte, если читаете это, так что краткий обзор: Svelte - это язык и компилятор для создания современных веб-приложений. Думайте об этом как о новом React / Vue. Он по-прежнему использует HTML, CSS и JS для создания приложений, но есть радикально другой подход к внутренней работе инструмента.

Еще не слышали о Svelte? Посмотрите этот потрясающий доклад Рича Харриса, автора, в котором он демонстрирует, как работает Svelte и чем он отличается от других фреймворков.

Плохой материал

Давайте теперь перейдем к моему опыту, начнем с плохого.

Исходные карты TypeScript

Поддержка TypeScript появилась в Svelte летом, так что не так давно, и это видно. Я не могу выразить это деликатно, так что ... исходные карты просто отстой, если вы используете TypeScript (должно быть, если вы серьезно относитесь к написанию приложения). Номера строк не совпадают, и на большинстве строк вы вообще не можете установить точку останова.

Уже существует открытый запрос на вытягивание для получения исходных карт наравне с JavaScript, но до тех пор, пока он не будет объединен, вы застряли в использовании операторов console.log и debugger для отладки кода.

Нет ESlint при использовании TypeScript

Это еще один облом: вы не можете использовать ESlint, если используете TypeScript, поскольку в подключаемом модуле ESlint Svelte еще нет поддержки препроцессоров (TS).

Опять же, уже есть запрос на включение для добавления поддержки. Так что остерегайтесь этих target=”_blank”s до тех пор.

Размер сообщества

Будучи самым молодым из всех, он пользуется гораздо меньшими темпами, чем старые фреймворки. Он растет, особенно в 2020 году, но не так быстро в абсолютных цифрах, как, например, Vue, поэтому кажется, что он еще не набрал обороты.

Это, конечно, имеет значение:

  • Компонентов, разработанных специально для Svelte, намного меньше, чем для других фреймворков.
  • Для объединения PR требуется некоторое время (частично также из-за того, что основная команда небольшая).
  • Вероятно, вы не получите быстрого ответа на свой вопрос о переполнении стека. (Не забывайте, что на Discord есть канал Svelte, где вы можете получить помощь от кучки действительно хороших людей!)
  • И самое главное, нельзя быть уверенным в том, что Svelte выживет в долгосрочной перспективе.

Дополнительное примечание: мне кажется, что React с его шумихой стал де-факто новой Java для интерфейса. (Он рос очень быстро, так как у него не было конкурентов, поэтому теперь у нас почти нет другого выбора, кроме как придерживаться его). Vue растет очень медленно и в ближайшее время не догонит React. Svelte сейчас просто карлик.

Вещи, сбивающие с толку новичка

В настоящее время существует как минимум два официальных способа начальной загрузки приложения Svelte. Один - использовать шаблон, другой - Сапер. Нет четкого объяснения, что и когда использовать. Из того, что я узнал:

  • Если вы создаете SPA, вам лучше всего использовать шаблон + маршрутизатор, например svelte-spa-router.
  • Если вы создаете приложение SSR, вам нужно использовать Sapper (это что-то вроде Next.js).

Но есть еще кое-что. Sapper по-прежнему имеет версию 0.x (хотя команда утверждает, что ее можно считать готовой к производству), а версия 1.0 выходит… никогда. Это потому, что Sapper будет заменен на Svelte Kit.

Svelte Kit унифицирует способ создания приложений Svelte, использует сверхбыстрый инструмент сборки и будет в основном совместим с приложениями, уже написанными с использованием Sapper. Так что если вы разработчик Svelte / Sapper, то это повод для восторга. Однако для новичков это может сбивать с толку.

Хороший материал

Убрав все плохое, перейдем к хорошему.

Учебник и REPL

У Svelte есть классный туториал. После этого вы узнаете все, что вам нужно знать о Svelte, за день или два. Также есть отличный REPL, где вы можете опробовать различные вещи и даже загрузить результат со всем необходимым для его запуска и работы.

Если вы потратили последние несколько лет на написание кода React, как я, и когда-либо видели однофайловый компонент Vue (SFC), вы почувствуете себя как дома, придя в Svelte благодаря этому руководству. Так что погрузитесь в это, если хотите увидеть, как выглядит синтаксис.

Однофайловые компоненты (SFC)

Я должен сказать больше? :) Однофайловые компоненты просто потрясающие. Если вы когда-либо использовали SFC Vue, вы знаете, почему. Весь связанный код находится в одном месте, он позволяет быстро создавать прототипы, и вам не нужно беспокоиться о том, что стили будут мешать друг другу.

В Svelte это значение по умолчанию. И опыт IMHO немного лучше, чем во Vue, поскольку здесь буквально нет шаблона вообще, вы начинаете с отступа 0, а стили по умолчанию ограничены. Давайте посмотрим, как будет выглядеть типичный приветственный мир:

Hello world

Да, даже это компонент в Svelte, и он будет отображаться именно так, как вы ожидаете! Как видите, я не шутил, нулевой шаблон.

Давайте посмотрим на что-нибудь посложнее, с использованием JavaScript и стиля:

<script>
 let something = "hello";
</script>
<style>
 p {
  color: purple;
  font-family: 'Comic Sans MS', cursive;
  font-size: 2em;
 }
</style>
<p>This is a {something}.</p>

Это будет отображаться как:

Напротив, просто подумайте, на сколько вкладок вы начинаете писать типичный компонент React и что вам нужно сделать, чтобы настроить его стили.

Батарейки в комплекте

Svelte также поставляется с магазинами для управления состоянием приложений и инструментами движения / перехода, которые упрощают создание анимации. В нем также есть директива класса, слоты, специальные элементы и т. Д. По сути, если вы создаете SPA, есть все, что вам нужно, кроме маршрутизатора (см. Выше). Так что усталости от решений практически нет.

Нет виртуального DOM

Только когда я начал использовать Svelte, я понял, насколько я действительно ненавижу виртуальный DOM. Мы создаем пользовательские интерфейсы, но при этом помещаем этот уровень абстракции между нами и пользовательским интерфейсом. Почему? На короткое время просто остановитесь и подумайте, действительно ли вам действительно нужен виртуальный DOM и вы хотите его использовать, или же вы в конечном итоге использовали его только потому, что он пришел с библиотекой.

Виртуальная модель DOM имеет множество недостатков (производительность и трудности с прямым доступом к модели DOM, и это лишь некоторые из них), но, вероятно, единственным реальным преимуществом должно было быть то, что вы могли писать декларативные пользовательские интерфейсы с предсказуемым состоянием. Удалось ли ему выполнить это обещание? Исходя из своего опыта, я бы сказал лишь отчасти. Определенно легче делать определенные вещи через виртуальную DOM, чем манипулировать DOM напрямую. В то же время, как и в случае с React, я видел так много плохо написанных фрагментов кода (некоторые из них мои) просто потому, что он дает программисту столько возможностей, что я серьезно сомневаюсь, что он имеет такое преимущество. В основном.

Svelte, с другой стороны, предоставляет вам набор инструментов, которые упрощают манипуляции с DOM, такие как операторы if, циклы, привязки, события или слоты - все это конвертируется в удобочитаемые части JS (проверьте вкладку вывода JS вот для примера ) во время компиляции. Это то, что вам действительно нужно в подавляющем большинстве случаев.

Простота Svelte в сочетании с четким разделением HTML, CSS и JavaScript - вот что делает его действительно ярким. Фактически, это то, для чего был создан Интернет.

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

Наконец, поскольку Svelte не использует виртуальную модель DOM и вообще не использует любую среду выполнения, она очень быстрая, а размер пакета, с которым вы начинаете, чрезвычайно мал.

Snowpack + Svelte = рай для продуктивности

Вы когда-нибудь слышали о Snowpack? Это безумно быстрый интерфейсный инструмент сборки, который создает модули ES вместо пакета для разработки. Почти мгновенное время запуска сервера разработки и горячая загрузка - вот что вы получаете с этим. И вы можете использовать его со Svelte. И, в отличие от React, горячая загрузка работает надежно. Серьезно, просто попробуйте. Вам больше не захочется возвращаться к Webpack. Я бы даже назвал это революционным. Но не обязательно мне верить, просто посмотрите демо Рича Харриса. До сих пор мой опыт был таким же.

Заключение

Итак, какой здесь вывод? Основываясь на моем почти трехнедельном опыте работы со Svelte, я считаю, что в настоящее время это отличный инструмент для создания прототипов или создания небольших приложений (где вам не нужна отличная поддержка TypeScript или вы можете жить с его небольшими недостатками). По сути, вы можете использовать его для всего, где вам нужно как можно быстрее работать продуктивно, и вы знаете, что можете выбросить его или позволить переписать его на React или Angular в любое время, если вам это не нравится.

Лично я думаю, что Svelte постепенно становится тем, чем должен был быть Vue - современной альтернативой React. Как только он немного повзрослеет и наберет обороты, он может стать выбором по умолчанию среди других фреймворков.

… Или (барабанная дробь, пожалуйста), вы знаете, может случиться так, что другие фреймворки заимствуют идеи Svelte, и Svelte стирается из истории, как миллиард других фреймворков / библиотек JS. Нам нужно посмотреть. На данный момент я продолжу изучать Svelte в рамках личного проекта, над которым работаю, и при этом буду придерживаться безопасного варианта - React - для проектов, требующих более одного разработчика.