Сначала плохие новости.

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

С другой стороны? Это тоже может быть хорошей новостью.

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

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

Угловой

Определение

Angular — не путать с AngularJS — это надежная, полноценная среда веб-приложений на основе TypeScript, бесплатная и с открытым исходным кодом. Чаще всего он используется при разработке одностраничных приложений (SPA), но он также отлично справляется с прогрессивными веб-приложениями, корпоративными веб-приложениями и ERP. системы. Прежде всего, он ориентирован на сложные проекты, над которыми одновременно работают несколько разных команд.

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

Источник

Angular, также известный как Angular 2, был выпущен Google в сентябре 2016 года, через шесть лет после выпуска его предшественника AngularJS.

AngularJS, созданный Мишко Хевери — сотрудником Google, который просто хотел разработать побочный проект, который мог бы помочь в создании других проектов, — работал очень хорошо с момента его выпуска в 2010 году. Но Интернету потребовалось всего четыре года, чтобы изменить достаточно, чтобы потребовать внесения новых изменений в AngularJS. Что, в конце концов, сочли невозможным — несмотря ни на что, AngularJS просто не мог эффективно справляться с разработкой мобильных приложений или крупных корпоративных приложений.

Именно тогда Google объявил о Великом переписывании AngularJS, который назывался просто Angular. Переписывание было в значительной степени фундаментальным, с основным отличием, начиная с языка — Angular основан на TypeScript, а его предшественник — на JavaScript. Из-за этого некоторые поклонники AngularJS не могли привыкнуть к его новой версии, настолько она сильно отличалась.

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

К счастью для Google, Angular все эти годы был настоящим хитом, выбранным как самый любимый фреймворк 55,82% респондентов в опросе Stack Overflow 2021. Его используют Paypal, Santander, Forbes, Upwork, Samsung и Deutsche Bank. И конечно же — Гугл.

Сильные стороны

Задел на будущее

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

Помимо того, что он находится под виртуальным крылом Google, активное сообщество разработчиков также отвечает за заботу об Angular. Вот почему легко найти множество полезных инструментов разработки, плагинов, надстроек и пакетов. И, конечно же, если вы когда-нибудь столкнетесь с проблемой, сообщество всегда может вам помочь.

Не зависит от платформы

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

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

Самодостаточный

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

Из всех фреймворков Angular считается самым надежным, предлагая все необходимое для самых сложных проектов.

Масштабируемость

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

Хорошо задокументировано

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

Однако это довольно сложно, и непонимание основ может привести к проблемам с пониманием всего остального.

На основе TypeScript

TypeScript, язык программирования, разработанный Microsoft, особенно полезен при работе с большими кодовыми базами, чего нельзя сказать о JavaScript. Это одна из причин перехода с AngularJS на Angular — упростить разработку приложений корпоративного уровня, особенно когда работа разделена между многими командами.

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

Слабые стороны

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

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

Кроме того, есть также много сложных принципов, которые нужно освоить. Важно изучить уникальный синтаксис, компоненты и директивы Angular, объектно-ориентированное программирование, NgModules, шаблоны, двунаправленную привязку и многое другое. Для новичка этот фреймворк может быть непосильным — знание HTML, CSS и JS не сильно поможет. Но бэкенд-разработчикам определенно проще.

Размер пакета

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

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

Реагировать

Определение

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

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

Источник

React был создан Facebook в 2011 году. Его автор, Jordan Walke, сначала создал прототип под названием FaxJS, вдохновленный XHP. Его цель заключалась в определении таблиц стилей в JavaScript, что стало отправной точкой для React.

В 2011 году React взял на себя новостную ленту Facebook и был развернут после успеха в Instagram через год после этого. Во время JSConf US в мае 2013 года было объявлено, что React имеет открытый исходный код, и на сегодняшний день 9836 компаний сообщили об его использовании — такие компании, как Twitter, Netflix, Airbnb, Uber, Shopify, Amazon и многие другие.

Сильные стороны

Повторно используемые и декларативные компоненты

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

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

