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

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

Поскольку прямого ответа на поставленный вопрос нет, давайте поступим чуть иначе. Мы сравним Angular (2+, а не старый AngularJS) и React, чтобы продемонстрировать схему, по который вы сами потом сможете сопоставлять фреймворки и адаптировать их под свою среду. Как говорится, научи человека ловить рыбу, и он будет сыт всю жизнь. Так что, когда через год на смену Angular и React придут новые улучшенные фреймворки, вы будете знать, что делать.

С чего начать?

Прежде чем выбрать любой инструмент, нужно ответить на два простых вопроса: «Хорош ли этот инструмент сам по себе?» и «Подходит ли он мне?». Задаваться этими вопросами по-отдельности не имеет никакого смысла, так что рассматривайте их в комплекте. На самом деле это не такие уж простые вопросы, так что давайте разобьем их на более мелкие.

О самом инструменте:

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

О пользе для себя:

  • Будет ли мне и моим коллегам легко изучить этот инструментом?
  • Подходит ли он нашему проекту?
  • Насколько удобен он для разработчиков?

Начинайте оценку любого инструмента с этих вопросов. В этой статье с их помощью мы сравним React и Angular.

Важный момент: строго говоря, сравнивать Angular и React не совсем корректно, поскольку Angular – полнофункциональный фреймворк, а React – всего лишь библиотека компонентов пользовательского интерфейса. Чтобы уровнять шансы, мы рассмотрим React в сочетании с некоторыми другими библиотеками, которые обычно используют вместе с ним.

Зрелость

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

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

И у React, и у Angular надежные разработчики, так что тут можно не беспокоиться.

React

React разработан в Facebook, причем компания использует фреймворк в собственных продуктах, в том числе в Instagram и WhatsApp. React появился около трех с половиной лет назад, так что это не новый инструмент. А еще React – один из самых популярных проектов на GitHub. В момент написания у него было 60 тысяч звездочек. Звучит неплохо.

Angular

Angular (вторая версия и выше) появился после React, но если учитывать еще и его предшественника, AngularJS, то картина выравнивается. Фреймворк развивают разработчики Google. Используется он в таких продуктах, как AdWords и Google Fiber. Поскольку AdWords – один из ключевых проектов в Google, очевидно, что они сделали большую ставку на Angular и вряд ли откажутся от этого фреймворка в ближайшем будущем.

Функции

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

Некоторые ключевые функции у фреймворков совпадают: это компоненты, привязка данных и независимый от платформы рендеринг.

Angular

Angular предоставляет «из коробки» множество функций, необходимых для современного веб-приложения. Например, в стандартный комплект входят:

  • Внедрение зависимости (dependency injection);
  • Шаблоны на основе расширенной версии HTML;
  • Маршрутизация с помощью @angular/router;
  • Ajax-запросы с помощью @angular/http;
  • @angular/forms для построения форм;
  • Инкапсуляция стилей компонентов;
  • Защита от XSS;
  • Инструменты для проведения unit-тестирования компонентов.

Все эти функции доступны по умолчанию, и это очень удобно, если вы не хотите тратить время и собирать библиотеки самостоятельно. Но есть и обратная сторона: иногда какие-то функции вам не нужны, а вы их всё равно получаете, причем придётся дополнительно повозиться, чтобы заменить их. Например, считается, что для маленьких проектов шаблон внедрение зависимости (dependency injection) отнимает больше ресурсов, чем приносит пользы, учитывая, что её можно с успехом заменить на импорт.

React

У React более минималистичных подход. Если рассматривать только React без дополнительных библиотек, мы видим следующие черты:

  • Не используется шаблон внедрения зависимости (dependency injection);
  • Вместо классических шаблонов – JSX, похожий на XML язык, созданный поверх JavaScript;
  • Защита от XSS;
  • Инструменты для проведения unit-тестирования компонентов.

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

Наиболее популярные библиотеки, которые обычно используют вместе с React:

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

Языки, парадигмы и шаблоны

Отвлечемся на время от функций фреймворков и рассмотрим характерные для них концепции более высокого уровня.

React

С React связаны три важных явления: JSX, Flow и Redux.

JSX

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

Да, смешивать или нет разметку с JavaScript – вопрос дискуссионный. Но у JSX есть и неоспоримое преимущество: статический анализ. Если вы допустили ошибку в разметке JSX, компилятор не проигнорирует ее, как это обычно бывает, а выдаст предупреждение. Эта полезная функция помогает на ходу отлавливать опечатки и другие глупые ошибки.

Flow

Flow – это инструмент для статической проверки типов, также разработанный Facebook. Он анализирует код на предмет частых ошибок несоответствия типа (например, неявное приведение типа или разыменование нулевого указателя).

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

