Интерфейсные веб-разработчики должны принимать несколько решений и выбирать из множества вариантов. Мы должны решить, какие инструменты использовать, какой язык программирования использовать и какую структуру CSS включить. Тем не менее, ни одно из этих решений не является столь же эффективным, как выбор фреймворка пользовательского интерфейса.

В последние годы диапазон вариантов фреймворка неуклонно расширялся, и регулярно появлялись новые интересные возможности. Однако с 2019 года «большая тройка» остается неизменной. Angular, React и Vue остаются всегда заметными. Однако внутри эти программы претерпели значительные изменения.

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

Angular — это полный интерфейсный фреймворк Google.

История

Angular начинался как преемник Angular.js, поэтому Google представил его как версию 2. Однако, по сути, он был полностью переписан, сохранив лишь несколько концепций и оригинальный брендинг.

В настоящее время Angular доступен в версии 14 (14.0). В то время как важные выпуски происходят примерно каждые шесть месяцев, Google обновляет структуру почти еженедельно. Обычно они поддерживают каждый основной выпуск в течение примерно 18 месяцев.

Основные характеристики

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

Кроме того, Angular использует универсальный рендеринг. Эта функция позволяет нам отображать Angular в браузере, на сервере или в мобильном приложении. Популярные фреймворки, такие как Ionic и NativeScript, полностью полагаются на эту функцию. Angular также поддерживает автоматическое разделение кода, которое большинство разработчиков сейчас считают скорее необходимостью, чем удобством.

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

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

Facebook разработал библиотеку React для создания пользовательских интерфейсов.

История

Когда Facebook понял, что подход, основанный только на JavaScript, дает значительные преимущества при разработке, он выпустил JSX — расширение синтаксиса для JavaScript — независимо от React. Сегодня JSX является стандартом де-факто, который понимают и поддерживают почти все инструменты на основе JS. В настоящее время React находится в версии 17 (17.0.2) и остается стабильной.

До версии 15.6.2 React использовал часто критикуемую лицензию BSD+Patents, что значительно мешало внедрению. Ситуация даже породила несколько других проектов, таких как Preact и Inferno.js, которые пытались быть совместимыми с API. С тех пор React перешел на более стандартную лицензию Массачусетского технологического института (MIT).

Основные характеристики

Основным преимуществом React всегда был его минимальный API, что делало его относительно простым в использовании. Под поверхностью его однонаправленный поток и гибкие области рендеринга позволили ему сохранить свое конкурентное преимущество.

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

Эта приобретенная гибкость окупается. React плавно отрисовывается как на сервере, так и на статических страницах (например, Gatsby) или с использованием уникальных потоковых компонентов (серверные компоненты). Его процесс гидратации поддерживает впечатляющую скорость при первоначальной загрузке даже самых интерактивных веб-приложений.

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

Facebook представил React, чтобы упростить разработку пользовательского интерфейса. Позже разработчики обнаружили, что его однонаправленная модель может распространяться на любой пользовательский интерфейс за пределами Интернета. Следовательно, React изучил несколько других направлений, включая поддержку собственных мобильных приложений и создание PDF-файлов.

Хотя React применим ко всем типам приложений, он превосходен, когда фокусируется на больших одностраничных приложениях (SPA).

Эван Ю представил Vue. Это легкий интерфейсный фреймворк.

История

Содействуя и используя Angular.js, Эван Ю искал гораздо более простой подход, который мог бы отображать динамические страницы со всеми удобствами и надежностью интерфейсной среды. В конце концов, он разработал свое решение — Vue.

Публичный прорыв Vue произошел, когда PHP-фреймворк Laravel принял Vue версии 2 в качестве внешнего интерфейса. В настоящее время Vue доступен в версии 3.2.31. Версия 3 стала его стандартной версией в начале 2022 года.

Однако переход с Vue 2 на Vue 3 непрост. Процесс обновления сравним с переходом с Python 2 на 3. Хотя в новейшей версии есть правильные улучшения, в ней возникают проблемы, связанные с экосистемой Vue и ее зависимостями.

Основные характеристики

Vue имеет много общих функций, которые делают React и Angular весьма привлекательными. Одной из популярных функций Angular является двусторонняя привязка данных. Однако, в то время как Angular достиг этого с помощью «зон» (представленных zone.js) или явно используя службу ChangeDetectionRef, Vue выполняет двустороннюю привязку данных неявно с помощью геттеров и сеттеров. Такой подход сохраняет производительность, в то время как все происходит более естественно.

В том же духе Vue представил однофайловые компоненты (SFC) с использованием определенного формата файлов (*.vue) в сочетании с тегами HTML для разделения файлов на три части. Одна часть — это элемент сценария для фактического кода JavaScript. Еще один элемент шаблона для указания того, что отображать. Третий — это элемент стиля, который включает любой CSS.

Эти однофайловые компоненты прекрасно сочетаются и образуют единое целое. Кроме того, SFC позволяет использовать JSX, например, для визуализации других компонентов, импортированных из других источников.

Наконец, Vue представил Composition API, чтобы обеспечить возможность повторного использования — например, в отношении жизненного цикла компонента — в процессе разработки. В некотором смысле это очень похоже на подход React к использованию хуков.

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

Vue оказывается чрезвычайно удобной золотой серединой для тех, кто находит Angular слишком экспансивным, а React слишком ограниченным. Он считает себя библиотекой, а не фреймворком. Таким образом, Vue идеально подходит для приложений среднего размера.

Все три фреймворка обеспечивают прочную основу для современных клиентских интерфейсов. Тем не менее их различия могут сделать один фреймворк более выгодным, чем его альтернативы.

Производительность

