Здесь мы рассматриваем различные аспекты Angular и React, чтобы выяснить, насколько они соответствуют вашим требованиям. Это не просто руководство, но и описание структуры, которая поможет судить о фреймворках JavaScript в целом. В случае, если новый фреймворк появится в следующем году, вы будете точно знать, на какие параметры стоит обратить внимание!
Краткая история React и Angular
Как все началось
Angular, разработан Google, был впервые выпущен в 2010 году, что делает его одним из первых фреймворков. Работает на основе TypeScript. Существенное изменение произошло в 2016 году с выходом Angular 2 (и выпадением "JS" из оригинального названия - AngularJS). Angular 2+ известен также как просто Angular. Хотя AngularJS (версия 1) все еще обновляется, мы сфокусируемся на обсуждении Angular. Последней стабильной версией является Angular 9, который был выпущен в феврале 2020 года.
React, разработан Facebook, появился на рынке в 2013 году. Facebook широко использует React в своих продуктах (Facebook, Instagram и WhatsApp). Текущая версия - 16.X, выпущена в ноябре 2018 года (с тех пор количество инкрементальных обновлений уменьшается).
Лицензия
Прежде чем использовать фреймворк с открытым исходным кодом, убедитесь, что вы изучили его лицензионное соглашение. Любопытно, что оба используют лицензию MIT, которая предусматривает некоторые ограничения на повторное использование. Убедитесь, что вы знаете о последствиях этой лицензии, прежде чем пользоваться какими-либо фреймворком или ПО.
Популярность
Хорошим показателем их популярности является количество звезд, которое получают их репозитории GitHub.
Давайте посмотрим, как выглядит рынок труда для Angular vs React, что также является хорошим показателем популярности:
Количество рабочих мест, требующих навыков Angular или React, примерно одинаково. Этот список, безусловно, не является исчерпывающим, но дает хорошую картину всей технологической отрасли в целом.
Сообщество и развитие
Теперь, когда вы знакомы с историей и тенденциями каждого из этих фреймворков, мы посмотрим на сообщество, чтобы оценить развитие. Мы уже видели, что для всех фреймворков за последний год регулярно поставлялись дополнительные релизы, что говорит о том, что разработка идет полным ходом. Давайте посмотрим на Angular и React с точки зрения статистики по их репозиториям GitHub:
Судя по статистике, оба проекта демонстрируют значительную активность в разработке, и это, безусловно, будет продолжаться и в дальнейшем - но только на основании этой статистики нельзя принять решение об использовании ни одного из них.
Миграции
Поскольку вы работаете с выбранным вами фреймворком, вы не захотите переживать о том, что произойдет обновление фреймворка и ваш код перестанет быть рабочим. Хотя в большинстве случаев вы не столкнетесь со значительными проблемами при переходе от одной версии к другой, очень важно держать руку на пульсе, потому что некоторые обновления могут быть более значительными и требуют подстройки, чтобы сохранить совместимость.
В Angular планируют масштабные обновления каждые шесть месяцев. Также предусмотрен период еще в шесть месяцев до того, как основные API будут удалены, что дает вам время в два цикла выпуска (один год) для внесения необходимых изменений, если таковые имеются.
Когда речь заходит об Angular и React, Facebook заявил, что стабильность для них крайне важна, так как огромные компании, такие как Twitter и Airbnb, используют React. Обновления через версии, как правило, являются самыми простыми в React, с помощью таких скриптов, как реактивный код который помогает вам перейти на новую версию.
Работа с Angular и React
Объем и время загрузки
Размеры библиотек следующие:
Angular: Зависит от размера выпускаемой связки
React: 116 КБ
Несмотря на существенную разницу в объемах фреймворков, они по-прежнему невелики по сравнению со средней веб-страницей (2+Мб в 2018 году). Кроме того, если вы используете для загрузки CDN, то высока вероятность того, что у пользователя уже загружена библиотека в его локальной системе.
Компоненты
В Angular компоненты называются директивами. Директивы - это просто маркеры на DOM-элементах, которые Angular могут отслеживать и прикреплять к ним определенное поведение. Поэтому Angular разделяет часть пользовательского интерфейса компонентов как атрибуты HTML-тегов, а также их поведение в виде JavaScript-кода. Это то, что отличает его от React.
Интересным является то, что React сочетает в себе пользовательский интерфейс и поведение компонентов. В React одна и та же часть кода предназначена для создания элемента пользовательского интерфейса и диктования его поведения.
Обучение
Angular не прост в обучении, учитывая, что это комплексное решение, и освоение Angular требует от вас изучения связанных с ним концепций, таких как TypeScript и MVC. Несмотря на то, что для изучения Angular требуется время, инвестиции приносят дивиденды с точки зрения понимания того, как работает фронтэнд.
React предлагает руководство по началу работы, которое поможет настроить React примерно через час. Документация является полной и исчерпывающей, с решениями общих проблем уже представленными на Stack Overflow. React - это не полный фреймворк, поэтому расширенные возможности требуют использования сторонних библиотек. Это делает кривую обучения основного фреймворка не столь крутой, но зависящей от того, какой путь вы выбрали при использовании дополнительных функциональных возможностей. Однако, обучение использованию React не всегда значит, что вы используете лучшие практики.
Angular и React: Кто же победил?
Angular является наиболее зрелым из фреймворков, имеет хорошую поддержку с точки зрения разработчиков и является комплексным продуктом. Тем не менее, процесс обучения очень сложен, и концепции разработки в Angular могут отпугнуть новых разработчиков. Angular является хорошим выбором для компаний с большими командами и разработчиков, которые уже используют TypeScript.
React также достаточно зрелый, и сообщество вносит огромный вклад в его развитие. Рынок труда для React действительно большой, и будущее для данного фреймворка вполне светлое. React - хороший выбор для тех, кто начинает работать с фреймворками JavaScript, стартапами и для разработчиков, которые любят гибкость. Возможность простой интеграции с другими фреймворками дает большое преимущество тем, кто хотел бы иметь гибкий код.
Как вы думаете, какой фреймворк победил - Angular или React? Какое ваше мнение?