Redux

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

Если вы работаете над простым проектом, то Redux, быть может, излишне усложнит работу, но для средних и крупных проектов он подойдет отлично. Эта библиотека стала настолько популярной, что некоторые проекты в Angular тоже используют её.

Все три перечисленных инструмента могут существенно облегчить жизнь разработчику: JSX и Flow помогают быстро находить ошибки, а Redux придает проекту четкую структуру.

Angular

У Angular тоже есть свои козыри: это TypeScript и RxJS.

TypeScript

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

У TypeScript есть еще одно, менее очевидное преимущество. На него большое влияние оказали Java и .NET, поэтому, если у ваших разработчиков есть опыт работы с этими языками, то TypeScript им покажется легче, чем JavaScript (обратите внимание, как мы незаметно перешли от общих характеристик инструмента к выгоде, которую он может принести лично вам). Несмотря на то, что Angular – первый фреймворк, который начал активно использовать TypeScript, в React его тоже можно применять.

RxJS

RxJS – это реактивная библиотека, которая позволяет более гибко управлять асинхронными операциями и событиями. RxJS совмещает шаблоны «Наблюдатель» (Observer) и «Итератор» (Iterator) и использует принципы функционального программирования. RxJS позволяет обрабатывать данные как непрерывный поток значений и применять к ним различные операции – отображение, фильтрацию, разделение или слияние.

Angular использует RxJS в HTTP-модуле, а также применяет эту библиотеку для внутренних задач. В ответ на HTTP-запрос RxJS возвращает объект Observable, а не обычный Promise. Как мы видим, RxJS предлагает широкий спектр возможностей. Но с другой стороны её достаточно сложно освоить: для этого нужно разобраться в различных видах объектов Observable и Subject, а также выучить сотни методов и операторов. Не слишком ли много мороки ради простых HTTP-запросов?

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

По моему опыту, TypeScript – это отличный инструмент, который облегчает эксплуатацию проектов. Особенно это касается проектов с большой базой кода и сложной доменной или бизнес-логикой. Код на TypeScript нагляднее и понятнее. Поскольку TypeScript используется в Angular, стоит надеяться, что все больше проектов перейдут на него. RxJS, с другой стороны, кажется полезной только в определенных случаях. Сто раз подумайте, прежде чем браться за эту библиотеку. Иначе вы рискуете чрезмерно усложнить проект.

Экосистема

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

Angular

Angular CLI

В современных фреймворках очень часто используется интерфейс командной строки (CLI). С его помощью вы можете загружать проект без необходимости самостоятельно настраивать сборку. В Angular это Angular CLI. Он создает и запускает проекты с помощью всего пары команд. Все скрипты, отвечающие за создание приложения, запуск сервера разработки и запуск тестов, скрыты в node_modules. Angular CLI также пригоден для генерации нового кода во время разработки. Благодаря всем этим возможностям создавать новые проекты невероятно легко.

Ionic 2

Ionic 2 – новая версия популярного фреймворка для разработки гибридных мобильных приложений. В нем есть веб-контейнер Cordova, интегрированный с Angular 2, и библиотека компонентов material design. В Ionic 2 вы легко настроите и создадите мобильное приложение. Это хороший выбор для тех, кому гибридные приложения нравятся больше нативных.

Компоненты material design

Если вы поклонник material design, вы будете рады узнать, что у Angular есть библиотека компонентов в таком стиле. Она пока на ранней стадии разработки и выглядит немного сыровато, но в последнее время в нее вносят много дополнений, так что будем надеятся, что скоро ситуация улучшится.

Angular universal

Angular universal – это модуль для создания проектов с поддержкой рендеринга на стороне сервера.

@ngrx/store

@ngrx/store – это библиотека управления состояниями для Angular, созданная по примеру Redux, где состояния изменяются чистыми редукторами. Так как инструмент интегрирован с RxJS, вы можете использовать Push-механизм обнаружения изменений для повышения производительности.

Масса других библиотек и инструментов есть в каталоге ништяков для Angular на GitHub.

React

Create react app

Create-react-app – это CLI-утилита, которая позволяет быстро начинать новые проекты в React. Как и в случае с Angular CLI эта утилита создаёт проект, запускает сервер разработки и собирает комплект. Create react app использует Jest, относительно новая среда для выполнения тестов, разработанная в Facebook для unit-тестирования. У Jest есть собственные интересные функции, плюс он поддерживает гибкое профилирование приложений с помощью переменных окружения, внутренних прокси для локальной разработки, Flow и другие функции.