Помимо компонентов, логика также может быть повторно использована двумя способами: либо с помощью React Hooks, либо с использованием компонентов более высокого порядка.

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

Виртуальный DOM

React высоко ценится за его высокую производительность, которая является прямым результатом использования Virtual DOM вместо обычного.

Объектная модель документа — это представление веб-страницы, в котором четко представлена ​​ее структура и все ее содержимое. Он служит интерфейсом прикладного программирования (API), который позволяет получить доступ к странице для управления ею.

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

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

Односторонний поток данных

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

Яркое сообщество

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

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

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

Оптимизировано для SEO

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

Слабые стороны

Минималистичный

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

Кроме того, множество различных инструментов может привести к менее чистому и согласованному коду по сравнению с Angular.

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

Быстрый темп развития

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

Плохая документация

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

Вью

Определение

Vue.js, обычно называемый просто Vue, представляет собой прогрессивный JavaScript-фреймворк Model-view-viewmodel (MVVM), используемый при разработке внешнего интерфейса. Подобно React, он используется для создания пользовательских интерфейсов и одностраничных приложений (SPA).

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

Источник

Происхождение Vue немного особенное по сравнению с двумя другими. Это был личный проект Эвана Ю, который к тому времени работал в Google. Работая с AngularJS (не путать с Angular) ежедневно, Эван оценил некоторые его функции, такие как связывание данных и подход к DOM на основе данных, но посчитал его слишком тяжелым для фреймворка. Поэтому он создал легкую библиотеку шаблонов, исходный код которой был открыт в феврале 2014 года и официально назывался Vue.js.

С помощью преданного сообщества Vue быстро приобрел новые функции и стал полноценным фреймворком. В настоящее время его поддерживает и дорабатывает международная команда.

Vue — самая молодая и наименее популярная из всех трех технологий, но ее до сих пор используют 3232 компании, среди которых Alibaba, Gitlab, Glovo, Grammarly и TrustPilot.

Сильные стороны

Простота

Благодаря простой структуре и четко определенной архитектуре Vue дает несколько преимуществ. Во-первых, процесс разработки прост, быстр и эффективен — всего нескольких строк может быть достаточно для достижения хороших результатов. Во-вторых, с ним несложно разобраться, для этого требуются лишь базовые знания JavaScript, HTML и CSS. В-третьих, его простота отражается в размере Vue — весь пакет весит около 18–21 КБ, что также положительно влияет на SEO.

Подготовка к работе также выполняется быстро и без усилий.

Гибкость

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

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

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

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

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

Богатая экосистема

Государственное управление? Проверить — Vuex.

Модульное тестирование? Отметить — Vue Test Utils.

Маршрутизация на стороне клиента? Отметить — Vue Router.

Создание каркаса проекта и управление плагинами? Отметить — Vue CLI.

Отладка расширения для браузера? Проверить — vue-devtools.

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

Простое обслуживание

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

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

Кроме того, рефакторинг не потребуется слишком часто, что сэкономит время и ресурсы всех участников проекта.

Учиться на ошибках

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

Слабые стороны

Неопределенное будущее

Из трех только Vue не поддерживается крупной корпорацией. До сих пор сообщество усердно (и успешно) поддерживало его, но если популярность Vue когда-нибудь упадет, участники могут потерять к нему интерес. Или вообще перейти на другую технологию, как только очередной технологический гигант подберет достаточно хорошего конкурента. Вот почему для некоторых вложение времени и усилий в структуру, которая может оказаться мимолетной тенденцией, не принесет пользы в долгосрочной перспективе.

Слишком много свободы

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

Языковой барьер

Из-за растущей популярности Vue в Китае, когда такие гиганты, как Xiaomi, Baidu и Alibaba, добавили Vue в свой технологический стек, большая часть сообщества говорит только на китайском языке. Вот почему многие элементы Vue можно найти только на китайском языке, как и многие обсуждения, описания и инструкции. Этот языковой барьер может быть особенно проблематичным при поиске решений определенных проблем.

Angular против React против Vue: ключевые выводы

Вывод

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

Первоначально опубликовано на https://massivepixel.io.

Дополнительные материалы на plainenglish.io