По сравнению с 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