React vs Angular, что выбрать?

React vs Angular, что выбрать?

React vs Angular, что выбрать?

Чтобы сэкономить вам время и не вводить в заблуждение, отвечу сразу – в этой статье не будет четкого ответа какой фреймворк лучше. Но и сотни других статей с подобными тайтлами также вам об этом не скажут. Вы спросите почему? Ответ зависит от широкого круга факторов, которые делают определенную технологию более или менее подходящей для вашей среды и использования.
Поскольку мы не можем напрямую ответить на этот вопрос, то попытаемся сделать кое-что другое. Мы сравним Angular (2+, а не старый AngularJS) и React, чтобы продемонстрировать, как вы можете решать задачи этими фреймворками, адаптируя их к своей среде. Старый подход гласит «дай не рыбу, а удочку», чтобы человек мог самостоятельно принимать решения. Таким образом, когда React и Angular будут заменены СамымЛучшимФреймворком.js через год, на основе этой статьи вы сможете воссоздать тот же самый ход мысли еще раз и сравнить их.

Критерии выбора фреймворка. Откуда начнем?

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

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

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

  • Смогу ли я и мои коллеги быстро и легко его изучить?
  • Можно ли его вписать в мой проект?
  • Какой есть опыт внедрения данного фреймворка у меня или других разработчиков?

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

Критерий зрелости

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

Оба рассматриваемых фреймворка имеют большие сообщества и стабильную поддержку, поэтому мы можем быть уверены в них обоих.

React

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

Angular

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

Особенности React и Angular

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

Фичи Angular

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

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

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

Фичи React

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

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

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

  • React-router для маршрутизации
  • Fetch (или axios) для HTTP-запросов
  • Широкий спектр методов для инкапсуляции CSS
  • Enzyme для утилит юнит-тестирования

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

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

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

JSX

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

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

Flow

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

Redux

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 позволяет рассматривать что-либо как непрерывный поток значений и выполнять различные операции над ним, такие как отображение, фильтрация, разделение (splitting) или слияние (merging).
RxJS библиотека была принята в Angular в их HTTP-модуле и внутреннего использования. Когда вы выполняете HTTP-запрос, он возвращает Observable вместо обычного Promise. Хотя эта библиотека чрезвычайно мощная и, как следствие, сложная. Чтобы овладеть этой библиотекой, вам нужно знать, как работают типы в Observables, Subjects, а также около сотни методов и операторов. И, кажется, это немного избыточно, чтобы просто сделать HTTP-запрос!
RxJS полезен, когда вы много работаете с непрерывными потоками данных, такими как веб-сокеты, но RxJS сильно усложняет жизнь в задачах другого рода. Во всяком случае, при работе с Angular вам нужно изучить его, по крайней мере, на базовом уровне.
Окей, TypeScript это отличный инструмент для улучшения рефакторинга наших проектов, особенно с большим количеством кода или сложной бизнес-логикой. Код, написанный на языке TypeScript, информативен и достаточно прост в использовании. Поскольку TypeScript был принят в Angular, мы надеемся увидеть еще больше проектов, использующих его. С другой стороны, RxJS, по-видимому, только полезен в некоторых случаях и должен приниматься с осторожностью. В противном случае проект будет усложняться без веских на то причин.

Экосистема фреймворков

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

Angular CLI

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

Ionic 2

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

Компоненты на Material дизайне

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

Angular universal

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

React экосистема

Create React App

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

React Native

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

Material UI

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

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

MobX

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

Storybook

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

Адаптация технологий и простота изучения

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

Первое, с чего стоит начать это JSX. Возможно для некоторых разработчиков JSX покажется странным, однако он не потребует от вас больших усилий в применении; Простые выражения, которые на самом деле являются JavaScript и синтаксис, смахивающий на HTML. Вам также необходимо научиться делать компоненты и использовать конфиги для настройки и управления. Вам не нужно изучать новые логические структуры или циклы, поскольку этот тот же самый JavaScript.
Официальный гайд – это лучший старт для изучения React. Как только вы закончите с документацией, познакомьтесь с react-router. React router v4 может быть немного сложным и нетрадиционным, но не беспокойтесь об этом. Использование Redux потребует изменения парадигмы мышления, чтобы понять, как выполнить уже знакомые задачи новым способом. В зависимости от размера и сложности вашего проекта вам нужно будет найти и изучить дополнительные библиотеки и это может оказаться сложной задачей, но после этого все должно пойти намного легче!

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

Angular не для всех?

В Angular вам прежде всего нужно будет понять TypeScript. Для программистов, обладающих опытом в статически типизированных языках, таких как Java или .NET, это может быть проще, чем для чистых JavaScript разработчиков.
Сама инфраструктура богата темами, которые можно изучить, начиная с базовых, таких как модули, инъекции зависимостей, декораторы, компоненты, сервисы, шаблоны и директивы, до более сложных тем, таких как обнаружение изменений, зоны, компиляция AoT и Rx.js. Все они описаны в документации. Rx.js является серьезной темой сам по себе и подробно описан на официальном сайте. На базовом уровне он кажется простым, но при глубоком изучении Rx.js становиться достаточно сложным для понимания.
В целом мы заметили, что входной барьер для Angular выше, чем для React. Огромное количество новых концепций запутывает новичков. И даже после того, как вы начали изучать Angular, обучение может усложниться, поскольку вам нужно иметь в виду такие вещи, как управление подпиской Rx.js, изменение производительности обнаружения и бананы в коробке (да, это фактический совет из документации). Очень часто в Angular можно столкнуться с ошибками, которые сильно затрудняют работу и понимание фреймворка, поэтому приходится искать решение ошибок и молиться за точное совпадение.
Может показаться, что мы на стороне React’a и это действительно так. У нас был опыт внедрения новых разработчиков в проекты Angular и React, сопоставимые по размеру и сложности, и на React разработчики «въезжали» лучше. Но, как я сказал ранее, всё зависит от множества факторов и конкретной поставленной задачи.

Вместо заключения

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

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

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

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

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

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *