Статьи

React vs Angular: подробное сравнение

Эта статья была обновлена ​​30 января 2019 года, чтобы отразить текущее состояние экосистем Angular и React.

Я должен выбрать Angular или React? У каждого фреймворка есть что предложить, и нелегко выбирать между ними. Независимо от того, являетесь ли вы новичком, пытающимся понять, с чего начать, фрилансером, выбирающим основу для вашего следующего проекта, или архитектором корпоративного уровня, планирующим стратегическое видение вашей компании, вы, скорее всего, выиграете от наличия образованного взгляда на Эта тема.

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

Поскольку мы не можем ответить на вопрос напрямую, мы попробуем что-то еще. Мы сравним Angular и React, чтобы продемонстрировать, как вы можете самостоятельно подойти к проблеме сравнения любых двух структур и адаптировать их к вашей среде. Вы знаете, старый подход «научить человека ловить рыбу». Таким образом, когда оба будут заменены на BetterFramework.js через год, вы сможете воссоздать один и тот же ход мыслей еще раз.

Борьба двух рыцарей с логотипами React и Angular на щитах

Когда начать?

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

Вопросы по самому инструменту:

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

Вопросы для саморефлексии:

  • Смогу ли я и мои коллеги легко освоить этот инструмент?
  • Это хорошо вписывается в мой проект?
  • На что похож опыт разработчика?

Используя этот набор вопросов, вы можете приступить к оценке любого инструмента, и мы также будем основывать наше сравнение React и Angular.

Есть еще одна вещь, которую мы должны принять во внимание. Строго говоря, сравнивать Angular с React не совсем справедливо, поскольку Angular — это полноценная, многофункциональная среда, а React — просто библиотека компонентов UI. Несмотря ни на что, мы поговорим о React в сочетании с некоторыми библиотеками, часто используемыми с ним.

зрелость

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

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

И React, и Angular происходят из хороших семей, поэтому, похоже, мы можем быть уверены в этом.

реагировать

React разработан и поддерживается Facebook и используется в их собственных продуктах, включая Instagram и WhatsApp . Он существует уже около пяти лет , поэтому он не совсем новый. Это также один из самых популярных проектов на GitHub, на момент написания которого около 119 000 звезд. Звучит неплохо.

угловатый

Angular был меньше, чем React, но это не новый ребенок в блоке. Он поддерживается Google и, как отметил Игорь Минар, используется в более чем 600 сотнях приложений в Google, таких как Firebase Console, Google Analytics, Google Express, Google Cloud Platform и других.

Характеристики

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

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

угловатый

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

  • Внедрение зависимости
  • Шаблоны, основанные на расширенной версии HTML
  • Маршрутизация, предоставляемая @angular/router
  • Ajax-запросы с использованием @angular/common/http
  • @angular/forms
  • Компонент CSS инкапсуляция
  • XSS защита
  • Утилиты для юнит-тестирования компонентов.

Некоторые из этих функций встроены в ядро ​​фреймворка, и у вас нет возможности их не использовать. Это требует, чтобы разработчики были знакомы с такими функциями, как внедрение зависимостей, для создания даже небольшого приложения Angular. Другие функции, такие как HTTP-клиент или формы, не являются обязательными и могут быть добавлены по мере необходимости.

реагировать

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

  • Нет внедрения зависимости
  • Вместо классических шаблонов у него есть JSX, XML-подобный язык, построенный поверх JavaScript
  • Управление состоянием с использованием setState
  • XSS защита
  • Утилиты для юнит-тестирования компонентов.

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

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

Языки, парадигмы и паттерны

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

реагировать

При рассмотрении React приходит на ум несколько важных вещей: JSX, функциональные компоненты, управление состоянием, PropTypes и Flow.

JSX

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

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

Функциональные компоненты

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

Ситуация изменится, когда предложение о хуках будет завершено и выпущено. Это позволит функциональным компонентам иметь состояние и использовать другие функции компонентов класса, такие как ловушки жизненного цикла. Тогда мы сможем писать чисто функциональные приложения React.

Государственное управление

