Вы на грани дебатов о Svelte vs React? Вы не единственный.

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

React мертв.

Svelte был мертв до своего развития.

А потом мы видим:

React определит будущее.

Svelte - это будущее.

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

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

Реагировать

Технология React, излюбленная MPC, уже обсуждалась несколько раз. Мы объяснили, что такое React в первую очередь, почему React - хороший выбор и чем он отличается от React Native. Но позвольте мне сделать вам небольшое напоминание:

React - это библиотека JavaScript, предназначенная для интерфейсной разработки, в частности, для создания пользовательских интерфейсов, состоящих из компонентов многократного использования. Он был создан Facebook (оригинальный автор: Jordan Walke) в 2011 году для собственного использования и поддерживается ими по сей день. Два года спустя он был сделан с открытым исходным кодом и быстро завоевал популярность. Он особенно известен тем, что его довольно легко освоить, он чрезвычайно быстро развивается и огромное сообщество разработчиков, готовых помочь. Одна из самых известных функций - Virtual DOM, повышающая производительность приложений React.

Svelte

Что это?

Svelte - один из самых молодых ребят в округе. Он был выпущен в 2016 году после анализа своих предшественников - React и Vue в частности. Он был создан Ричем Харрисом и в настоящее время поддерживается основными участниками Svelte. Его используют следующие компании: The New York Times, Avast, Spotify, Semrush и Chess.

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

Svelte неплохо себя чувствует, когда дело касается его популярности. В обзоре Состояние JS 2020 86% разработчиков выразили удовлетворение работой со Svelte. В недавнем опросе, подготовленном Stack Overflow в 2021 году, Svelte был выбран как самый любимый фреймворк 71,42% респондентов, опередив React (69,28%) и Vue (64,41%). Но в целом Svelte используется реже, чем другие фреймворки, так что имейте это в виду, глядя на эти цифры.

Зачем он был создан?

Рич Харрис - создатель Ractive, библиотеки пользовательского интерфейса на основе шаблонов, разработанной для высокоинтерактивных приложений. Изначально он создавался для The Guardian.

Но Харрис был не совсем доволен этим продуктом. Это не решило одной важной проблемы - дороговизны доставки Javascript, которая сильно повлияла на мобильных пользователей. Чтобы справиться с этим, Харрис придумал компилятор, подобный фреймворку, который сокращает объем служебного кода, необходимый приложениям Svelte.

Сравнение React и Svelte

1. Svelte более производительна

В этом отношении Svelte доминирует не только над React, но также над Angular и Vue. Во всех тестах - включая тест скорости, тест при запуске и тест памяти - Svelte является явным победителем. Откуда взялась такая невероятно высокая производительность?

Что дает Svelte такое значительное преимущество, так это то, что он интерпретирует код приложения во время сборки, а не во время выполнения. Кроме того, поскольку HTML, CSS и JavaScript компилируются в крошечные, высоко оптимизированные пакеты, Приложение Svelte получает только бизнес-логику. Другие фреймворки вынуждены поставлять служебный код фреймворка и заставлять браузер делать тяжелую работу, что все замедляет.

Что также улучшает производительность, так это, что удивительно, отсутствие Virtual DOM.

2. Svelte не использует виртуальную модель DOM.

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

Поэтому со стороны Svelte было очень смело отказаться от него.

Но сначала, что такое Virtual DOM?

Это виртуальное представление объектной модели документа, которая служит временным хранилищем памяти для всех изменений, вносимых в пользовательский интерфейс.

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

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

Когда DOM обновляется с помощью Svelte? Каждый раз, когда состояние веб-приложения изменяется, например, из-за действий пользователя. Это автоматизированный процесс, который делает Svelte действительно реактивным.

3. Svelte более реактивен… или нет?

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

Но если есть какие-либо изменения значений, они не будут автоматически отражены в DOM. React обновляет компоненты по расписанию. Без использования this.setState или хуков React не будет… ну, реагировать должным образом.

Дело в том, что Svelte тоже делает то же самое. Он обновляет DOM при изменении стадии компонента, но только когда он запускается назначениями. До этого момента все изменения объединяются. Похоже?

Но есть также реактивные объявления и переменные, которые следует учитывать. Реактивные объявления отвечают за автоматический пересчет логики во время каждого обновления. А реактивные переменные, однажды объявленные и измененные, вызывают изменение других переменных, если они связаны. Это тоже до смешного легко сделать - просто добавив знак доллара.

