Во время оценки нашей основной веб-платформы в сингапурской стартап-компании CXA Group , основанной на льготах для сотрудников, мы решили сместить направление с устаревшей существующей архитектуры и перестроить интерфейс с нуля. Одной из задач платформы является создание веб-приложения, которое хорошо работает в 12 целевых странах CXA Group по всей Азии.
Принимая во внимание жесткий срок, который мы установили для реализации проекта, я провел оценку ряда интерфейсных JavaScript-фреймворков. Возможность внести этот уровень изменений не часто появляется в крупных корпоративных проектах, поэтому мы постарались быть максимально тщательными в процессе оценки.
Принятие решения было на грани: с экспоненциальным ростом нашего бизнеса мы не могли допустить ошибок на этом пути. Мы также должны были принять во внимание тот факт, что никто из команды не имел значительного опыта ни в одной из структур, на которые мы смотрели.
Сужение поля
Кажется, что новые интерфейсные фреймворки публикуются каждый день, поэтому мы провели метаанализ, чтобы уменьшить диапазон фреймворков, которые мы рассматривали. Включая фреймворки, о которых мы слышали или рекомендовали нам, мы остались с Angular 2 (слышал о), Aurelia (слышал), Vue.js (рекомендация) и React (рекомендация).
Мы сравнили каждую основную структуру с перечнем ключевых требований, чтобы увидеть, как они ранжируются. Некоторые из требований были основаны на том, что мы знали, что нам понадобится для проекта, в то время как другие прогнозировали то, что мы хотели бы сделать.
гибкость
Наш выбранный фреймворк должен был бы представить ряд параметров конфигурации и быть относительно простым в настройке. Похоже, многое из этого сводится к философии архитектуры: принятие архитектурных решений от вашего имени или оставление их полностью открытыми.
Angular 2 существует в монолитном конце этого с каждым выбором (сервер состояний, маршрутизатор, обработчики) для вас. Преимущество этого заключается в том, что очень легко быстро приступить к работе, в то время как потенциальная стоимость состоит в том, что модули работают не так, как вам нужно, и некуда деваться.
React, Vue и Aurelia находятся на другом конце шкалы, предлагая возможность менять компоненты по мере необходимости. Aurelia и Vue имеют ключевое преимущество перед React с настраиваемыми шаблонами при их первоначальной настройке.
Как и Vue, сам React представляет лишь небольшую часть того, что вам нужно для создания чего-либо. Оттуда, много решений должны быть приняты, что, безусловно, устрашающе. За время, прошедшее с момента первого запуска React , были созданы различные шаблоны (включая React Boilerplate и Create React App ), чтобы упростить введение.
Для нашего тестового проекта React мы решили отказаться от любого конкретного шаблона и погрузиться прямо в него. Мы все еще установили несколько, хотя бы для справочного кода. Этот подход, конечно, был сложным, но мы многое узнали о каждом компоненте нашего стека React и чувствовали себя более уверенно с конечным результатом.
Вю и Аурелия выиграли этот раунд с их уменьшенной кривой обучения и модульными структурами. React получил частичную награду за гибкость, хотя первоначальная настройка более сложна.
Автономная поддержка
Благодаря таким API, как Service Workers , появилась возможность для веб-приложений работать без постоянного или стабильного подключения к Интернету. В нашей команде у нас еще не было большого опыта в этой области, и мы не углубились в него глубже, кроме как для подтверждения того, что все оцененные платформы предлагают автономную поддержку некоторого разнообразия.
Легкий вес
Размер байта кода, отправляемого клиенту, имеет большое значение для производительности браузера, как для пропускной способности, так и для времени процессора. При добавлении пользовательского кода и сторонних библиотек размер байта может только ухудшиться, поэтому важно начинать с малого. Целевой рынок CXA Group распространяется на страны, где пропускная способность выше, поэтому очень важно, чтобы мы поставляли нашим клиентам как можно меньше кода.
Вместо точных данных, отражающих производственные конфигурации, мы рассмотрели размеры базовой библиотеки, чтобы дать хотя бы некоторое представление о том, что нас ждет. Фактические размеры производства больше, чем показано здесь.
Разработчики Vue приложили немало усилий, чтобы сократить свои основные библиотеки до впечатляющих 23 КБ. React и Aurelia находятся где-то посередине (около 42 КБ и 64 КБ соответственно), в то время как Angular 2 остается тяжеловесом, выдвигая 143 КБ (включая RxJS для управления состоянием).
В практическом плане производственные сборки Vue, Aurelia и React находятся достаточно близко друг к другу, чтобы их можно было рассмотреть. Angular 2, опять же, торчит не в ту сторону.
Рендеринг сервера
Ранние рамки одностраничных приложений (SPA) следовали модели отправки всего кода клиенту. Это означает, что начальный рендеринг страницы оставлен для клиента, и, как прямой результат, начальная загрузка страницы будет медленной. Концепция серверных страниц в SPA накладывает нагрузку на сервер для первоначального рендеринга, позволяя загружать все остальное после этого рендеринга.
Vue и React добавляют рендеринг сервера с помощью плагинов. Angular 2 в настоящее время объединяет их универсальную функцию в ядро, хотя функциональность не соответствует тому, что предлагают Vue или React. В Aurelia рендеринг сервера помечен как функция в разработке, но ему не хватает времени для реализации, даже если у него есть другие способы повышения производительности .
зрелость
При выборе основы для сайта уровня предприятия очень важны широкая поддержка сообщества, стабильность и способность нанимать. Трудно предположить, будет ли какая-либо основа все еще поддерживаться через три года, но мы решили посмотреть на текущее состояние здоровья каждого из них, чтобы принять решение.
Изучение первых дат публичного выпуска фреймворков дает нам представление о том, насколько надежны они. Теоретически, по крайней мере, старые библиотеки должны иметь лучший набор функций и меньше значительных ошибок.
React легко выигрывает здесь, с первым публичным выпуском в марте 2013 года. Хотя Vue был первоначально выпущен в октябре 2015 года, он не набрал оборотов до версии 2, выпущенной в сентябре 2016 года. Aurelia — новичок, выходящий на версию 1.0 в августе 2016 года.
Angular 2 интересен: он значительно отличается от версии 1 и, для практических целей, вышел в свет в сентябре 2016 года.
Частью этого аспекта оценки было погружение в историю разработки каждой библиотеки после самих дат выпуска. Долгая, стабильная история разработки — даже в бета-версии — безусловно, вселяет уверенность.
Различные члены команды в течение некоторого времени следили за развитием рамок кандидатов, что дало нам хотя бы некоторое представление об общей стабильности каждого из них. Из всех рассмотренных нами фреймворков выделялась проблемная история разработки Angular 2 со значительными изменениями и неясными датами выпуска. Фреймворк добрался до финального релиза в конце, но он, конечно, был грязным на этом пути.
Последний, ключевой аспект зрелости, отраженный в вышесказанном, — это возможность нанимать опытных сотрудников. Учитывая ограниченный опыт нашей команды в оцененных нами средах и жесткие временные рамки, с которыми мы столкнулись, мы хотели нанять опытных разработчиков.
Найм с определенным опытом может быть ограничением, однако, это, безусловно, имеет значение для более крупных проектов, таких как наш. На этом этапе мы исключили Angular 2, так как он не выполнил слишком много наших предыдущих требований.
Что касается остальных фреймворков, мы сначала искали разные сайты вакансий и запускали отдельные объявления о вакансиях для каждой фреймворк. Мы не нашли объявлений о работе для Aurelia или Vue, а также не получили никаких заявлений. Для сравнения, мы нашли несколько предложений React и получили ряд качественных приложений.
Другие преимущества
Остальные функции в нашем списке — инструменты разработчика и поддержка модульного тестирования — предлагаются во всех рассмотренных нами фреймворках. Без надежных инструментов разработчика отладка практически невозможна, а модульное тестирование практически необходимо для приложений уровня предприятия, таких как наши.
Руки вверх
Никакая теория не может сравниться с практическим опытом. Имея это в виду, мы выбрали две среды, отвечающие большинству требований — Aurelia и React — и начали программировать параллельно. Не было веской причины опускать Vue на этом этапе; у нас просто не было достаточно времени, чтобы провести оценку.
Поставленная задача состояла в том, чтобы создать экраны аутентификации, соответствующие основным функциональным возможностям нашего существующего приложения: входу в систему, вызову API и установлению сеанса. Каждому из двух членов команды была назначена структура и дана календарная неделя, чтобы посмотреть, что они могут построить.
Демонстрация Aurelia была более полной, отчасти благодаря более простой процедуре настройки. Мы чувствовали, что лучше понимаем, что находится внутри нашего стека React, после того, как была выбрана каждая часть. Аурелия все еще выиграла руки для простоты начальной настройки.
Мы не смогли сделать какие-либо существенные выводы, основываясь только на практическом кодировании. Возможно, единственным сюрпризом было то, насколько похож этот код: во многом благодаря структурным изменениям, внесенным в ECMAScript 6, который используется обеими средами.
Результат
Наш выбор, в конце концов, был React; выбрал для его зрелости, поддержки сообщества и простоты найма выше всех других функций. Хотя React был явным победителем по нашим критериям, было замечательно видеть такое качество среди конкурирующих систем, на которые мы смотрели.
Vue и Aurelia оказались близкими конкурентами для следующего в очереди. Vue выходит немного впереди с более полным списком функций, но любой из них, вероятно, хорошо бы подошел, учитывая наши требования. Если бы у нас не было времени, найм был бы менее значительным, и мы бы расширили нашу практическую работу, чтобы включить Vue.
Angular 2 разочарован тем, что не выполнил большинство наших критериев отбора. При всех своих достоинствах это явно не для нас.
Выбрав React и приступив к созданию нашего проекта, мы вряд ли сможем провести подобную оценку в ближайшее время. Что касается вас, какие критерии вы бы добавили в наш список? Что мы упустили, что мы могли бы сделать лучше? Я с нетерпением жду ваших комментариев и предложений.
Эта статья была рецензирована Стюартом Митчеллом , Ральфом Мэйсоном и Вилданом Софтиком . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!