Мы должны учитывать некоторые показатели при оценке производительности. Например, размер пакета — размер файлов, создаваемых при использовании определенного фреймворка, — может быть очень информативным. Кроме того, начальное время загрузки измеряет первую отрисовку контента — время между инициализацией приложения и моментом, когда контент впервые становится видимым для конечного пользователя.

Эти показатели могут учитывать различные условия, включая размер приложения, скорость сети и тип устройства или производительность.

Один из лучших способов измерить скорость — использовать js-framework-benchmark. Стресс-тесты показывают, что Vue — самый быстрый из трех фреймворков, а Angular и React обеспечивают одинаковую производительность.

Тестирование метрик запуска снова показывает, что Vue является лучшим исполнителем. Однако два других фреймворка отличаются более существенно, чем в предыдущем тестировании. Производительность React выше, чем у Angular, как и ожидалось от легкого фреймворка.

Наконец, тест распределения памяти дает аналогичные результаты.

Судя по этим результатам, Vue является явным лидером во всех вопросах, требующих скорости. Однако тестирование не может учесть все факторы скорости, и сравнение небольших наборов данных может привести к другому выводу. Например, Angular и React могут оптимизировать размер пакета для небольших приложений.

Vue набирает очки с точки зрения производительности, а React занимает второе место.

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

Хотя простота использования полностью субъективна, тенденция требовать TypeScript и его новых концепций ставит Angular в проблемную ситуацию. Однако, если у команды есть опыт работы с надежной типизацией данных и структурированными платформами, такими как Java, C# или .NET, они могут счесть более продуктивным использование Angular, а не React или Vue.

Тем не менее, React остается самым простым в освоении. В конце концов, у него самый минималистичный API и повсюду используются концепции JavaScript. С другой стороны, Vue вводит пользовательские имена и концепции поверх HTML, известные как директивы, например, v-if, чтобы все работало. Потребность в документации о том, как работают эти пользовательские концепции Vue, ставит React на первое место.

Этот момент переходит к React, за которым следует Vue. Тем не менее, команды должны обсудить решения, чтобы решить, что лучше всего подходит для их ситуации.

Интеграции

Angular не нуждается во множестве интеграций, созданных сообществом. Команда Angular предоставляет почти все из коробки. Следовательно, сообщество чувствует себя гораздо менее склонным предлагать здесь большую интеграцию. В конце концов, это работа Angular, верно?

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

Поскольку мы можем использовать JSX где угодно (и Vue уже использует его), это похоже на решение, от которого выигрывают все. В остальном React использует стандартный JavaScript и не нуждается в какой-либо исключительной поддержке. Это также верно для Vue (вспомните SFC с его разделами) и Angular. Angular использует файлы HTML, но они также содержат пользовательские директивы, которые мы должны интегрировать в интегрированную среду разработки (IDE) или в процесс сборки.

Из-за легкости и удобства решения React получает преимущество, а два других находятся рядом с ним.

Документация

У React и Vue есть одно преимущество: их сообщества достаточно большие и активные. React, например, насчитывает более 1500 участников. Поэтому есть достаточно людей, которые помогут довести документацию до выдающегося уровня.

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

В то время как официальная документация Angular имеет правильную версию и точна, онлайн-ответы на часто задаваемые вопросы и руководства могут использовать более старые версии Angular (или даже Angular.js). Это несоответствие вызывает недоумение и разочарование.

Кроме того, поскольку Angular огромен и имеет тенденцию делать вещи «по-другому», чем более широкая экосистема JavaScript, документация должна быть более обширной. Документация превосходна для рутинных действий, но когда мы должны настроить, важные детали отсутствуют.

У React самый маленький API и самые проверенные концепции. Поэтому документация React, по-видимому, является золотым стандартом. Тем не менее, учитывая, что Vue также должен охватывать некоторые концепции и нуждается в более широком API, он отлично справляется со своей задачей.

Учитывая объем необходимой документации и ее уровень, мы отдаем ее Vue, а затем React.

Сообщество

«Большая тройка» заработала свое место на вершине, создав большие сообщества. Сегодня у Angular 80 тысяч звезд, у React 183 тысячи звезд, а у Vue 193 тысячи звезд на GitHub. В совокупности это почти полмиллиона звезд! Хотя звезды сами по себе не являются надежным показателем, они говорят нам о том, что эти проекты популярны и хорошо приняты в сообществе.

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

Основная целевая аудитория Angular, корпоративные пользователи, делает их аудиторию небольшой. React и Vue имеют равную долю активного сообщества с открытым исходным кодом. Однако около половины сообщества Vue используют Vue 2, а другая половина использует Vue 3. Хотя большинство из них хотят перейти, несколько основных пакетов по-прежнему доступны только для ранее выпущенной версии 2.

У React нет этой проблемы. Его API остался прежним, а новые дополнения, такие как хуки, необязательны, хотя сообщество довольно быстро восприняло эти изменения.

Здесь мы бы отдали предпочтение Vue, но, поскольку переход с Vue 2 на Vue 3 кажется чем-то вроде борьбы сообщества, мы выберем React для этого пункта, поставив Vue на второе место.

Рынок труда

Сообщество — это еще не все, и тот факт, что Vue в основном привлекает независимых разработчиков и рынок труда, отражает это. Здесь Angular и React равны, в то время как Vue отстает от этих двух с большим отрывом.

Поскольку Angular доминирует в стабильном корпоративном секторе, мы даем ему первое место, но React остается позади.

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

Angular может оказаться наиболее подходящим для группы бывших разработчиков Java или .NET, в то время как сторонники Node.js почувствуют себя более уверенными в React. И в наши дни независимые разработчики определенно предпочитают Vue. В конце концов, решение о том, какой фреймворк использовать, полностью зависит от нефункциональных аспектов, таких как состав команды.

Первоначально опубликовано на https://www.grapecity.com 13 сентября 2022 г.