Изготовление сайтов в Лисичанске, ЛНР. React vs Angular: подробное сравнение

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

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

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

Два рыцаря соревнуются с логотипами React и Angular на щитах.

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

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

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

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

Насколько это зрело и кто за этим стоит?

Какие особенности у него есть?

Какую архитектуру, парадигмы разработки и шаблоны он использует?

Что представляет собой экосистема вокруг него?

Вопросы для самоанализа:

Смогу ли я и мои коллеги легко освоить этот инструмент?

Подходит ли он для моего проекта?

Каков опыт разработчиков?

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

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

Зрелость

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

Инструмент может содержать ошибки и быть нестабильным.

Поставщик может неожиданно отказаться от него.

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

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

Реагировать

React разработан и поддерживается Facebook и используется в их продуктах, включая Instagram и WhatsApp. Он существует примерно с 2013 года, так что он не совсем новый. Это также один из самых популярных проектов на GitHub с более чем 150 000 звезд на момент написания статьи. Среди других известных компаний, использующих React, — Airbnb, Uber, Netflix, Dropbox и Atlassian. Звучит неплохо.

Угловой

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

Функции

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

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

Угловой

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

внедрение зависимости

шаблоны, основанные на расширенной версии HTML

компоненты на основе классов с хуками жизненного цикла

маршрутизация, предоставляемая@angular/router

Ajax-запросы с использованием@angular/common/http

@angular/formsдля строительных форм

компонентная инкапсуляция CSS

XSS-защита

разделение кода и ленивая загрузка

средство запуска тестов, фреймворк и утилиты для модульного тестирования.

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

Реагировать

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

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

компоненты на основе классов с хуками жизненного цикла или более простые функциональные компоненты

управление состоянием с помощью setState и хуков.

XSS-защита

разделение кода и ленивая загрузка

границы обработки ошибок

утилиты для модульного тестирования компонентов

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

React-маршрутизатор для маршрутизации

Fetch (или axios) для HTTP-запросов

широкий спектр методов инкапсуляции CSS

Enzyme или React Testing Library для дополнительных утилит модульного тестирования

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

Языки, парадигмы и модели

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

Реагировать

Когда думаешь о React, на ум приходят несколько важных вещей: JSX, компоненты и хуки.

JSX

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

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

Компоненты

В React вы можете определять компоненты, используя функции и классы.

Компоненты класса позволяют вам писать свой код с использованием классов ES и структурировать логику компонента в методы. Они также позволяют использовать традиционные методы жизненного цикла React для запуска пользовательской логики при монтировании, обновлении, размонтировании компонента и т. д. Несмотря на то, что эту нотацию легче понять людям, знакомым с ООП-программированием, нужно знать все тонкие нюансы, которые есть в JS — например, как thisработает, и не забывать привязывать обработчики событий.

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

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

Крючки

Хуки — это новая функция React, представленная в версии 16.8. Это функции, которые позволяют вам классифицировать функции состояния компонента и метода жизненного цикла в функциональных компонентах. React предоставляет два хука: useStateдля управления состоянием и useEffectдля создания побочных эффектов, таких как загрузка данных или ручное редактирование DOM.

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

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

Угловой

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

Основные концепции

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

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

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

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

Angular интенсивно использует классы, а также такие концепции, как DI, которые менее популярны в мире фронтенд-разработки, но должны быть знакомы всем, у кого есть опыт бэкенд-разработки.

Машинопись

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

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

Также возможно (и разумно) использовать TypeScript вместе с React.

RxJS

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

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

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

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

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

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

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

Экосистема

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

Угловой

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

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

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

Библиотеки компонентов

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

ng-bootstrap для использования виджетов Bootstrap

Material UI для компонентов Google Material Design

NG-ZORRO — библиотека компонентов, реализующая спецификацию Ant Design.

Onsen UI для Angular — библиотека компонентов для мобильных приложений.

PrimeNG, коллекция богатых компонентов Angular

Библиотеки государственного управления

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

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

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

Akita — новичок в этом блоке, который позволяет нам хранить состояние в нескольких хранилищах, применять неизменяемые обновления и использовать RxJS для запроса и потоковой передачи значений.

