По сравнению с Python / Django

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

  • Нет виртуального DOM
  • Нет времени выполнения
  • Уникальная «реактивность»

Нет svelte.js для импорта - вместо этого он компилирует пользовательский код в простой JavaScript. Это делает Svelte быстрее ¹, ², чем два других, и его легче интегрировать в существующий проект, так как он практически не имеет накладных расходов (наименьший размер пакета ² согласно сравнению фреймворков RealWorld в 2020 году).

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

В прошлом месяце Svelte получил долгожданную поддержку TypeScript.

Тем не менее, что касается инфраструктуры, она все еще на один шаг отстает от React и Vue (например, подсветка синтаксиса в основных библиотеках / редакторах, инструменты отладки, количество сторонних библиотек и т. Д.).

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

1. Переменные

Наиболее часто используемая функция системы шаблонов - подстановка переменных - очень похожа во всех трех фреймворках:

2. Условные выражения

Вот как выглядит простое условие:

React ³ не имеет языка шаблонов как такового по замыслу. Он полагается на собственные выражения JavaScript (в данном конкретном случае логическое И) для построения HTML из кусочков и кусочков. Удобство связано с использованием JSX, расширения JavaScript, которое позволяет нам обращаться с HTML-тегами как с первоклассными гражданами.

Vue.js ⁴ имеет систему шаблонов, которая живет в атрибутах тегов (например, v-if), унаследованных от Angular.

