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

Опубликовано: 2020-11-26

Есть три фреймворка для создания веб-приложений, о которых слышал каждый разработчик интерфейса: React, Vue.js и Angular.

React — это библиотека пользовательского интерфейса, Angular — это полноценный интерфейсный фреймворк, а Vue.js — прогрессивный фреймворк.

Их можно использовать практически взаимозаменяемо для создания клиентских приложений, но они не на 100 % одинаковы, поэтому имеет смысл сравнить их и понять их различия.

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

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

Архитектура

Реагировать

React не навязывает определенную структуру проекта, и, как видно из приведенного ниже официального примера «Hello World», вы можете начать использовать React, написав всего несколько строк кода.

 ReactDOM.render(
  <h1>Привет, мир!</h1>,
  document.getElementById('корень')
);

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

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

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

React основан на JavaScript, но в основном он сочетается с JSX (JavaScript XML), расширением синтаксиса, позволяющим создавать элементы, содержащие HTML и JavaScript одновременно.

Все, что вы создаете с помощью JSX, также может быть создано с помощью React JavaScript API, но большинство разработчиков предпочитают JSX, потому что он более интуитивно понятен.

Вью

Базовая библиотека Vue.js фокусируется только на слое просмотра. Он называется прогрессивным фреймворком, потому что вы можете расширить его функциональность с помощью официальных и сторонних пакетов, таких как Vue Router или Vuex, чтобы превратить его в настоящий фреймворк.

Хотя Vue не связан строго с шаблоном MVVM (Model-View-ViewModel), его дизайн частично вдохновлен им. С Vue вы будете работать в основном на уровне ViewModel, чтобы убедиться, что данные приложения обрабатываются таким образом, чтобы фреймворк мог отображать актуальное представление.

Синтаксис шаблонов Vue позволяет создавать компоненты View и сочетает в себе знакомый HTML со специальными директивами и функциями. Этот синтаксис шаблонов предпочтительнее, хотя также поддерживаются необработанные JavaScript и JSX.

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

SFC — это рекомендуемый способ организации кода в проектах Vue.js, особенно в крупных. Такие инструменты, как Webpack или Browserify, необходимы для преобразования SFC в рабочий код JavaScript.

Угловой

В этой статье я обсуждаю Angular 2, а не первую версию фреймворка, которая сейчас известна как AngularJS.

AngularJS, исходный фреймворк, представляет собой фреймворк MVC (Model-View-Controller)). Но в Angular 2 нет строгой связи с MV*-паттернами, так как он также основан на компонентах.

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

Каждый компонент в Angular содержит шаблон, класс, определяющий логику приложения, и метаданные (декораторы). Метаданные для компонента сообщают Angular, где найти строительные блоки, необходимые для создания и представления своего представления.

Шаблоны Angular написаны на HTML, но также могут включать синтаксис шаблона Angular со специальными директивами для вывода реактивных данных и рендеринга нескольких элементов, среди прочего.

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

Angular построен на TypeScript, поэтому его рекомендуется использовать для максимально удобной работы, но также поддерживается и простой JavaScript.

Экосистема

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

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

Реагировать

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

Самый популярный проект для управления состоянием JavaScript — Redux. Большинство разработчиков используют официальные привязки React для Redux, которые поддерживаются командой Redux.

Из-за популярности React поиск компонентов ввода и готовых к использованию элементов чрезвычайно прост. Все они находятся на расстоянии поиска в Google или GitHub.

Экосистема React также включает React Native, который позволяет создавать нативные приложения для iOS и Android из единой кодовой базы, написанной на React. Таким образом, React также может быть отличным выбором для создания мобильных приложений с использованием веб-технологий.

React является частью стека MERN, в который входят MongoDB, ExpressJS, React и NodeJS. Самое замечательное в этой комбинации то, что один язык — JavaScript — управляет всем приложением.

Вью

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

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

Для разработки мобильных приложений существует многообещающий проект под названием Weex. Weex разработан и используется Alibaba, но он не такой зрелый и мощный, как React Native. Более того, поскольку проект разрабатывается и используется больше в Китае, сложнее найти документацию и решения проблем на английском языке.

Vue хорошо интегрируется с Laravel, поэтому их часто используют вместе. Laravel предлагает полную поддержку JavaScript и CSS, позволяющую использовать Vue в новых проектах.

Угловой

Для управления состоянием в Angular можно использовать проект NgRx. Он был вдохновлен Redux, но специально создан для Angular.

Как и в случае с Vue и React, существует множество готовых к использованию компонентов, которые вы можете импортировать в свои проекты. Что немного отличается от Angular, так это то, что в проекте Angular Material есть много официальных компонентов. Это официальный проект Google, предлагающий компоненты Material Design для приложений Angular.

Вы можете создавать кроссплатформенные мобильные приложения в Angular, используя NativeScript. Он также поддерживает Vue, но поддержка Angular более зрелая.

Angular является частью известного стека MEAN, который объединяет Angular с MongoDB, ExpressJS и NodeJS. Подобно стеку MERN, он полностью полагается на JavaScript как для внешнего, так и для внутреннего интерфейса.

Общие технологии

Angular, React и Vue можно использовать для разработки прогрессивных веб-приложений, также известных как PWA.

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

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

Представление

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

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

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

Но поскольку есть некоторые показатели производительности и различия, я рассмотрю их и объясню, как каждый из них может повлиять на ваши усилия по разработке.