Концепция государственного управления важна для обеих систем, и React предлагает несколько подходов. Каждый компонент может иметь свое собственное состояние, так что вы можете использовать его для создания компонентов с состоянием для хранения состояния части приложения. Это известно как шаблон состояния подъема . Это, однако, становится непрактичным, так как вам нужно хранить глобальное состояние, требуемое в разных частях приложения, а также вручную передавать данные по различным уровням дерева компонентов. Чтобы смягчить это, React 16.3 ввел Context API, который позволяет сделать данные доступными на всех уровнях дерева компонентов, не передавая их явно. Контексты не хранят состояние сами, они только предоставляют данные, но если вы оберните их в компонент с состоянием, вы можете реализовать удобный способ хранения состояния, поддерживаемый изначально.

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

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

PropTypes

PropTypes — это дополнительная функция React, которая может принести дополнительные меры безопасности, если вы не используете Flow или TypeScript. Это позволяет вам определить набор валидаторов для реквизитов компонентов, которые будут проверять их значения во время выполнения. Начиная с React 15.5 типы пропов были перенесены в отдельную библиотеку типов пропов и теперь являются полностью необязательными. Учитывая его преимущества, мы советуем использовать его для повышения надежности вашего приложения.

поток

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

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

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

угловатый

В Angular также есть несколько интересных вещей, таких как TypeScript, RxJS и Angular Elements, а также собственный подход к управлению состоянием.

Машинопись

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

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

RxJS

RxJS — это библиотека реактивного программирования, которая позволяет более гибко обрабатывать асинхронные операции и события. Это комбинация шаблонов Observer и Iterator, смешанных с функциональным программированием. RxJS позволяет вам рассматривать что-либо как непрерывный поток значений и выполнять с ним различные операции, такие как отображение, фильтрация, разбиение или слияние.

Библиотека была принята Angular в своем модуле HTTP, а также для внутреннего использования. Когда вы выполняете HTTP-запрос, он возвращает Observable вместо обычного Promise. Такой подход открывает двери для интересных возможностей, таких как возможность отменить запрос, повторить его несколько раз или работать с непрерывными потоками данных, такими как веб-сокеты. Но это только поверхность. Чтобы освоить RxJS, вам нужно разбираться в различных типах Observables, Subjects, а также около ста методов и операторов .

Государственное управление

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

NgRx , самая популярная библиотека управления состояниями для Angular, может упростить задачу. Он вдохновлен Redux, но также использует RxJS для просмотра и пересчета данных в штате. Использование NgRx может помочь вам обеспечить понятный однонаправленный поток данных, а также уменьшить сцепление в вашем коде.

NGXS — еще одна библиотека управления состоянием, вдохновленная Redux. В отличие от NgRx, NGXS стремится сократить стандартный код, используя современные функции TypeScript и улучшить кривую обучения и общий опыт разработки.

Угловые элементы

Угловые элементы обеспечивают способ упаковки угловых компонентов в качестве пользовательских элементов. Пользовательские элементы, также известные как веб-компоненты, представляют собой стандартизированный не зависящий от фреймворка способ создания пользовательских HTML-элементов, управляемый вашим кодом JavaScript. Как только вы определите такой элемент и добавите его в реестр браузера, он будет автоматически отображаться везде, где он используется в HTML. Angular элементы предоставляют API, который создает необходимую оболочку для реализации API пользовательского компонента и заставляет его работать с механизмом обнаружения изменений Angular. Этот механизм можно использовать для встраивания других компонентов или целых приложений Angular в ваше хост-приложение, потенциально написанное в другой среде с другим циклом разработки.

Мы обнаружили, что TypeScript является отличным инструментом для улучшения удобства сопровождения наших проектов, особенно проектов с большой кодовой базой или сложной предметной / бизнес-логикой. Код, написанный на TypeScript, является более наглядным и легким для понимания. RxJS представляет новые способы управления потоком данных в вашем проекте, но требует от вас хорошего понимания предмета. В противном случае это может привести к нежелательной сложности вашего проекта. Угловые элементы имеют потенциал для повторного использования угловых компонентов, и интересно посмотреть, как это будет развиваться в будущем.

