Abr@X@bra.ru
React vs Angular: подробное сравнение

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

18.05.2017
1244
Должен ли я выбрать Angular или React? Сегодняшний полярный ландшафт JavaScript-фреймворков заставил многих разработчиков найти сторонников в этой дискуссии. Независимо от того, являетесь ли вы новичком, пытающимся выяснить, с чего начать, фрилансер, выбирающий структуру для вашего следующего проекта, или архитектор корпоративного уровня, планирующий стратегическое видение для вашей компании, вы, вероятно, извлечете выгоду из наличия образованного представления об этом в этом посте.

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

Поскольку мы не можем напрямую ответить на этот вопрос, мы попытаемся сделать что-то еще. Мы сравним Angular (2+, а не старый AngularJS) и React, чтобы продемонстрировать, как вы можете подойти к проблеме сравнения любых двух структур в структурированной манере по своему усмотрению и приспособить ее к своей среде. 

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

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

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

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

Возраст

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

React

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

Angular

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

Особенности

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

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

Angular

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

  • Внедрение зависимости;
  • Шаблоны на основе расширенной версии HTML;
  • Маршрутизация, обеспечиваемая @ angular / router;
  • Запросы Ajax с помощью @ angular / http;
  • @ Угловые / формы для строительных форм;
  • Инкапсуляция компонентного CSS;
  • XSS-защита;
  • Утилиты для компонентов модульного тестирования.
Удобство использования всех этих функций очень удобно, когда вы не хотите тратить время на сбор библиотек самостоятельно. Однако это также означает, что вы застряли с некоторыми из них, даже если они вам не нужны. И их замена обычно требует дополнительных усилий. Например, мы считаем, что для небольших проектов, имеющих систему DI, создается больше накладных расходов, чем пользы, поскольку ее можно эффективно заменить на импорт.

React

С React вы начинаете с более минималистичного подхода. Если мы смотрим только на React, вот что у нас есть:
  • Отсутствие внедрения зависимостей;
  • Вместо классических шаблонов у него есть JSX, XML-подобный язык, построенный поверх JavaScript;
  • XSS-защита;
Утилиты для компонентов модульного тестирования.
Это означает, что у вас есть свобода выбора дополнительных библиотек для добавления в зависимости от ваших потребностей. Плохо то, что вы на самом деле должны сами выбирать этот выбор. Некоторые из популярных библиотек, которые часто используются вместе с React:
  • React-router для маршрутизации.
  • Fetch (или axios) для HTTP-запросов;
  • Широкий спектр методов инкапсуляции CSS;
  • Фермент для дополнительных утилит тестирования модулей.
Это дает нам свободу выбора собственных библиотек. Также дает нам возможность адаптировать наш стек к конкретным требованиям каждого проекта.

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

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

React

При рассмотрении React: JSX, Flow и Redux возникает несколько важных моментов.

JSX

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

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

Flow

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

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

Redux

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

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

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

Angular

Angular имеет несколько интересных вещей в рукаве, а именно TypeScript и RxJS.

TypeScript

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. Хотя эта библиотека является чрезвычайно мощной, она также довольно сложна. Чтобы справиться с этим, вам нужно знать около сотни методов и операторов. Да, похоже, что это слишком много для того, чтобы делать HTTP-запросы!

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

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

Экосистема

Самое замечательное в open source framework - это количество инструментов, созданных вокруг них. Иногда эти инструменты еще более полезны, чем сама инфраструктура. Давайте посмотрим на некоторые из наиболее популярных инструментов и библиотек, связанных с каждой инфраструктурой.

Angular

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

Ionic 2

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

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

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

Angular universal

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

@ Ngrx / store

@ Ngrx / store - библиотека управления состоянием для Angular, созданная Redux, основанная на состоянии, мутированном чистыми редюсерами. Его интеграция с RxJS позволяет использовать стратегию обнаружения изменений для повышения производительности.

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

React

Create-reactive-app

Create-reactive-app - это утилита CLI для React, позволяющая быстро создавать новые проекты. Подобно Angular CLI, он позволяет вам создавать новый проект, запускать сервер для разработки. Он использует Jest, относительно новый тестовый проект от Facebook, для модульного тестирования, у которого есть некоторые приятные особенности. Он также поддерживает гибкое профилирование приложений с использованием переменных, бэкэнд-прокси для локальной разработки, потоков и других функций. Прочтите это краткое введение в create-reactive-app для получения дополнительной информации.

React Native

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

Material UI

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

Next.js

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

MobX

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

Storybook

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

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

Обучение и развитие

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

React

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

Официальное руководство (на русском языке) - отличное место для начала обучения React. После этого ознакомьтесь с React Router. React Router v4 может быть немного сложным и нетрадиционным, но беспокоиться не о чем. Использование Redux потребует изменения парадигмы, чтобы научиться выполнять уже знакомые задачи в соответствии с рекомендациями библиотеки. Бесплатный курс Getting Started with Redux может быстро познакомить вас с основными концепциями. В зависимости от размера и сложности вашего проекта вам нужно найти и изучить некоторые дополнительные библиотеки, и это может быть сложная часть, но после этого все должно быть понятно.

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

Angular

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

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

Может показаться, что мы выступаем за React здесь, и мы определенно это делаем. 

Ввод

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

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

Основа для правильного старта

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


React, Angular
Читайте также:
Курс по React JS #3. JSX

Курс по React JS #3. JSX

В прошлом выпуске уроков по React JS, мы создавали React элементы с помощью метода React.createElement. Таким способом м...
Читать
Курс по React JS #2. Средства разработчика

Курс по React JS #2. Средства разработчика

Продолжаем изучать React JS. В этом посте я расскажу как установить и настроить средства разработчика, чтобы процесс...
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать