В моей предыдущей статье я попытался объяснить, почему я считаю Hyperapp жизнеспособной альтернативой React или Vue и почему мне было легче начать с ним. Многие люди критиковали эту статью, поскольку она была самоуверенной и не давала другим фреймворкам должного шанса проявить себя. Итак, в этой статье я попытаюсь сравнить эти три фреймворка как можно более объективно, предоставив несколько минимальных примеров, демонстрирующих их возможности.
Печально известный встречный пример
Счетчик, вероятно, является одним из наиболее часто используемых примеров в реактивном программировании, и его очень просто понять:
- У вас должна быть переменная, чтобы отслеживать
count
счетчика. - Вам нужны два метода для увеличения и уменьшения переменной
count
. - Вам нужен способ визуализировать указанную переменную
count
и представить ее пользователю. - Вам нужны две кнопки, подключенные к вашим двум методам, чтобы изменять переменную
count
, когда пользователь взаимодействует с ними.
Вот вышеупомянутая реализация во всех трех фреймворках:
Здесь, вероятно, довольно много того, что нужно сделать, особенно если вы не знакомы с одним или несколькими из них, поэтому давайте разберем код поэтапно:
- У всех трех фреймворков есть несколько
import
операторов вверху. - React предпочитает объектно-ориентированную парадигму, создавая
class
для компонентаCounter
. Vue следует аналогичному шаблону, создавая новый экземпляр классаVue
и передавая ему информацию. Наконец, Hyperapp придерживается функциональной парадигмы, полностью отделяя друг от другаview
,state
иactions
. - Что касается переменной
count
, React создает ее экземпляр внутри конструктора компонента, а Vue и Hyperapp просто устанавливают свойство в своихdata
иstate
соответственно. - Забегая вперед, можно заметить, что React и Vue имеют очень похожие методы взаимодействия с переменной
count
. React использует методsetState
, унаследованный отReact.Component
, для изменения своего состояния, а Vue напрямую изменяетthis.count
. Hyperapp имеет свои методы, написанные с использованием синтаксиса толстой стрелки ES6, и, насколько я могу судить, это единственная структура, которая предпочитает этот синтаксис из-за того, что React и Vue должны использоватьthis
внутри своих методов. С другой стороны, методы Hyperapp требуют состояния в качестве аргумента, а это означает, что их можно повторно использовать в другом контексте. - Рендеринг во всех трех фреймворках практически одинаков. Единственные незначительные отличия заключаются в том, что Vue требуется функция
h
для передачи рендереру, тот факт, что Hyperapp используетonclick
вместоonClick
, и способ обращения к переменнойcount
в зависимости от способа реализации состояния в каждой структуре. - Наконец, все три каркаса монтируются к элементу
#app
. Каждый фреймворк имеет немного другой синтаксис, причем Vue является наиболее простым и обеспечивает максимальную гибкость за счет работы с селектором элемента вместо элемента.
Контрпример вердикта
Сравнивая все три фреймворка бок о бок, Hyperapp требуется наименьшее количество строк кода для реализации счетчика, и это единственный фреймворк, который подходит для функционального подхода. Однако код Vue кажется немного короче по абсолютной длине, а установка селектора элементов - отличное дополнение. Код React кажется самым подробным, но это не значит, что код не так прост для понимания.
Работа с асинхронным кодом
Скорее всего, вам придется иметь дело с асинхронным кодом. Одна из наиболее распространенных асинхронных операций - это отправка запросов к API. Для целей этого примера я буду использовать API-интерфейс заполнителя с некоторыми фиктивными данными и визуализировать список сообщений. Краткое изложение того, что необходимо сделать, следующее:
- Сохраните массив
posts
в состоянии. - Используйте метод для вызова
fetch()
с правильным URL-адресом, ожидания данных, преобразования в JSON и, наконец, обновления переменнойposts
полученными данными. - Визуализируйте кнопку, которая будет вызывать метод получения сообщений.
- Визуализируйте ключевой список
posts
.
Давайте разберем приведенный выше код и сравним три фреймворка:
- Как и в приведенном выше примере счетчика, сохранение состояния, рендеринг представления и установка очень похожи во всех трех фреймворках. Отличия те же, что обсуждались выше.
- Получение данных с помощью
fetch()
довольно просто и работает должным образом во всех трех средах. Однако ключевое отличие здесь в том, что Hyperapp обрабатывает асинхронные действия немного иначе, чем два других. Вместо изменения состояния непосредственно внутри асинхронного действия действие вызовет другое синхронное действие, когда данные будут получены и преобразованы в JSON. Это делает ядро более функциональным и его легче разбить на более мелкие и потенциально повторно используемые блоки, а также избежать некоторых проблем с вложением обратных вызовов, которые могут возникнуть. - Что касается длины кода, Hyperapp по-прежнему требуется наименьшее количество строк кода для достижения того же результата, но код Vue кажется немного менее подробным и имеет наименьшую абсолютную длину в символах.
Вердикт по асинхронному коду
Асинхронные операции довольно просты, независимо от того, какой фреймворк вы выберете. Hyperapp может заставить вас пойти по пути написания функционального и более модульного кода при работе с асинхронными действиями, но две другие платформы определенно могут это сделать и предложить вам больший выбор в этом отношении.
Компонент элемента списка дел
Вероятно, самый известный пример реактивного программирования, To-Do List был реализован с использованием практически всех существующих фреймворков. Я не собираюсь реализовывать здесь все, просто компонент без состояния, чтобы продемонстрировать, как все три фреймворка могут помочь в создании небольших многократно используемых строительных блоков для ваших веб-приложений.
На изображении выше показан один метод для каждого фреймворка и дополнительный для React. Вот что мы замечаем, читая все четыре из них:
- React - самый гибкий с точки зрения шаблонов кодирования. Он поддерживает функциональные компоненты, а также компоненты классов. И он также поддерживает компонент Hyperapp, который вы видите в правом нижнем углу, прямо из коробки, никаких изменений не требуется.
- Hyperapp также поддерживает функциональную реализацию компонента React, а это означает, что между ними есть много места для экспериментов.
- Vue идет последним здесь, имея достаточно странный синтаксис, который не сразу понятен даже тем, кто имеет опыт работы с двумя другими.
- Что касается длины, все образцы очень похожи по длине, при этом React немного более подробен в некоторых подходах.
Вердикт по пункту списка дел
К Vue нужно немного привыкнуть, поскольку его шаблоны немного отличаются от двух других фреймворков. React чрезвычайно гибок, поддерживает несколько различных подходов к созданию компонентов, в то время как Hyperapp сохраняет все просто и обеспечивает совместимость с React, если вы хотите в какой-то момент переключиться.
Сравнение методов жизненного цикла
Еще одно важное соображение - это то, на какие события жизненного цикла компонентов каждая структура позволяет вам подписаться и обрабатывать в соответствии с вашими потребностями. Вот таблица, которую я создал из справочника API каждого из них:
- Vue имеет наибольшее количество хуков жизненного цикла, предлагая возможность обрабатывать все, что происходит до или после того, как событие жизненного цикла сработало. Это может пригодиться для управления более сложными компонентами.
- Хуки жизненного цикла React и Hyperapp очень похожи: React объединяет события
unmount
иdestroy
вместе, а Hyperapp объединяет событияcreate
иmount
как одно. Оба предлагают приличный контроль при обработке событий жизненного цикла. - Vue вообще не обрабатывает
unmount
(насколько я понимаю), вместо этого полагаясь на событиеdestroy
, которое сработает позже в жизненном цикле компонента. React не обрабатывает событиеdestroy
, вместо этого обрабатывает только событиеunmount
. Наконец, Hyperapp не обрабатывает событиеcreate
, полагаясь только на событиеmount
. В зависимости от ваших потребностей и опыта, об этих различиях может быть важно помнить при проектировании с учетом событий жизненного цикла компонента.
Вердикт по сравнению методов жизненного цикла
В целом, крючки жизненного цикла предусмотрены в каждой структуре, и они помогают вам справляться со многими вещами в течение жизненного цикла компонента. Все три фреймворка предлагают хуки для всех событий своего жизненного цикла с небольшими различиями между ними, которые могут возникать из-за основных различий в реализации и подходах. Vue, безусловно, на шаг впереди, предлагая более детальную обработку событий, позволяя обрабатывать события жизненного цикла до или после их запуска.
Сравнение производительности
Помимо простоты использования и методов кодирования, производительность также является одним из ключевых факторов для большинства разработчиков, особенно при работе с более сложными приложениями. Js-framework-benchmark - отличный ресурс для сравнения фреймворков, поэтому давайте посмотрим, что говорят цифры для каждого набора тестов:
- Операции без ключа выполняются намного быстрее по сравнению с операциями с ключом во всех трех фреймворках.
- React без ключа является наиболее производительным из всех шести вариантов и демонстрирует впечатляющую производительность во всех тестах.
- Keyed Vue имеет лишь небольшое преимущество перед React с ключом, в то время как Vue без ключа значительно менее эффективен, чем React без ключа.
- Vue и Hyperapp, похоже, испытывают некоторые проблемы с тестом частичного обновления, в то время как React кажется хорошо оптимизированным для этой конкретной операции по сравнению.
- Hyperapp - самый легкий из трех фреймворков, в то время как React и Vue имеют очень незначительную разницу в размерах.
- Hyperapp имеет более быстрое время загрузки, что определенно связано с его крошечным размером и минималистичным API.
- Vue превосходит React с очень небольшим отрывом по времени запуска.
- Hyperapp - наименее ресурсоемкий из трех, требующий меньше памяти для любой операции по сравнению с двумя другими.
- Потребление ресурсов не очень велико по всем направлениям, и все три фреймворка должны работать одинаково на современном оборудовании.
Вердикт сравнения производительности
Если производительность является проблемой, вам следует подумать, над каким приложением вы работаете и каковы ваши потребности. Кажется, что Vue и React лучше всего подходят для более сложных приложений, в то время как Hyperapp лучше подходит для небольших приложений с меньшим объемом данных для обработки и приложений, которые требуют действительно быстрого запуска или должны работать на оборудовании более низкого уровня.
Однако имейте в виду, что эти тесты далеко не репрезентативны для среднего варианта использования, поэтому вы можете увидеть совсем другие результаты в реальном сценарии.
Дополнительные замечания
Сравнивая React, Vue и Hyperapp, может показаться, что сравнивать яблоки и апельсины во многих отношениях. Есть некоторые дополнительные соображения относительно этих фреймворков, которые могут помочь вам выбрать один из двух:
- React позволяет обойти проблему того, что смежные элементы JSX должны быть заключены в родительский элемент, путем введения фрагментов, элементов, которые позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM.
- React также предоставляет вам компоненты более высокого порядка, в то время как Vue предоставляет вам миксины для повторного использования функций компонентов.
- Vue позволяет лучше разделить проблемы, разделяя структуру и функциональность с помощью шаблонов.
- Hyperapp выглядит как API более низкого уровня по сравнению с двумя другими, а его код намного короче, что обеспечивает большую гибкость, если вы хотите настроить его и изучить, как он работает.
Заключение
Думаю, если вы дочитали до этого места, то уже знаете, какой инструмент лучше подходит для ваших нужд. В конце концов, это было не обсуждение того, какой из них лучше, а скорее обсуждение того, какой из них лучше подходит для каждой ситуации. Подводя итог:
- React - очень мощный инструмент, у него есть большое сообщество разработчиков, и он, вероятно, поможет вам получить работу. Вступить в него не так уж и сложно, но на то, чтобы овладеть им, определенно потребуется много времени. Тем не менее, это здорово во всех отношениях и стоит вашего времени.
- Vue может показаться немного странным, если в прошлом вы использовали другой фреймворк Javascript, но он также является очень интересным инструментом. Это жизнеспособная альтернатива React, и, возможно, стоит изучить, если React - не ваша чашка чая. В него встроено несколько интересных функций, и его сообщество растет, возможно, даже быстрее, чем у React.
- Наконец, Hyperapp - это классная небольшая платформа для небольших проектов и отличное место для начинающих. Он предоставляет меньше инструментов для работы, чем React или Vue, но может помочь вам быстро создать прототип и понять многие основы. Большая часть кода, который вы пишете для него, совместим с двумя другими фреймворками либо из коробки, либо с небольшими изменениями, поэтому вы можете переключать фреймворки, как только почувствуете себя уверенно в одном из других.
Если вам понравилась эта статья и приложенные к ней усилия, не забудьте пару раз хлопнуть в ладоши и поделиться ею со всеми своими друзьями в социальных сетях!