Svelte или React: что лучше?

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

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

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

Учебник по React и Svelte

Прежде чем углубляться в детали, давайте рассмотрим краткий обзор обеих платформ.

React

React — это библиотека с открытым исходным кодом, разработанная и поддерживаемая Facebook и написанная в основном на JavaScript. Она была выпущена в 2013 году и с тех пор претерпела множество заметных изменений по мере развития экосистемы front-end. Она используется для разработки интерфейсов front-end для веб- и мобильных приложений. Сегодня сама экосистема React распространяется на другие фреймворки, построенные на ее основе, такие как Next.js и React Native.

Svelte

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

React и Svelte: сходства

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

React против Svelte

Мы сравним две платформы по следующим критериям:

• Синтаксис и кривая обучения
• Опыт разработчика
• Популярность, поддержка сообщества и документация
• Экосистема и инструменты/библиотеки
• Производительность

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

Синтаксис и кривая обучения: проще ли изучить Svelte, чем React?

Легкость изучения фреймворка зависит от его общего синтаксиса, его основ и чистого кода HTML, CSS и JavaScript.

Svelte

Любое приложение Svelte состоит из трех частей: шаблон HTML, раздел JavaScript и раздел CSS. Svelte навязывает этот шаблон разработчикам, но также предоставляет сокращенный способ написания кода. Однако этот шаблон похож на другие фреймворки, такие как Vue.js, Angular и (что самое важное) приложения vanilla JavaScript. Таким образом, легко начать писать код Svelte. Вот пример:

<script>
    let name='svelte'
</script>
    <h1>You're learning {name}!</h1>
<style>
    h1{
        text-decoration:underline;
    }
</style>

В разделе скрипта мы создаем переменную JavaScript и выводим ее в шаблон HTML. В конце концов, у нас есть раздел стиля, который будет управлять CSS для этой страницы.

На изображении показаны компоненты файла Svelte: HTML, CSS и JavaScript — все в одном файле .svelte.

Все файлы Svelte имеют расширение .svelte, название которого говорит само за себя.

React

В React вам нужно написать свой код на специальном языке расширения JavaScript, который называется JSX. Поэтому все файлы React имеют расширение .jsx. Шаблон HTML возвращается функцией JavaScript, и вся его логика находится внутри него. Вот тот же пример кода, что и раньше, но в синтаксисе React:

import React from 'react';
import './style.css';

export default function App() {
  const name = 'react';
  return (
    <div>
      <h1>You're learning {name}!</h1>
    </div>
);
}

Обратите внимание, что мы импортируем файл вверху. Здесь вы можете объявить CSS для своих шаблонов React: styles.css

h1 {
   text-decoration:underline;
}

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

Вердикт

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

Опыт разработчика

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

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

React

Вот простой код на React, который привязывает значение поля ввода к переменной и выводит его:

import React,{ useState } from 'react';

export default function App() {

  const [name,setName]=useState('')

  const handleChange=(e)=>setName(e.target.value)

  return (

    <>

      <input type="text" value={name} onChange={handleChange} />

      <h1>Name: {name}</h1>

    </>

);

}

Компонент App возвращает поле ввода и заголовок. Затем у нас есть переменная состояния, которая называется name, которая привязывается к полю ввода с помощью свойства value. Чтобы обновить эту переменную состояния при изменении поля ввода, мы запускаем функцию handleChange и обновляем nameпеременную состояния значением поля ввода. Вот результат:

Стройный

Теперь давайте напишем код на Svelte, который делает то же самое, что и выше:

<script>

let name='';

</script>

<input type="text" bind:value={name} />

<h1>Name: {name} </h1>

У нас есть переменная name, которую мы напрямую привязываем к полю ввода, а затем выводим ее под заголовком. Вот как это выглядит:

Вердикт

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

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

React против Svelte: популярность, поддержка сообщества и документация

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

React

Официальная библиотека React имеет 231 000 звезд и 47 200 форков. Если вы ищете вопросы и ответы с тегом React на Stack Overflow, вы получите более 700 000 результатов. Это также один из самых популярных веб-фреймворков согласно опросу разработчиков Stack Overflow 2022:

Рейтинг популярных веб-фреймворков по результатам опроса разработчиков Stack Overflow 2022.

Кроме того, он также оказался самым востребованным веб-фреймворком в опросе разработчиков Stack Overflow 2022:

Рейтинг самых востребованных фреймворков по результатам опроса разработчиков Stack Overflow 2022.

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

Svelte

Официальный репозиторий Svelte на GitHub имеет 80 500 звезд, но только 4 300 форков. Похоже, не так много людей пытались сделать форк и поиграться с ним. На Stack Overflow примерно 6 000 результатов для вопросов и ответов с тегом Svelte. У него небольшая, но развивающаяся экосистема, но самые важные пакеты и зависимости доступны и хорошо поддерживаются.

Интересно, что среди других веб-фреймворков у него было лучшее соотношение «любовь к ненависти» в категории «Любимые и ненавистные» фреймворков в опросе разработчиков Stack Overflow 2022:

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

Вердикт

Очевидно, что React имеет более мощную поддержку сообщества и гораздо более популярен, чем Svelte, что более или менее компенсирует отсутствие лучшей документации.

Инструменты и библиотеки

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

React

React в значительной степени опирается на сообщество разработчиков открытого исходного кода для дополнительных функций и возможностей. Поскольку он имеет надежную поддержку сообщества, существуют популярные инструменты и библиотеки, такие как React Router для маршрутизации, Redux, встроенный Context API для управления состоянием, библиотеки пользовательского интерфейса, такие как Material UI и React Bootstrap и т. д. Почти все популярные библиотеки имеют доступную библиотеку абстракций, специфичную для React.

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

Svelte

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

Вердикт

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

Производительность

Какая польза от фреймворка, если он не помогает вам создать быстрое и высокопроизводительное веб-приложение? Давайте посмотрим, как React сравнится со Svelte с точки зрения общей производительности.

React

Сам React поставляется в пакете 42,2 КБ, а также есть дополнительные библиотеки и сторонние пакеты, которые вы можете использовать в своем приложении. Внутри React использует нечто, называемое виртуальным DOM, для управления DOM в реальном времени. Сам виртуальный DOM является копией реального HTML DOM, который обновляет только требуемые узлы HTML в цикле рендеринга.

Svelte

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

Svelte использует прямую манипуляцию DOM. Он просматривает переменные в вашем коде, которые изменились, и обновляет сущности DOM, которые полагаются на эти переменные.

Вердикт

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

React или Svelte: что лучше?

Пришло время для окончательного вердикта. Но сначала подведем итоги:

Вы новичок, который хочет создать небольшой проект? Может быть, портфолио разработчика, блог-сайт или личный проект? Выбирайте Svelte. Если вы хотите разработать что-то более серьезное, но хотите сделать это быстрее, например, MVP для продукта, выбирайте Svelte. Вы сможете разработать быстрое приложение за короткое время без излишней инженерии или сложного шаблона.

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