Читайте нас в телеграм:

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логический задачи с айтишных собеседований

Выбираем между React и Angular

Выбираем вариант для фронтенда.

Оба фреймворка хороши для веб-приложений. Существуют проекты с мировым именем, сделанные на 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.

Читайте также

Обсуждение

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

читайте нас в телеграм

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логические задачи на собеседованиях в IT

Фронтендер от бога

Божественный канал о тестировании

Mobile Dev Lib

Популярное

10 опенсорсных инструментов в помощь разработчику

Так как людей в ИТ все еще не хватает, и не только в США, нагрузка на одного разработчика остается большой. Невозможные дедлайны, задачи по продуктивности не учитывающие наличие лишь 24 часов в сутках, и при этом они хотят, чтобы ни одного бага. Что поможет разработчику в этой потогонке? Опыт говорит, что помогут хорошие инструменты.

Как войти в Java в 2021 году

Советы преподавателя как войти в Java в 2021 году. Что почитать по Java, как найти галеру, книжки по Java, competitive programming

Выбираем между React и Angular

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