Представьте, что вы обреченно листаете Facebook, просматриваете новости на сайте New York Times или слушаете музыку на Spotify. Как оказалось, все эти сайты используют либо React, либо Svelte, а также многие другие популярные сайты. Как видите, React и Svelte — это очень распространенные библиотеки (или фреймворки, в зависимости от того, как вы их определяете). Для многих разработчиков, пытающихся спланировать свой следующий веб-сайт, возникает вопрос: «Что я должен использовать для создания интерфейса моего приложения?». Эта статья призвана ответить на этот вопрос применительно к React и Svelte. С этим давайте приступим к сравнению.
Кривая обучения
React
Давайте начнем с React. На освоение React может потребоваться некоторое время, хотя обычно его не очень сложно изучить. Самое сложное в React — это то, что он использует декларативную парадигму, в отличие от JavaScript, который обычно является императивным. Разница, по сути, заключается в следующем: в императивном JavaScript вы манипулируете DOM для представления данных с помощью собственного кода, в то время как в React вы просто обновляете данные и сообщаете React, какая часть данных куда идет, а React автоматически обновляет DOM. Другой более общий способ объяснить это — при императивном кодировании вы указываете, как обновлять данные, в то время как при декларативном кодировании вы указываете только данные.
Есть и другие моменты, к которым нужно привыкнуть, но в целом их легко освоить. Во-первых, вместо HTML вам придется использовать JSX. JSX — это как JavaScript и HTML вместе взятые, и именно он позволяет вам представлять данные с помощью декларативной разметки. Например, здесь будет создан заголовок, содержащий любую строку JavaScript date:
<h1>{date}</h1>
Как видите, это HTML, улучшенный с помощью JavaScript.
Наконец, вам придется потратить некоторое время на изучение всех хуков React (useState(), useEffect() и т.д.). Однако это не должно занять много времени.
Svelte
Освоение Svelte может занять немного больше времени. Во-первых, вам все равно придется привыкать к написанию декларативного кода. В этом отношении Svelte очень похож на React, поскольку они оба являются декларативными (большинство других современных библиотек пользовательского интерфейса также делают это, включая Vue и Angular). Однако есть некоторые различия в синтаксисе, которые могут сделать Svelte более сложным для изучения, чем React. В отличие от React, который использует JSX, Svelte имеет свой собственный синтаксис для компонентов. Вместо того, чтобы определяться внутри функций (или классов), каждый компонент Svelte имеет свой собственный файл .svelte. Такая конструкция компонентов известна как SFC, или однофайловые компоненты. Преимуществом использования SFC является большая гибкость синтаксиса, которую использует Svelte. Гибкость синтаксиса помогает Svelte в некоторых других областях, но она также усложняет изучение Svelte. Чтобы показать вам, вот пример компонента Svelte:
<script>
const example = "123";
</script>
<h1>{test}</h1>
Как вы видите, тег <script> содержит весь JavaScript компонента. Сюда входят данные, импорт и вся логика. Тем не менее, внутри разметки все еще нужны такие вещи, как условия. В отличие от JSX, где вы просто вставляете функцию JavaScript, Svelte имеет свой собственный синтаксис для условий и циклов. Именно здесь может возникнуть небольшая сложность в освоении. Например, если вы пытаетесь условно добавить разметку, вам придется использовать #{if boolean}.
{#if boolean}
<h1>boolean is true</h1>
{/if}
Для циклов нужно сделать нечто подобное. Кроме того, Svelte более многофункционален, что полезно, но увеличивает время, необходимое для изучения всех функций. Например, Svelte поддерживает функцию переключения значений. Одно из мест, где Svelte лучше в плане изучения состояния, поскольку Svelte не требует использования usestate(). Вместо этого вы можете просто переназначить переменную в сценарии компонента, и компонент автоматически обновится с новым значением переменной.
Резюме
Обе библиотеки требуют, чтобы вы научились писать декларативный код, но React занимает первое место, так как больше использует родной JavaScript.
Победитель: React
Краткость синтаксиса
React
Синтаксис React не слишком многословен, но и не лаконичен. Если вы используете компоненты классов, он будет гораздо более многословным. Однако здесь мы сосредоточимся на использовании хуков и функциональных компонентов. Самые большие элементы, которые увеличивают объем кода помимо базового HTML, — это управление состоянием (вам нужно использовать useState() и setState()), а также то, как работают условия и циклы. Однако React все же менее многословен, чем некоторые фреймворки, так как он убирает большинство ненужных шаблонов. Например, здесь у нас есть простой компонент списка дел. Этот компонент включает добавление пунктов списка дел с помощью текстового ввода с клавишей ввода или кнопки, а затем удаление пунктов списка дел с помощью кнопки X рядом с ними.
function TodoList() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
return (
<div>
<ol>
{todos.map((todo) => (
<li key={todo}>
{todo}
<button onClick={() => setTodos(todos.filter((td) => td !== todo))}>
X
</button>
</li>
))}
</ol>
<form
onSubmit={(e) => {
setTodos(todos.concat([newTodo]));
setNewTodo("");
e.preventDefault();
}}
>
<input
type="text"
value={newTodo}
onChange={(e) => {
setNewTodo(e.target.value);
}}
/>
<button type="submit">Add Todo</button>
</form>
</div>
);
}
Как вы можете видеть, его длина составляет 34 строки. Для сравнения мы создадим функционально идентичный пример списка дел в Svelte.
Svelte
Многие из тех же причин, по которым Svelte проиграл в разделе «Кривая обучения», дают ему преимущество здесь. Условия и циклы намного лаконичнее, а управление состояниями намного проще. Кроме того, Svelte поддерживает двустороннее связывание, что означает, что входное значение может быть связано с newTodo более просто. Благодаря этим особенностям, Svelte занимает лидирующую позицию среди компонентов списка дел — всего 25 строк.
<script>
let todos = ["test","test2"];
let newTodo = ""
</script>
<ol>
{#each todos as todo,index}
<li>
{todo}
<button on:click={()=>todos = todos.filter((td)=> td !== todo)}>
X
</button>
</li>
{/each}
</ol>
<form on:submit={(e)=>{
todos.push(newTodo)
todos = todos
newTodo = ""
e.preventDefault()
}}>
<input type="text" bind:value={newTodo}/>
<button type="submit">
Add Todo
</button>
</form>
Очевидно, что это не очень большая разница, но она может увеличиться, когда вы создаете большое приложение.
Резюме
Уникальные возможности Svelte, такие как использование {#if} для условий, позволяют ему лидировать здесь. React более лаконичен, но он все еще ограничен тем, что должен быть реализован на обычном JavaScript (помимо компиляции JSX). Компонент списка дел Svelte состоял всего из 25 строк, по сравнению с 34 строками для того же компонента, реализованного в React.
Победитель: Svelte
Производительность
React
React — не самая оптимизированная библиотека для создания интерфейсов. Она очень тяжелая, 42 Кб в минимизированном и gzipped формате, и может быть медленной при рендеринге. Тем не менее, есть некоторые решения этой проблемы. Основным решением является Preact, которая представляет собой совместимую с React библиотеку, размер которой составляет всего 4 кб в распакованном и gzipped виде. Preact также включает такие функции, как возможность использовать родные атрибуты HTML в JSX вместо версии JSX. Существуют также такие библиотеки, как Solid и Inferno, которые различаются по совместимости с React и производительности, но являются хорошими альтернативами для рассмотрения.
Svelte
Svelte уникальна тем, что вместо предоставления API времени выполнения, с которым вы непосредственно взаимодействуете, она запускает ваш код Svelte через компилятор. Хотя React технически также делает это, все, что делает React — это преобразовывает теги JSX в вызовы функций JSX. В отличие от этого, код Svelte полностью преобразуется в процессе компиляции. Это означает, что ваш сайт обычно легкий и быстрый, поскольку он избегает накладных расходов на высокоуровневые функции в библиотеке времени выполнения. Однако в больших приложениях ваш скомпилированный код может стать больше, хотя с разделением кода это обычно не является большой проблемой.
Резюме
Хотя вы можете сделать React-приложения быстрее с помощью такого инструмента, как Preact, это не встроенный инструмент, поэтому Svelte побеждает в этой категории. Использование в Svelte оптимизирующего компилятора, который устраняет необходимость в большом времени выполнения, делает Svelte чрезвычайно быстрым.
Победитель: Svelte
Экосистема
React
React имеет самую большую экосистему из всех библиотек пользовательского интерфейса. Фактически, при поиске react на NPM появляется более 200 тысяч пакетов. Сюда входит все: от библиотек компонентов до контейнеров состояний. Кроме того, компания Meta создала и развивает свою собственную экосистему вокруг React.
Svelte
Экосистема Svelte намного меньше, но быстро растет. В настоящее время поиск по Svelte дает около 5 000 пакетов. Однако следует отметить, что Svelte включает в себя такие инструменты, как управление состояниями, поэтому многие инструменты экосистемы не нужны.
Резюме
В конечном итоге, в этой категории с большим отрывом побеждает React. Хотя экосистема Svelte быстро растет, она все еще не приблизилась к React.
Победитель: React
Заключение
Как вы можете видеть, это 2-2, так что вы можете выбрать любой из них. Если вы новичок и хотите что-то более простое в освоении и с более обширной экосистемой, выбирайте React. В противном случае, если вам нужно что-то, что быстро создается и быстро работает, выбирайте Svelte. Оба варианта — отличный выбор. Спасибо, что прочитали, и не забудьте подписаться на рассылку здесь.