Ионная структура

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

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

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

Предсказание

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

Комподок

Compodoc — генератор статической документации для Angular. Подобно другим генераторам документации, он может создавать статическую HTML-документацию на основе комментариев TSDoc в вашем коде. Однако Compodoc поставляется с удобными функциями специально для Angular, такими как просмотр структуры вашего модуля, маршрутов и классификация классов на компоненты, службы и т. д.

Ngx-админ

Ngx-admin — это популярный фреймворк для создания пользовательских информационных панелей с помощью Angular и использования Nebular или Angular Material в качестве библиотек компонентов.

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

Реагировать

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

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

Библиотеки компонентов

Подобно Angular, React предлагает широкий выбор библиотек компонентов:

муравьиный дизайн

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

реакция-бутстрап

Семантический интерфейс

Пользовательский интерфейс Onsen, оптимизированный для мобильных приложений

Blueprint для создания настольных приложений

Библиотеки государственного управления

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

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

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

Библиотеки стилей

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

Styled Components, библиотека, которая позволяет создавать компоненты React с примененным стилем, а также стилизовать ваши компоненты.

Модули CSS, которые позволяют импортировать файлы CSS и генерировать уникальные имена изолированных классов для ссылки на стили.

Emotion, которая объединяет подходы Styled Components и CSS Modules в единую библиотеку.

PropTypes

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

Реагировать на родной

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

Next.js

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

Реагировать администратор

React-admin — это фреймворк для создания SPA-приложений в стиле CRUD поверх существующих API-интерфейсов REST или GraphQL. Он поставляется с удобными функциями, такими как пользовательский интерфейс, созданный с помощью Material Design, интернационализация, тематика, проверка данных и многое другое.

Среды разработки пользовательского интерфейса

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

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

Мы также упоминали MDX в этой статье. Это позволяет вам оживить ваши файлы Markdown, добавив интерактивные компоненты JSX.

Помощники по тестированию

Тестирование компонентов пользовательского интерфейса обычно включает в себя их визуализацию в среде песочницы, моделирование взаимодействия с пользователем и проверку выходных результатов. Эти рутинные задачи можно упростить, используя соответствующие помощники по тестированию. Для Angular это встроенный TestBed. Для React есть два популярных кандидата: Enzyme и Testing Library.

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

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

Гэтсби

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

Реагировать 360

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

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

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

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

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

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

Реагировать

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

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

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

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

Хотя TypeScript не требуется для React, мы настоятельно рекомендуем вам оценить и внедрить его в свои проекты.

Угловой

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

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

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

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

Популярность и отзывы сообщества

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

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

В отчете о состоянии JavaScript за 2019 год React указан как самый популярный интерфейсный фреймворк, а Angular занимает предпоследнее место, уступая только Ember. 71% участников сказали, что использовали React и будут использовать его снова. Только 21% участников сказали то же самое об Angular, а 35% сказали, что использовали Angular и не будут использовать его снова (только 8% сказали то же самое о React).

Hacker News Hiring Trends на 2019 год называет React самой востребованной технологией среди сотрудников уже более 31 месяца подряд.

Stack Overflow считает React вторым по популярности фреймворком после jQuery. Angular указан как третий. Их отчет о самых любимых, ужасных и разыскиваемых веб-фреймворках рисует картину, аналогичную другим.

Отчет о состоянии экосистемы разработчиков в 2020 году, подготовленный Jet Brains, подтверждает позицию React как самой популярной среды разработки интерфейсов.

Принятие решения

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

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

Насколько велик проект?

Как долго он будет поддерживаться?

Все ли функции четко определены заранее или предполагается, что они будут гибкими?

Если все функции уже определены, какие возможности вам потребуются?

Модель предметной области и бизнес-логика сложны?

На какие платформы вы ориентируетесь? Веб, мобильный, десктоп?

Вам нужен серверный рендеринг? Важно ли SEO?

Будете ли вы обрабатывать множество потоков событий в реальном времени?

Насколько велика ваша команда?

Насколько опытны ваши разработчики и каков их опыт?

Есть ли готовые библиотеки компонентов, которые вы хотели бы использовать?

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

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

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