React vs. Svelte: война между виртуальной и реальной DOM

Недавно я имел удовольствие поиграть со Svelte и научился создавать простое приложение для корзины покупок. Более того, я не мог не заметить много общего в нем с React. Удивительно видеть, насколько он может быть достойным соперником одной из самых популярных библиотек JavaScript для создания пользовательских интерфейсов. В этой статье я собираюсь сравнить Svelte и React и сравнить их за кулисами.

Svelte - компилятор, а React использует Virtual DOM

И React, и Svelte предоставляют схожую компонентную архитектуру - это означает, что оба обеспечивают восходящую разработку CDD, и оба позволяют совместно использовать свои компоненты между приложениями с помощью инструментов и платформ, таких как Bit (Github).

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

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

React использует концепцию, известную как Virtual DOM (VDOM), где виртуальное представление пользовательского интерфейса хранится в памяти и синхронизируется с реальной DOM посредством процесса, называемого согласованием. Процесс согласования обнаружит разницу (различие) между виртуальным DOM (объектом в памяти, куда мы отправляем последние обновления пользовательского интерфейса) и реальной DOM (DOM, содержащим ранее визуализированный пользовательский интерфейс). Используя определенные эвристические алгоритмы, он решает, как обновить пользовательский интерфейс. Этот процесс, по большей части, быстрый, надежный и чрезвычайно реактивный. Каламбур предназначен 😄.

Для этого React объединяет определенный объем служебного кода, который будет запускаться в JS-движке браузера для отслеживания и обновления DOM на основе различных действий пользователя.

Компилятор Svelte

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

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

Где Svelte силен

Давайте выясним, какие основные преимущества мы можем получить, используя Svelte.

1. Время сборки невероятно быстро по сравнению с React или даже другими фреймворками. Секретом здесь может быть использование накопительного плагина в качестве сборщика.
2. Размер пакета меньше и крошечный при сжатии с помощью gzip по сравнению с React, и это огромный плюс. Даже с приложением корзины покупок, которое я создал, начальное время загрузки и продолжительность рендеринга пользовательского интерфейса чрезвычайно малы, только добавленные мною короткие изображения занимают некоторое время :).
3. Привязка классов и переменных относительно проста, и при привязке классов не требуется настраиваемая логика.
4. Использование CSS <style> внутри самого компонента позволяет гибко стилизовать.
5. Легче понять и начать работу по сравнению с другими фреймворками, поскольку значительная часть Svelte - это простой JavaScript, HTML и CSS.
6. Более простая реализация хранилища по сравнению с контекстным API React, предоставленный контекстный API предоставляет больше функций, а Svelte может быть достаточно простым для распространенных сценариев.

Где Svelte отстает

Давайте выясним, где у Svelte есть свои недостатки.

1. Svelte не будет прислушиваться к обновлениям ссылок и мутациям массивов, что является обломом, и разработчикам необходимо внимательно следить за этим и убедиться, что массивы переназначены, чтобы пользовательский интерфейс был обновлен.
2. Стиль использования для событий DOM также может раздражать, поскольку нам нужно следовать определенному синтаксису Svelte вместо использования предопределенного синтаксиса JS. Невозможно напрямую использовать onClick, как в React, вместо этого необходимо использовать специальный синтаксис, такой как on:click.
3. Svelte - это новый и молодой фреймворк с минимальной поддержкой сообщества, поэтому он не поддерживает широкий спектр плагинов и интеграций, которые могут потребоваться для тяжелого производственного приложения. Здесь React - сильный соперник.
4. Никаких дополнительных улучшений. Ex-React Suspense активно контролирует ваш код и то, как он работает, и пытается оптимизировать, когда DOM обновляется, а иногда даже обеспечивает автоматическую загрузку счетчиков при ожидании данных. Этих дополнительных функций и постоянных улучшений в Svelte относительно мало.
5. Некоторые разработчики могут не предпочесть использовать специальные синтаксисы, такие как #if и #each в своих шаблонах, и вместо этого захотят использовать простой JavaScript, который позволяет React. Это может зависеть от личных предпочтений.

Заключение

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

Svelte лучше реагирует или наоборот?

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

Итак, какой фреймворк вы должны использовать для своего следующего приложения?

Взвешивая плюсы и минусы, на мой взгляд, если вы создаете небольшое приложение, например, простое приложение электронной коммерции для своего стартапа, я бы порекомендовал Svelte. Если у вас есть хорошее знание JS, HTML и CSS, вам будет легче освоить Svelte. Вы также можете создавать мощные, быстрые и легкие приложения с помощью Svelte.

Для огромных производственных приложений, требующих нескольких интеграций и определенных плагинов, возможно, React все еще может быть подходящим вариантом. С другой стороны, подобно тому, как React предоставляет Next.js, Svelte также предоставляет свою готовую к работе структуру одностраничных приложений под названием Sapper, на которую, возможно, стоит обратить внимание.

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

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

Учить больше