Выбираем вариант для фронтенда.
Оба фреймворка хороши для веб-приложений. Существуют проекты с мировым именем, сделанные на React, и также есть на Angular.
Далее рассмотрим, как эти фреймворки подходят для больших проектов, как они позволяют расширять проект, как насчет проектов с высокой нагрузкой.
Ситуация с Angular и React сейчас
Прошлогодний опрос юзеров StackOverflow:
И загрузки на Гитхабе:
Как понятно из скриншотов, React сейчас на более высокой позиции. Это выражается как в бОльшем количестве загрузок (npm) на Гитхабе, так и голосованием. Разница в самом деле большая – между 36% и 26%.
Значит ли эта разница, что Angular плохой? Или может, дело в том что React дает более надежные решения.
На чем стоит Angular
Давайте рассмотрим, как и чем отличаются наши фреймворки. Angular происходит из экосистемы стартапов в Google. Он создавался с прицелом на управление многими процессами “из одной точки”. Если в такой системе случается непродуманное решение, оно приносит проблемы, и ударяет, иногда, по миллиарду клиентов во всем мире.
Angular превратился в монолитный фреймворк, задающий кодеру определенные этапы разработки. Хотя есть некое разнообразие в виде дополнительных сервисов, контроллеров и расширительных модулей, все-таки Angular диктует разработчику специфический “путь”. Это создает барьер между разработчиком и фреймворком.
Есть несколько вещей, делающих Angular сложным:
- Широко применяется объектно-ориентированный подход, поэтому разработка требует достаточной квалификации;
- Разработчик должен хорошо знать TypeScript;
- А также должен знать RxJS.
Определенно, освоить Angular – не так просто (как говорится “кривая обучения крутая”). Опять же, быть гением ООП дано не всем. Естественно, в Google все программисты владеют всеми нужными навыками, поэтому для их команды Angular подходил идеально. В целом, фреймворк рассматривался как комплексное решение задач, ставившихся в Google, вполне отвечал продвинутой культуре разработки.
Несмотря на сложность архитектуры, фреймворк имеет бесспорные плюсы:
1) Двухсторонняя привязка данных (two-way data binding) автоматизирует синхронизацию между Model и View. Если данные изменены в Модели, они автоматически изменятся и в ее Представлении (DOM). Поэтому не надо писать “добавочный” код. Данные синхронизируются подобно тому, как правки в документ на Гугл-Диске тут же становятся видны всем имеющим доступ; это и есть двухсторонняя привязка данных.
2) Внедрение зависимостей (DI, dependency injection), механизм передачи зависимости в другой класс. Сервисы из сервера передаются в клиент. Это очень хорошая вещь из ООП, реализованная в Angular.
3) “Директивы“, внедренные для “обогащения” HTML, то есть новые элементы синтаксиса HTML. Самый часто применяемый из них – это “компонент”. Разработчик может приписать новый атрибут любому имеющемуся HTML-элементу, и изменить его поведение. Весьма полезная функция, улучшающая работу с DOM.
Есть множество других ценных функций, тот же UI Material, позволяющий повторно использовать код (reuse) из других компонентов проекта (хотя такое же есть и в React).
Кому сейчас нужен Angular?
Опытные разработчики фронтэнда полагают, что Angular хорошо подходит для enterprise-решений, и вообще корпоративного сектора. React.js лучше для стартапов и небольших компаний.
Крупные компании редко меняют свои стратегические цели, их технические руководители планируют развитие проектов на очень большой срок.
Главное, что вы можете запомнить из этого обзора, это следующее, Angular – лучший вариант для длинных проектов, где “надежность превыше всего“. Кроме упомянутых в списке, с Angular работают всего несколько команд в крупных компаниях: Microsoft Office, Deutsche Bank, Samsung.
Чем отличается React.js?
- Кривая обучения – плавная. Кодер с хорошим знанием HTML и JavaScript без проблем освоит React, достижения будут видны сразу.
- Простая архитектура. Не надо тратить время, чтобы вникнуть в нюансы архитектуры.
- Виртуальная реализация DOM снизила требования к рендерингу
- Отличное комьюнити, пополняющее React.js
- Приятно работать в интуитивном интерфейсе
А вот React.js даже не называет себя фреймворком, а всего лишь библиотекой. В отличие от Angular, React возлагает на разработчика рутину описания структуры проекта, подбора нужных сервисов HTTP-маршрутизации, и тому подобное. Сейчас идеология React нацелена на agile, поэтому дает разработчику полнейшую свободу. С самого начала проект не разрастается бесконтрольно, все библиотеки могут быть включены, когда понадобятся.
В ситуации, когда в проекте лишь один, или несколько, фронтэнд-разработчиков, цели проекта ставятся лишь на близкую перспективу. Разработчик должен быть быстрым и продуктивным, оперативно выполнять поставленные задачи. В такой обстановке, ограничения Angular и его специфическая архитектура будут тормозить разработку.
Таким образом, “следование единой стратегии” не является приоритетом в React-комьюнити. Это прямо противоположно “монолитным” принципам Angular.
При этом нужно подчеркнуть, что React не может работать “автономно”. Это всего лишь Представление (View), и ему понадобится движок для обработки данных. Разработчик должен продумать, как работать с ними, и разобраться с Redux и Saga, исходя из ситуации в проекте.
Какие проблемы решает виртуальная DOM?
Сейчас ситуация следующая: когда пользователь что-то нажимает на странице, изменения автоматически записываются в DOM. Чтобы показать изменения на странице, браузер должен перегрузить всю DOM-структуру. Это тормозит браузер, делает работу неэффективной.
Что React предлагает насчет производительности
- Делает снимок (snapshot) DOM, это так называемая виртуальная модель DOM (VDOM);
- Каждое действие в интерфейсе записывается в виртуальную VDOM (а не сразу в обычную DOM);
- React оценивает новую версию VDOM, и решает, достаточно ли изменений, чтобы обновить “настоящую” DOM браузера;
- Если достаточно, то обновляет, внедряя в “настоящую” DOM эти изменения.
Итак, React.js обладает алгоритмами оценки, когда нужно обновлять DOM в браузере. Это делает фронтэнд-приложения React весьма быстрыми. К сожалению, в Angular нет такой функциональности даже близко.
Таким образом, в React можно писать чистый JS-код для мелких проектов. А в Angular есть удобные HTML-расширения (которые, однако, могут усложнять проект).
Теперь понятно, почему React сейчас доминирует в фронтэнде.
В дополнение к этому, в React есть много дополнительных функций и библиотек, и при этом фреймворк простой в работе; все это обеспечило популярность больше, чем у Angular. Все-таки удобство пользования есть главнейшее условие популярности у разработчиков. React в 2021 году – это интуитивное и мощное средство для фронтэнда.
Дискуссия “Что лучше?” закончена – победителем признается React. Сейчас комьюнити интересуется другими перспективными фреймворками типа Vue.js, возможно этот фреймворк сумеет когда-то конкурировать с React.