Тест JS Framework: Angular, React, Vue

Результаты JS Framework Benchmark показывают, что все они достаточно хорошо работают в большинстве тестов, таких как создание или добавление строк в таблицу.

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

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

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

Отслеживание производительности: Angular против React против Vue

Perf Track от Google Chrome Labs показывает производственные данные с тысяч веб-сайтов. На эту статистику влияет множество других факторов, и не только выбранный фреймворк, но и давайте посмотрим на цифры.

Первая содержательная краска

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

Самая большая содержательная краска

Angular также является самым медленным среди трех фреймворков в рендеринге полной страницы: только 27% веб-сайтов Angular набрали допустимые баллы.

Задержка первого входа

Для всех трех фреймворков более 80 процентов веб-сайтов находятся в допустимом диапазоне для первой задержки ввода, которая показывает, сколько времени требуется, пока пользователь не сможет взаимодействовать со страницей.

Байты JavaScript

Самые легкие приложения, безусловно, разработаны с помощью Vue: 68% приложений Vue загружают менее 1 МБ JavaScript. С другой стороны, приложения Angular и React, как правило, имеют больший размер кода.

Как использовать эти показатели

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

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

Расширенные возможности

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

Двумя ключевыми технологиями являются рендеринг на стороне сервера (SSR) и виртуализация.

Реагировать

React поддерживает рендеринг на стороне сервера с помощью официального пакета ReactDOMServer. Для виртуализации вы можете использовать популярный сторонний инструмент под названием React Virtualized.

Вью

Рендеринг на стороне сервера поддерживается в Vue, а также в официальном пакете SSR. Кроме того, вы также можете использовать фреймворк Nuxt.js, который построен на основе Vue и поддерживает SSR.

К сожалению, возможности виртуализации в Vue не так сильны. На мой взгляд, Vue Virtual Scroll List — лучшее решение для виртуальной прокрутки, но оно немного глючное и не такое стабильное, как варианты для React и Angular.

Угловой

Angular имеет официальный пакет Angular Universal для SSR и официальный компонент для виртуальной прокрутки и эффективного рендеринга больших списков.

Кривая обучения

Насколько легко изучить каждый из этих фреймворков?

Чтобы ответить на этот вопрос, нам нужно взглянуть на сложность каждого фреймворка и концепций, которые они вводят.

Реагировать

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

Но помимо примера Hello World, большинство приложений React основаны на компонентах и не просто отображают несколько элементов на странице.

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

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

Вью

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

Большинство проектов Vue будут иметь корневой компонент с именем App.vue и ряд дочерних компонентов для отображения различных вещей.

Когда дело доходит до синтаксиса, единственная новая вещь, которую вам нужно изучить, — это синтаксис шаблонов Vue, который очень легко понять, если вы знаете HTML. Основные директивы, такие как v-if и v-for для условного рендеринга и рендеринга списка, легко понять даже новичкам.

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

На мой взгляд, Vue проще всего изучить из-за его простоты и интуитивно понятного синтаксиса.

Угловой

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

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

Что касается синтаксиса, поскольку Angular лучше всего работает с TypeScript, важно, чтобы вы знали TypeScript при создании проекта Angular.

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

На мой взгляд, среднестатистическому разработчику сложнее всего изучить Angular, потому что он сложнее и полагается на TypeScript.

Прогнозы на будущее

Многие проекты и фреймворки с открытым исходным кодом уходят в небытие и перестают поддерживаться. Должны ли вас беспокоить какие-либо из фреймворков, которые мы здесь обсуждаем?

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

Реагировать

Вышел React v17.0, но, что удивительно, он не включает никаких новых функций для разработчиков.

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

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

React вырос на 44 процента по сравнению с прошлым годом в еженедельных загрузках npm. В абсолютных цифрах это по-прежнему самый загружаемый из трех проектов.

Вью

Vue 3 был выпущен в сентябре 2020 года и решает многие серьезные проблемы, с которыми сталкивается Vue 2 в крупных проектах. Он представляет Composition API, вдохновленный React Hooks, и упрощает повторное использование логики в компонентах.

Весь проект был переписан на TypeScript, что улучшает поддержку TypeScript в новых проектах Vue, а также делает проект более удобным в сопровождении.

Vue 3 — это столь необходимое обновление, которое делает Vue более подходящим для крупномасштабных проектов.

Еженедельные загрузки Vue выросли на 87 процентов по сравнению с прошлым годом, что делает Vue самым быстрорастущим фреймворком в относительном выражении. Если Vue сможет поддерживать такой темп роста, то он, безусловно, скоро превзойдет Angular.

Угловой

Angular недавно представил компилятор Ivy. Это сокращает время сборки, оптимизирует активы, позволяет быстрее тестировать и в целом улучшает опыт разработчиков.

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

Еженедельные загрузки Angular с прошлого года выросли примерно на 50 процентов, поэтому он по-прежнему остается популярным проектом.

Вывод

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

Важно отметить, что Angular не растет так быстро, как раньше, в то время как Vue — хотя он появился совсем недавно — кажется, сильно растет.

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

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

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

Во-первых, опыт вашей команды может стать решающим фактором при выборе новой технологии.

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

Наконец, когда дело доходит до самого проекта, сложность и объем также могут повлиять на ваш выбор фреймворка.

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