Если хотите лучше разобраться в теме, прочитайте это краткое введение в create-reactive-app.

React Native

React Native – это разработанная в Facebook платформа для создания нативных мобильных приложений с помощью React. В отличие от Ionic, где создаются гибридные приложения, React Native выдает полностью нативный интерфейс. В React Native есть набор стандартных компонентов React, которые привязаны к их нативным аналогам. Также тут можно создавать собственные компоненты и связывать их с с нативным кодом, написанным на Objective-C, Java или Swift.

Material UI

Для React тоже существует библиотека компонентов material design. По сравнению с библиотекой для Angular, эта версия более зрелая и в ней больше компонентов.

Next.js

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

MobX

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

Storybook

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

Другие библиотеки и инструменты ищите в каталоге ништяков для React на GitHub.

Внедрение, период обучения и процесс разработки

Важным критерием выбора новой технологии является то, насколько легко ее освоить. Конечно, на выбор влияет более широкий круг факторов от прошлого опыта разработчика до общих знаний нужных концепций и шаблонов. Однако, мы все же сфокусируемся на том, что требуется изучить для работы в каждом из фреймворков. Предположим, что вы уже знаете ES6+ и разбираетесь во встроенных инструментах. Рассмотрим, что еще нужно освоить.

React

Первое, с чем вы столкнетесь в React – это JSX. Некоторым разработчикам на нем неудобно писать, но все же это не такой уж и сложный язык. Всего-то нужно знать выражения, которые по своей сути являются JavaScript, и особый синтаксис, похожий на HTML. Также вам придется научиться создавать компоненты, использовать параметры props для конфигурации и управлять внутренним состоянием. Новые логические структуры или циклы изучать не нужно, так как тут это самый обычный JavaScript.

Лучше всего начинать осваивать React с официального руководства. После этого возьмитесь за роутер. React router v4 поначалу покажется несколько сложным и необычным, но разобраться можно. Для работы в Redux придется изменить привычный взгляд на то, как выполняются знакомые задачи, и подстроиться под то, как это делается в библиотеке. Бесплатный видеокурс «Начинаем работать в Redux» быстро ознакомит вас с ключевыми понятиями.

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

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

Angular

При изучении Angular вы столкнетесь с еще большим количеством новых концепций, чем в случае с React. Во-первых, придется освоиться с TypeScript. Специалистам с опытом работы со статически типизированными языками, такими как Java или .NET, TypeScript может даже показаться проще и понятнее, чем JavaScript. Тем же, кто работал исключительно с JavaScript, будет посложнее.

Сам Angular можно изучать до бесконечности, начиная с базовых разделов типа модулей, внедрения зависимости, декораторов, компонентов, сервисов, каналов, шаблонов и директив, заканчивая более сложными темами (обнаружение изменений, зоны, AoT-компиляция и Rx.js). Все они описаны в документации. Rx.js – непростая тема сама по себе, поэтому читайте детальное описание на официальном сайте. На начальном уровне его использовать относительно просто, но чем сильнее углубляешься, тем тяжелее.

В целом мы полагаем, что входной барьер у Angular выше, чем у React. Само количество новых тем и понятий легко запутает новичка. И даже если вы уже не новичок, жизнь вряд ли будет казаться мёдом, ведь постоянно приходится думать об управлении подпиской Rx.js, производительности при обнаружении изменений, а еще и бананах в коробке (да, это реальный совет из документации). Сообщения об ошибке часто очень непонятно сформулированы, и приходится гуглить их и молиться, что найдется именно то, что нужно.

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

Фреймворки на практике

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

Во-первых, ответьте на эти вопросы применительно к вашему проекту и сопоставьте ответы с тем, что вы знаете о каждом фреймворке. Список вопросов, вероятно, можно дополнить, но для начала хватит и их:

  1. Насколько большой у вас проект?
  2. Как долго он будет поддерживаться?
  3. Функции четко определены заранее или это гибкий проект?
  4. Если все функции уже определены, какие вам нужны возможности?
  5. У вас сложная доменная модель и бизнес-логика?
  6. На каких платформах вы планируете работать? Веб, мобильное или десктопное приложение?
  7. Вам нужен рендеринг на сервере? Важно ли для проекта SEO?
  8. Будете ли вы обрабатывать много потоков событий в реальном времени?
  9. У вас большая команда?
  10. Насколько опытны ваши разработчики и какая у них квалификация?
  11. Есть ли какие-нибудь готовые библиотеки компонентов, которые вы бы хотели использовать?

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

Один фреймворк для всего?

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

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

Перевод статьи «React vs Angular: An In-depth Comparison» by Pavels Jelisejevs