Сравнение Ultimate JavaScript Frameworks: Angular vs React

Вопрос, который мне задают почти каждый день, заключается в том, с чего мне начать: с ReactJS или Angular? Однако, прежде чем я продолжу, позвольте мне дать вам отказ от ответственности.

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

Логический аргумент

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

Кривая обучения

Начнем с Ангуляра. Еще одно предупреждение: когда я говорю об Angular, я говорю об Angular 4, а не об AngularJS.

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

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

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

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

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

В отличие от Angular React не использует шаблоны. Он использует что-то, называемое расширением JSX или JavaScript, или расширением синтаксиса JavaScript, которое позволяет нам встраивать HTML в JavaScript. Поначалу это может показаться немного странным. Особенно, когда вас, вероятно, учили разделять разметку и JavaScript.

Думайте об этом, как о размещении HTML внутри JavaScript с несколькими различными изменениями: вы не можете использовать атрибут класса, и вы должны использовать имя класса.

Наконец, у нас есть Redux. React часто используется с Redux или Flux, которые являются менеджерами состояний уровня приложений. На мой взгляд, Redux чертовски сложно просто настроить его и изучить его концепции.

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

Функции	Реагировать	Угловой
Язык программирования	JavaScript	Машинопись
Структура кода	самоуверенный	Гибкий
Основная библиотека	Маленький	Очень большой
Шаблоны	JSX	HTML
Компетенция	Небольшие приложения	Крупномасштабные приложения

Победитель: ничья

Производительность

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

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

Переход с Angular 2 на Angular 4 под капотом сделал совсем немного для повышения производительности. Angular 4 работает лучше, чем Angular 2. Тем не менее, React по-прежнему выигрывает в отделе производительности.

Угловой против Реакта. Источник: Academind.com

Победитель: Реагировать

Функции

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

Функции	AngularJS	Реагировать
Дата запуска	2009	2013
Язык	Типскрипт, JavaScript	JavaScript
Доля рынка	0.3%	<0,1%
Модель	Да	Нет
Вид	Да	Да
Контроллер	Да	Нет
Кривая обучения	Сложный	Легкий
Шаблоны	Да	Нет
Отказ	Время выполнения	Время компиляции
Рендеринг на стороне обслуживания	Нет	Да
ДОМ	Да	Виртуальный
Мобильная поддержка	Да	Да
Рендеринг на стороне обслуживания	Нет	Да

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

Angular — это универсальный фреймворк. Он поставляется с компонентным маршрутизатором, реактивными расширениями для наблюдаемых, HTTP-клиентом, модулем формы для проверки, и этот список можно продолжить. Более того, он предлагает двустороннюю привязку данных, чего на самом деле не делает ни один другой фреймворк. Связать данные из представления с моделью очень просто с помощью директивы ng model.

Angular также поддерживает MVC (контроллер Model View) или, по крайней мере, другие аспекты этого шаблона проектирования. он также поставляется с функциями, которые позволяют легко реализовать тестирование: как модульное, так и сквозное тестирование. Angular содержит множество функций для создания интерфейсных приложений корпоративного уровня. React, с другой стороны, не включает в себя многого в своей основе. Тем не менее, некоторые вещи могут быть добавлены, чтобы дать ему функции, которые Angular включает в себя из коробки, а также некоторые дополнительные.

React использует очень мощный виртуальный DOM. Он создает свою собственную облегченную версию настоящего Дома и включает и обновляет только то, что необходимо, а не обновляет все целиком. Виртуальный DOM — главная причина невероятной скорости React.

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

Core React сложно поддерживать состояние на уровне приложения. Состояние компонента — это просто, но если вы хотите по-настоящему управлять состоянием на уровне приложения, вам понадобится Redux или Flux, которые, как я уже говорил ранее, чертовски запутаны для изучения. Внешние пакеты, которые часто используются, такие как новый маршрутизатор React версии 4, немного сложны для понимания, но они также очень эффективны, если научиться их запускать и настраивать. Есть много разных способов его использования. React не имеет основного HTTP-компонента, как Angular, но вы можете использовать Fetch или Axios, который является внешним HTTP-клиентом, а затем Enzyme популярен для аттестации React. Есть несколько различных пакетов, которые обычно используются с React, даже если они не являются частью реальной библиотеки.

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

Победитель: Угловой

Инструменты

