Сравнение AngularJS и React

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

Кратко о React

React - JavaScript фреймворк созданный Facebook с одной целью: построение быстродействующих интерфейсов. React был построен с целью решить одну общую для всех JavaScript фреймворков проблему - быстрая отрисовка большого объема данных. React использует возможности DOM, что позволяет ему обновлять только измененные участки страницы, а не всю страницу целиком.

Отсутствие формальности

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

Шаблоны

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

Быстродействие

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

Архитектура приложения

Очередное отличие между AngularJS и React заключается в архитектуре приложения. AngularJS изначально выступал как яркий представитель MVC (модель, вид контролер) шаблона, но с недавнего времени перерос в MVVM (модель, вид, вид-модель) шаблон - гибридная MVC архитектура. React же ставит V в центре - его оснавная цель это отрисовка данных, а остальные компоненты он оставляет на усмотрение разработчика. В силу такого подхода вполне можно объединить в одном приложении AngularJS и React для повышения производительности проблемных компонентов.

Заключение

Для того, чтобы сделать правильный выбор в том, какой JavaScript фреймворк использовать, надо четко себе представлять все “за” и “против” каждого рассматриваемого фреймворка. Как мы видим, React отлично себя показал при работе с большими объемами данных, он довольно быстро их выводит на экран, и позволяет быстро вносит изменения в эти данные.

Но он не включает в себе всего функционала, который несёт AngularJS - например, отсутствует уровень контролера, который позволяет управлять данными. В итоге при выборе между AngularJS и React мы приходим к решению простого вопроса - стоят ли усилия, необходимые для изучения React, прироста производительности вашего приложения? А может вы сможете объединить два этих фреймворка в одно целое? Но, как вы сами догадываетесь, однозначного ответа быть не может. Все зависит исключительно от требований, предъявляемых к вашему приложению.

Комментарии

0