Язык шаблонов Svelte ⁵ более читабелен и напоминает язык шаблонов Django ⁶. Наличие двух разных типов скобок - открывающей {# } и закрывающей {/ } - выглядит более загадочно, чем один тип скобки {% %} в Django, но требует меньшего количества нажатий клавиш, но сохраняет удобочитаемость на высоком уровне.

Следующая инструкция if-else:

В React это наиболее естественно выражается с помощью тернарного оператора. Во Vue логика снова заключается в атрибутах, и на этом этапе уже становится менее очевидным, какой v-if должен соответствовать какому v-else. Svelte вводит третий вид фигурных скобок - «промежуточные», с двоеточием.

Следующее утверждение - if-elif-else. Использование вложенных тернарных операторов в React обычно считается плохой практикой, поэтому вот пример с немедленно вызываемым функциональным выражением (IIFE). В Vue и Svelte синтаксис соответствует операторам if и if-else:

Тем не менее, этот код React слишком сложен для переваривания и приведен здесь только для полноты. Как было предложено u / sephg в комментариях, несмотря на то, что trenary оператор обычно не одобряется, при использовании с правильным форматированием он может создавать более читаемый код, чем IIFE:

Когда условия или предложения становятся длиннее, как вложенные тренарные операторы, так и IIFE становятся слишком загроможденными. Непосредственная альтернатива - перемещение условных операторов из шаблона в выделенную переменную, именованную функцию или отдельный компонент - является контрпримером разделения кода и шаблонов, которым так увлечена система шаблонов Django (это также яблоко раздора, благодаря которому появились шаблоны jinja2).

Существуют сторонние компоненты для React, которые предоставляют теги If / Else, Choose / When и т. Д. (Например, jsx-control-statement), но они имеют довольно сильные ограничения: отсутствие короткого замыкания ( все ветки оцениваются независимо от того, что), плохая подсветка синтаксиса и т. д.

Если этих четырех способов написания условных выражений React недостаточно, их восемь в этом сообщении блога ⁸ за 2018 г. или из девяти в этом сообщении блога ⁹ за 2020 г. Наиболее заметными из них являются компоненты высшего порядка ( Docs), имя React для декораторов Python.

Также стоит отметить, что шаблоны React и Vue.js ориентированы на взлом HTML в «естественных» местах, таких как теги. Если вы примените принцип DRY к приведенному выше примеру, все довольно быстро пойдет на убыль:

... в то время как Svelte не заботится о границах, за исключением того, что он не позволяет использовать условные выражения внутри тега (с чем Django прекрасно справляется), например

Предлагаемый обходной путь - использовать js внутри значения атрибута (в стиле React):

Если выражение оценивается как null или undefined, атрибут вообще не записывается в HTML (используйте <input readonly={x && ‘readonly’}> для логических свойств).

3. Петли

За исключением случая React, где используется map(), синтаксис цикла согласуется с условными выражениями:

Все три фреймворка предоставляют автоматический счетчик итераций:

Vue имеет специальный синтаксис для перебора объектов:

А в Svelte есть дополнительное предложение для пустых последовательностей:

Если ожидается, что последовательность записей, сгенерированная в цикле, впоследствии будет изменена, все сравниваемые фреймворки предоставляют средства (React предупреждает, Vue требует, Svelte не возражает) для ввода элементов с целью правильного отслеживания их эволюции:

В Svelte обе эти модификации можно комбинировать с деструктуризацией:

4. Привязка данных

С атрибутами тегов во всех трех фреймворках происходит много волшебства. Я упомяну только самое необходимое: те, которые связывают переменные JavaScript с состоянием виджета DOM.

Есть два способа привязать переменную к виджету: односторонняя привязка и двусторонняя привязка.

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

Двусторонняя привязка более удобна: и переменная, и DOM «чувствуют» изменения друг друга. Например, это позволяет нам объединить пару элементов управления, отображающих одно и то же значение по-разному, например ползунок и поле ввода.

Вот краткое описание синтаксиса привязки переменных:

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

5. Компонентная файловая структура

У фреймворков есть разные способы организации кода в файлах с компонентами. В React код JavaScript переплетается с HTML, тогда как CSS находится в отдельном файле. В Vue.js все три типа кода объединены в однофайловый компонент .vue. Svelte имеет похожую структуру; просто порядок блоков другой.

На самом деле порядок блоков во Vue и Svelte произвольный. Но при работе в команде удобно придерживаться порядка и иметь разумные настройки по умолчанию. Такой порядок блоков Vue рекомендован Руководством по стилю Vue. Этот порядок Svelte - от официального плагина Svelte prettifier, но также широко используется альтернативный порядок javascript-html-css.

Преимущество наличия стилей в одном файле заключается в том, что CSS органично инкапсулирован, так что он применяется только к текущему компоненту (vue, svelte). В React это также возможно - либо с модулями CSS, либо с любыми сторонними библиотеками CSS-in-js (для начала вот список из 62 пакетов на GitHub).

6. Частичное обновление страницы

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

В React и Vue для частичного обновления страницы вы разбиваете шаблон на компоненты, распределяете между ними свои переменные (также называемые состоянием компонентов), а затем, когда переменная изменяется, весь компонент повторно отображается. Компоненты могут содержать другие компоненты, и существуют определенные правила, которые описывают, что должно произойти с родительским или дочерним компонентом, чтобы вызвать повторный рендеринг текущего.

В Svelte компоненты тоже существуют, но они служат для другой цели (повторное использование кода, управление потоками данных и т. Д.). Базовый блок повторного рендеринга страницы - это выражение в фигурных скобках (переменная, условие, цикл и т. Д.). Всякий раз, когда используется переменная, используемая в нем, блок перерисовывается, а остальная часть страницы остается нетронутой! ("Пример")

7. Пример приложения: связанные выборки

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

Вот как это можно сделать в React (попробуй онлайн), Vue (попробуй) и Svelte (попробуй):

Полный исходный код этих проектов доступен на GitHub ¹¹.

Сборка проекта с инструментами по умолчанию (React ¹², Vue / cli ¹³, Svelte ¹⁴) и настройками по умолчанию приводит к следующим размерам пакетов:

Разница в размере происходит из-за того, что у Svelte нет среды выполнения; он компилирует и объединяет только тот код, который был предоставлен пользователем.

Размер проекта hello world (например, этот) может быть плохой оценкой того, до какого размера может вырасти реальный проект. Сравнение RealWorld 2019 и 2020 подтверждает, что то же самое и с более крупными приложениями.

Есть интересное обсуждение размера пакета Svelte: Да, но масштабируется ли он? ¹³ ».

8. Заключение

Все три фреймворка предоставляют удобный язык шаблонов, но по-разному: синтаксис React является наиболее гибким, поскольку он позволяет чередовать JavaScript и HTML любым мыслимым способом; Синтаксис Svelte наиболее читабелен; Vue.js - это золотое сечение между этими двумя.

Но, несмотря на очевидные различия, концептуально синтаксис шаблонов фреймворков очень похож. Основное отличие заключается в реактивности - как они реагируют на изменение состояния компонентов. Об этом есть отличное видео под названием Rethinking Reactivity ¹⁶ Рича Харриса, создателя Svelte.

Исправлена ​​ошибка? Идеи по улучшению? Отредактируйте статью в Google Документах.

Хочу поблагодарить Адама Фора и Пола Малого за то, что они сделали эту статью лучше.

использованная литература

[1] Проект js-framework-benchmark на Github
[2] RealWorld Сравнение интерфейсных фреймворков 2020 на среднем
[3] React Official Docs Условный рендеринг
[4] Руководство по Vue.js v2 Условный рендеринг
[5] Svelte Docs Синтаксис шаблона
[6] Документация по Django 3.0. Язык шаблонов Django
[7] Документация Jinja Документация по шаблонам
[8] Блог Эстебана Эрреры (28 февраля 2018 г.) 8 методов условного рендеринга в React
[9] Блог Робина Веруча (16 января 2020 г.) Условный рендеринг в React
[10] Мартин Фаулер, UML Distilled book, Ch.4, Sequence Diagrams, Loops, Conditionals and etc.
[11] Моя учетная запись Github, связанный выбор репозитория < br /> [12] Создание сайта приложения React в Facebook Начало работы
[13] Документы Vue CLI Создание проекта
[14] Блог Svelte Самый простой способ начать
[15] Страница Проблемы Svelte на GitHub Да, но масштабируется ли она? # 2546
[16] Рич Харрис, Переосмысление реактивности, выступление на YouTube