Ваза для фруктов фронтенд-каркасов заполнена, а React - это жирная дыня, занимающая все пространство. Неужели нам нужна еще одна технология для изучения? Рич Харрис из New York Times говорит, что да, и SvelteJS - его предложение.

Инженеру важно изучать различные технологии. Важно определить доступные инструменты для решения проблем. И важно расширить свой кругозор, потому что тогда вы сможете круто выглядеть в своем резюме.

Я не буду скромничать. Я считаю Svelte невероятным. Но я также люблю React, и это то, что я использую каждый день на работе. Это то, что использует большинство людей. У Svelte есть определенные преимущества, но есть ли у него шанс изменить эту реальность? Единственный способ узнать это - рассмотреть их рядом и решить для себя.

Создание проекта React против создания проекта Svelte

И React, и Svelte могут похвастаться инструментами для создания скелетных проектов. Приложение Create React - одно из наиболее широко используемых. Его использование выглядит примерно так.

npx create-react-app my-react-app

Эта команда создает проект и устанавливает зависимости. Когда я запустил его на своей машине, это заняло около 3 минут. Это не так уж и плохо, и генератор CRA заранее даже предупреждает об этом.

Генератор установил целых 1566 пакетов, и этим даже не останавливается. Потом будет еще кое-что. Не знаю, зачем его так много, но, возможно, они все уже используются.

Для сравнения, генератор Svelte можно запустить так:

npx degit sveltejs/template my-svelte-project

Это выполняется примерно за 2 секунды.

Очевидное улучшение, но при этом не устанавливаются зависимости. Это займет еще 8 секунд.

Svelte явно быстрее, но насколько важна скорость генерации проектов? Только разовое выступление, и, в конце концов, все зависит от того, что вы получите. Итак, давайте рассмотрим фреймворки более подробно.

Компонент Svelte против компонента React

Ниже представлен компонент корзины покупок, написанный на React. Вот важные моменты.

  • Он получает свойство limit, которое представляет максимальное количество товаров, разрешенных в корзине.
  • Имеется поле ввода для ввода имени элемента.
  • У него есть кнопка для отправки названия предмета.
  • Есть оператор if, чтобы скрыть кнопку и поле ввода, если предел был достигнут.
  • И цикл для отображения всех товаров в корзине.
  • Также есть несколько встроенных стилей.

Вот такой же компонент в Svelte.

С их текущим форматированием, опосредованным плагином Prettier, компонент Svelte занимает 25 строк кода по сравнению с 34 строками кода React. Это похоже на победу Svelte, но компромисс заключается в каком-то странном синтаксисе, таком как if и each. Объявления Prop также выглядят странно, так как вам нужно написать export let <prop-name>;, чтобы определить, какие данные ожидает компонент.

Но с привязкой значений не поспоришь. Вам не нужно беспокоиться об определении свойства value и события onChange для поля ввода в Svelte, bind:value сделает все. При необходимости вы по-прежнему можете получить доступ к объекту события.

Государственное управление тоже проще. Вместо того, чтобы импортировать хуки и использовать сеттеры, вы просто определяете свойство в тегах script. Затем вы изменяете значение, переназначив его (не изменяя исходное значение).

Учитывая все это, подход Svelte кажется более простым. Но это не обязательно означает лучше. И синтаксис странный. Итак, перейдем к другому важному аспекту: размеру пакета.

Svelte Bundle против React Bundle

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

Результат сборки CRA выглядел так.

У Svelte был вот такой.

Ясно, что Svelte производит гораздо меньше. Но CRA все равно использует разделение кода, так что, возможно, это не имеет значения.

Заключение

Итак, React или Svelte? Ответ, вероятно, и то, и другое. Svelte - это классный фреймворк, который требует немного меньше работы и выдаёт супероптимизированный javascript. Но это ново. А новое означает, что все может случиться.

И наоборот, React хорошо зарекомендовал себя и хорошо поддерживается. Целая команда работает каждый день над улучшением опыта, миллион руководств и кажется, что каждый бизнес по эту сторону Млечного Пути использует его.

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

Подробнее…

Если вы хотите узнать больше о Svelte, вам следует ознакомиться с докладом Рича Харриса Переосмысление реактивности. Затем у Academind есть отличное вводное руководство здесь. И, наконец, я беззастенчиво подключаю свою работу Введение в SvelteJS.