экосистема

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

угловатый

Угловой CLI

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

Angular представляет интересный новый способ управления зависимостями в вашем проекте. При использовании ng add Например, когда вы run ng add @angular/material Это делается с использованием угловых схем . Схемы — это инструмент рабочего процесса, который позволяет библиотекам вносить изменения в вашу базу кода. Это означает, что авторы библиотеки могут предоставить автоматические способы решения несовместимых проблем, с которыми вы можете столкнуться при установке новой версии.

Ionic Framework

Ionic — популярная платформа для разработки гибридных мобильных приложений. Он предоставляет контейнер Cordova, который прекрасно интегрируется с Angular, и симпатичную библиотеку компонентов. Используя его, вы можете легко настроить и создать мобильное приложение. Если вы предпочитаете гибридное приложение, а не нативное, это хороший выбор.

Угловой материал

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

Угловой универсальный

Angular universal — это проект, который объединяет различные инструменты для обеспечения рендеринга на стороне сервера для приложений Angular. Он интегрирован с Angular CLI и поддерживает ряд сред Node.js, таких как express и hapi, а также ядро ​​.NET.

гадание

Augury — это расширение браузера для Chrome и Firefox, которое помогает отлаживать приложения Angular, работающие в режиме разработки. Вы можете использовать его для изучения дерева компонентов, отслеживания изменений и оптимизации проблем с производительностью.

В списке Awesome Angular есть множество других библиотек и инструментов.

реагировать

Создать приложение React

Create React App — это утилита CLI для быстрой установки новых проектов. Как и Angular CLI, он позволяет вам генерировать новый проект, запускать приложение в режиме разработки или создавать производственный пакет. Он использует Jest для модульного тестирования, поддерживает профилирование приложений с использованием переменных среды, внутренние прокси-серверы для локальной разработки, Flow и TypeScript, Sass, PostCSS и ряд других функций.

React Native

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

Пользовательский интерфейс материала

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

Next.js

Next.js — это инфраструктура для рендеринга приложений React на стороне сервера. Он предоставляет гибкий способ полностью или частично отобразить ваше приложение на сервере, вернуть результат клиенту и продолжить в браузере. Он пытается упростить сложную задачу создания универсальных приложений, поэтому настройка должна быть максимально простой, с минимальным количеством новых примитивов и требований к структуре вашего проекта.

В списке Awesome React доступно множество других библиотек и инструментов.

Гэтсби

Gatsby — это генератор статических сайтов, использующий React.js. Это позволяет вам использовать GraphQL для запроса данных для ваших сайтов, определенных в markdown, YAML, JSON, внешних API, а также в популярных системах управления контентом.

Реакт 360

React 360 — это библиотека для создания приложений виртуальной реальности для браузеров. Он предоставляет декларативный React API, который построен на основе API-интерфейсов браузера WebGL и WebVR, что упрощает создание 360 VR-приложений.

Инструменты разработчика React

React Dev Tools — это расширение браузера для отладки приложений React, которое позволяет вам просматривать дерево компонентов React и видеть их свойства и состояние.

Принятие, кривая обучения и опыт разработки

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

реагировать

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

Официальный учебник является отличным местом для начала изучения React. Как только вы закончите с этим, ознакомьтесь с маршрутизатором . React Router v4 может быть немного сложным и нетрадиционным, но не о чем беспокоиться. В зависимости от размера, сложности и требований вашего проекта вам нужно будет найти и изучить некоторые дополнительные библиотеки, и это может быть сложной задачей, но после этого все должно быть гладко.

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

угловатый

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

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

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

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

Помещение в контекст

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

Чтобы начать, попробуйте ответить на эти вопросы о своем проекте, а когда вы это сделаете, сопоставьте ответы с тем, что вы узнали о двух платформах. Этот список может быть неполным, но его должно быть достаточно, чтобы вы начали:

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

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

Одна структура, чтобы управлять ими всеми?

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

Эта статья была рецензирована Юргеном Ван де Моером и Джоан Инь . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!