Так действительно ли Svelte реактивен? Наверное, насколько serverless не имеет серверов. По сравнению с React, реактивность достигается легче, но аналогичные вещи можно делать с помощью обеих технологий.

4. Компоненты Svelte обрабатываются немного иначе.

То, как Svelte использует компоненты (созданные в Svelte путем создания файлов .svelte), также отличается от React.

Прежде всего, вам не нужно ничего делать для экспорта компонентов - Svelte экспортирует их самостоятельно, автоматически. В React это приходилось делать вручную.

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

Есть также некоторые сходства - например, передача данных дочерним компонентам и отправка данных обратно родительским компонентам может показаться вам знакомым.

5. Svelte не нужно столько сторонних инструментов.

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

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

У Svelte также есть несколько способов справиться с управлением государством. Вы можете использовать:

  • Контекстный API: когда вашим компонентам необходимо обмениваться данными и передавать данные,
  • Svelte Stores: когда вашим компонентам необходимо обмениваться данными без передачи слишком большого количества данных,
  • Записываемые хранилища: если вы хотите сделать объекты доступными для различных компонентов,
  • Доступные для чтения магазины: если вы не хотите, чтобы пользователь манипулировал данными.

6. Svelte легче.

Размер GZip-версии React составляет 42,2 КБ (включая ReactDOM).

Размер Svelte, сжатый с помощью GZip, составляет 1,6 КБ.

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

7. Svelte предлагает более быструю веб-разработку.

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

Процесс разработки Svelte еще быстрее. Как такое возможно?

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

8. Svelte (немного) легче освоить.

Кривая обучения обеим технологиям считается довольно простой. Оба они требуют знания HTML, CSS и JavaScript. Но Svelte в очередной раз удалось превзойти React.

В React одним из препятствий является JSX, XML-подобный синтаксис JavaScript, предназначенный для создания пользовательских интерфейсов. Svelte использует более простой синтаксис и собственный язык шаблонов, который легко понять.

Так Svelte лучше React?

Svelte может показаться замечательным - он прост и упрощает разработку, но он все еще отстает от React с точки зрения популярности и использования. Самые большие недостатки Svelte:

1. У Svelte не такое богатое сообщество

Поскольку React настолько популярен, что подтверждается притоком приложений React , у него есть огромное сообщество увлеченных разработчиков, которые создают всевозможные учебные пособия и руководства (часто бесплатно). , и всегда доступны для мозгового штурма. Существует также множество инструментов для облегчения процесса разработки, таких как React Developer Tools или Redux DevTools, которые идут рука об руку с Redux.

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

2. Компания Svelte не поддерживает

Кажется, это не имеет большого значения? Что ж, может быть.

React поддерживается и поддерживается Facebook, который использует его в своих целях. У них есть необходимые средства, чтобы продолжать работать над этим. Более того, нет опасений, что Facebook внезапно перейдет на Angular, который поддерживается Google. Это делает React в значительной степени перспективным.

Будущее Svelte не так однозначно. Он поддерживается сообществом, но кто знает, как долго продлится их энтузиазм. Возможно, Svelte вдохновит на создание еще одной новой технологии, которая займет ее место.

3. Svelte редко используется в крупномасштабных веб-сайтах.

Svelte достаточно недавно стал достаточно для приложений корпоративного масштаба.

Это означает, что в мире не так уж много вариантов использования Svelte. Только недавно Radio France добавило Svelte в свой стек технологий, точно так же, как Скотт Толински использовал его для своей платформы Level Up Tutorials. Пока что влиятельные игроки предпочитают другие технологии, поэтому Svelte еще предстоит испытать в боевых условиях. Его будущее, хотя и обнадеживающее, остается неизвестным.

Заключение

Svelte предлагает многое. Превосходный за свой размер, высокоэффективный императивный код, а также невероятно высокую производительность Svelte может показаться серьезным конкурентом таких технологий, как React или Angular.

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

Несмотря на все свои преимущества, время сиять Svelte еще не пришло. Осторожно, React! Но не волнуйтесь. А пока твоя корона остается на месте.

Ключевые выводы

Первоначально опубликовано на https://massivepixel.io.