Angular и React имеют несколько довольно приятных интерфейсов командной строки. Angular CLI и приложение Create React довольно хороши, и они действительно позволяют нам оптимизировать разработку. Angular CLI немного мощнее, потому что мы можем быстро создавать такие вещи, как компоненты и сервисы. Create React не может этого сделать. Вы должны создать все сами, включая файлы и базовую структуру. Обе системы используют веб-пакеты, имеют собственные серверы разработки с автоматической загрузкой и инструменты для компиляции и сборки. Очевидно, что у Angular есть дополнительная задача по транспиляции Typescript. В CLI есть скрипт для этого, когда мы запускаем ng serve. Все, что происходило за кадром. Для этого он использует что-то под названием TSC или Typescript Compiler, и у обоих также есть инструменты для тестирования.

Функции	Угловой	Реагировать
Интерфейс командной строки	Угловой интерфейс командной строки	Создать реакцию
Дополнительные задачи	Транспиляция машинописного текста	Никто
Тестирование	Жасмин и карма	Является

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

Они обе симпатичные даже в этом отделе.

Победитель: Угловой

Экосистема

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

Ionic — это популярный гибридный фреймворк, который представляет собой приложение Angular, работающее внутри собственной оболочки для мобильных приложений. Вы можете создавать мобильные приложения с помощью Angular. Гибридные приложения могут быть немного неуклюжими по сравнению с родными приложениями. Время от времени пользовательский опыт может быть не таким хорошим — не таким быстрым и отзывчивым. Среди различных гибридных фреймворков Ionic 3 — лучший. Существует также NativeScript, который позволяет нам создавать настоящие нативные приложения для iOS и Android с помощью Angular и JavaScript.

Функции	Угловой	Реагировать
Гибридная разработка приложений	ионный	*Не требуется
Разработка нативных приложений	Родной скрипт	Реагировать на родной
Рендеринг на стороне сервера	Угловой универсальный	ЧТО
Государственная библиотека управления	Магазин NgRx	Реакс Редукс, MobX
Библиотека пользовательского интерфейса материалов	Угловой материал	Материал-пользовательский интерфейс
Виртуальная реальность	Реактивный VR	ЧТО

Тем не менее, NativeScript не так хорош, как React Native от Facebook, по крайней мере, на данный момент. Angular также имеет библиотеку компонентов дизайна материалов, если вы являетесь поклонником дизайна материалов. Angular Universal — это исходный проект, который можно использовать для рендеринга Angular на стороне сервера. Также есть хранилище NgRx, представляющее собой библиотеку управления состоянием, вдохновленную Reax redux. Он основан на состоянии, измененном одноранговыми редукторами. Он также имеет интеграцию с расширениями Reactive.

Вы бы заметили. Однажды один из них делает что-то, другой копирует другим способом. React и Angular стали фреймворками Microsoft и Apple для JavaScript.

У React довольно развитая экосистема. Он имеет родной React, который популярен. Это лучший способ создавать мобильные приложения с помощью веб-технологий. React Native работает быстро, и многие приложения, если они созданы правильно, не уступают нативным приложениям, созданным на Swift или Java. В React есть библиотека дизайна материалов под названием Material-UI, которая очень похожа на компонент дизайна материалов Angular, но более зрелая. JS — это фреймворк для рендеринга серверных приложений React. Он стремится сделать это максимально простым способом, поэтому его можно сравнить с Angular Universal. MobX — это еще один способ управления состоянием. Он работает немного иначе, чем redux. Он предоставляет набор декораторов для определения наблюдаемых и наблюдателей, а также вводит реактивную логику в ваше состояние.

Storybook — это среда разработки для React. Он позволяет просматривать библиотеку компонентов, просматривать различные состояния каждого компонента, а также интерактивно разрабатывать и тестировать компоненты. Reactive VR превращает React в виртуальную реальность. Рабочий стол React — это библиотека JavaScript, созданная поверх библиотеки Reacts, которая предположительно обеспечивает работу с рабочим столом в Интернете, включая множество компонентов macOS и Windows 10. Экосистема React чрезвычайно большая и мощная. React проникает во все аспекты технологии и является явным победителем.

Победитель: Реагировать

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

	AngularJS	Реагировать
Основные разработчики	Google	Фейсбук+Инстаграм
Возраст	6Год	2 года
Расширяемость	Да	Да
Скорость*	1,35 секунды	310 миллисекунд
ДОМ	Браузер	виртуальный; только перерисовывает измененные данные с помощью механизма исправления
Архитектура	Полная структура MVC	Просто компонент представления
Кривая обучения	Трудно сначала; требует знания конкретной концепции, такой как директивы DOM, фильтры и фабрики.	Легче начать; содержит упрощенный API и синтаксис
Структура и компоненты	HTML, JS и CSS	Такой же; но может интегрировать HTML с JS, используя JSX

Итог: ничья

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

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