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

С недавнего времени на арене front-end появилось два основных игрока: Angular, выпущенный Google, и React - библиотека JavaScript, разработанная Facebook. Однако в 2018 году в конкурс вступил еще один сильный игрок, демонстрирующий стремление быть признанным самым выгодным из фреймворков JavaScript, - Vue js.

Vue против React против Angular

Прежде чем углубляться в общее сравнение этих популярных фреймворков, давайте посмотрим на их происхождение.

Краткая история Angular, React и Vue

Угловой

Сотрудник Google, Миско Хевери, работал над дополнительным проектом, направленным на упрощение процесса создания веб-приложений. Обнаруженное им решение было выпущено в 2010 году как проект с открытым исходным кодом под названием AngularJS и стало активно использоваться некоторыми крупными брендами.

Спустя несколько лет появились новые достижения в JavaScript, и команда была вынуждена переписать AngularJS с нуля на основе TypeScript. В названии фреймворка опущено «JS», чтобы избежать путаницы. Обновления происходят два раза в год, а последнее - Angular 9 - вышло 6 февраля 2020 года.

Реагировать

Неизменный лидер среди самых популярных фреймворков JavaScript, React был разработан Facebook для удовлетворения потребностей своих продуктов и успешно представлен и предоставлен в открытый доступ технической аудитории в 2013 году. Разработка React уходит корнями в его ранний прототип, созданный Джорданом. Walke - «Fax.js», впервые развернутый в 2011 году в ленте новостей Facebook. Последняя версия 16.13.0 была выпущена 26 февраля 2020 года.

Vue.js

Бывший сотрудник Google Эван Ю после многих лет работы с Angular решил создать легкий фреймворк, который бы содержал лучшие функции вышеупомянутого. Фреймворк с открытым исходным кодом Vue.js был выпущен в феврале 2014 года и с тех пор становится чрезвычайно популярным. Последняя версия 2.6 Macross была выпущена 4 февраля 2019 года.

Популярность Angular, React и Vue.js

Популярность Angular и React - это старое противостояние. Оба они являются мощными, современными и широко используемыми фреймворками JavaScript, которые претерпели значительные изменения: их «дуэль» превратилась в «истинную» - популярность Angular vs React vs популярность Vue.js. Мы рассмотрим четыре основных показателя, чтобы определить самый популярный: тенденции NPM, опрос Stack Overflow, звезды GitHub и открытые предложения о работе.

  1. React остается самой популярной из фреймворков JavaScript по отчетам Node Package Manager. С учетом периода с декабря 2018 года по июль 2020 года он получает примерно в пять раз больше загрузок в год, чем Vue.js, и в тринадцать раз больше, чем Angular.

2. Согласно Результаты опроса разработчиков Stack Overflow 2019, React пользуется наибольшей популярностью у разработчиков (74,5%), за ним следует Vue.js (73,6%) и только потом Angular.js (57,6%).

3. Четвертое издание JavaScript Rising Stars, оценивающее количество звезд, добавляемых на GitHub, ежегодно показывает поразительную статистику: Vue.js занимает первое место с 31,4 тыс. Звезд, оставляя React с 22,4 тыс. Звезд на втором месте и Angular.js (12к звезд) на четвертом.

4. Поиск по запросу действительно 8 июля 2020 года показал следующие результаты: React имеет 43 678 предложений о работе, Angular - 10 458 предложений о работе, а Vue.js - 1391.

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

Компоненты Angular, Vue.js и React

Работоспособность фреймворка определяется наиболее ценными частями - его компонентами. Их рабочий процесс связан со способом получения входных данных и тем, как он реагирует на эти данные.

Угловой

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

Реагировать

В отличие от Angular, React сочетает в себе поведение пользовательского интерфейса и компонентов. Проще говоря, одна и та же часть кода отвечает за создание элемента пользовательского интерфейса и управление его поведением.

Vue.js

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

Производительность Vue, React и Angular и размер фреймворка

Угловой

Angular использует настоящую модель DOM, поэтому лучше всего подходит для одностраничных приложений, в которых контент время от времени обновляется. Это значительно замедляет процесс обновления, и в случае потери потока потребуется много времени, чтобы найти проблему. Благодаря двустороннему процессу привязки данных все изменения, внесенные в Модель, реплицируются в представления безопасным и эффективным способом. Из-за широкого набора доступных функций приложение намного тяжелее (примерно 500 КБ) по сравнению с Vue и React, что немного снижает производительность.

Реагировать

В отличие от Angular, React использует виртуальную модель DOM, которая повышает производительность приложений любого размера, которым требуется регулярное обновление контента. Однонаправленные данные позволяют лучше контролировать проект. Недостатком может быть необходимость разработчиков постоянно повышать свои навыки в связи с постоянно развивающейся природой React. Поскольку React не предоставляет широкий спектр библиотек, его размер намного меньше размера Angular (примерно 100 КБ).

Vue.js

Vue также использует виртуальную модель DOM, поэтому изменения внутри проекта не влияют на DOM должным образом. Vue имеет наименьший размер из трех (примерно 80 КБ), что значительно увеличивает его производительность.

В заключение, учитывая производительность, Vue и React более удобны для разработки простых в обслуживании и безошибочных веб-приложений.

Простота процесса освоения новой структуры имеет большое значение, если кто-то думает изучить ее или кого-то обучить. Итак, какой из них самый удобный для обучения?

Кривая обучения Angular, Vue и React

Vue.js, вероятно, легче всего изучить. И это продиктовано двумя основными причинами:

  1. Не требует специальной настройки. Для начала вам просто нужно импортировать библиотеку Vue в файл HTML и добавить JS (но для более крупных проектов Vue).
  2. Нет необходимости изучать большой специальный синтаксис. Использование Vue основано на JavaScript и HTML, дополненных такими директивами, как v-for, которые не требуют пояснений.

Angular и React требуют более сложной настройки проекта. Хотя задача упрощается за счет наличия подходящих настроек: create-react-app, Angular CLI и Vue CLI (для более сложных проектов).

Освоение Angular и React также требует изучения синтаксиса TypeScript или JSX соответственно.

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

React также требует постоянного обучения, поскольку он часто обновляется, но освоить его намного проще с помощью учебника для начинающих и базовых знаний JavaScript. Основная трудность - это библиотека Redux.

Варианты использования Vue, Angular и React

Угловой

Разработанный Google, он активно используется в приложениях AdWords для повышения производительности. Среди других известных веб-ресурсов, использующих Angular, мы можем назвать Guardian, Lego, Nike, PayPal и Weather.com.

Реагировать

Первоначально разработанный для Facebook, React до сих пор активно используется компанией для создания множества своих продуктов. Twitter, Instagram, Whatsapp и WordPress также поддерживают эту структуру.

Vue.js

В отличие от Angular и React, у Vue нет влиятельных покровителей, которые могли бы реализовать его в каждом из своих продуктов. Хотя, благодаря своей гибкости, он завоевал популярность среди таких популярных брендов: 9Gag, Nintendo, GitLab и Grammarly.

Vue vs React vs Angular - сравнительная таблица

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

Первоначально опубликовано на Inveritasoft.com 26 марта 2020 г.