В моей предыдущей статье я попытался объяснить, почему я считаю 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, но может помочь вам быстро создать прототип и понять многие основы. Большая часть кода, который вы пишете для него, совместим с двумя другими фреймворками либо из коробки, либо с небольшими изменениями, поэтому вы можете переключать фреймворки, как только почувствуете себя уверенно в одном из других.

Если вам понравилась эта статья и приложенные к ней усилия, не забудьте пару раз хлопнуть в ладоши и поделиться ею со всеми своими друзьями в социальных сетях!