Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Angular vs. React: Сравнение 7 Основных характеристик

by
Length:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Angular vs React

Angular vs. React - это популярная дискуссия среди разработчиков JavaScript, чаще всего, обсуждение приводит к смещению в сторону одной технологии или другой. Разработанные Google и Facebook соответственно, Angular и React - это две популярные технологии, используемые для создания интерактивных одностраничных приложений.

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

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

Фреймворк vs. Библиотека

Angular является фреймворком, а React - это библиотека.

Так что это значит? React сам по себе не позволит создать веб-приложение, поскольку он предназначен для создания представлений (следовательно, это «V» в MVC). Что может сделать React, так это создать компонентные представления, для которых данные могут передаваться дочерним представлениям. Чтобы заполнить эту пустоту, Facebook разработал Flux, который является архитектурным шаблоном, который дополняет React. Flux архитектура в сочетании с React обеспечивает следующий сценарий:

  1. Пользователь нажимает на элемент React.
  2. Действие активируется. Это действие отправляется в Store через библиотеку Dispatcher.
  3. Хранилище отслеживает состояние приложения и методы извлечения данных. Любое обновление состояния отражается в представлениях, и это помогает сохранить соответствие представлений с состоянием приложения.

Не понятно? Эта иллюстрация должна помочь разобраться в этом.

An image that depicts how the Flux architecture complements React
Flux дополняет React и реализует концепцию однонаправленного потока данных.
Angular является фреймворком для создания клиентских приложений.

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

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

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

Компонентный подход

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

Что такое компоненты? В Angular компоненты - это классы TypeScript, на которых над ними помещен декоратор @Component. Более того, внутри этих декораторов мы можем определить, какие Angular вызывает метаданные, включая шаблон, стили, селектор и т.д.

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

The architecture of Angular
Архитектура Angular. Компонент в центре, и все остальное вращается вокруг него.

Совместное использование данных между компонентами возможно с помощью вложенных компонентов, как показано ниже.

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

Впредь мы будем придерживаться стандартов ES6 для составления компонентов, потому что это то, что рекомендует Facebook. Каждый компонент React принимает произвольное количество входов, которые хранятся внутри объекта с именем props.

Он также имеет метод render, и, как следует из названия, этот метод определяет, что будет отображаться при вызове компонента. Каждый компонент поддерживает внутреннее состояние (через this.state), и каждый раз, когда состояние изменяется, функция render этого компонента вызывается снова.

Особенности языка: TypeScript против ES6

Angular приложения написаны на TypeScript, который является надмножеством ECMA2015 и использует транслятор для компиляции вашего строго типизированного файла .ts в простой .js-файл. TypeScript предлагает языковые расширения, которые предназначены для упрощения написания в JavaScript, и связывает информацию о типе с объектами JavaScript для обеспечения проверки типов и улучшения рабочего процесса разработки.

Некоторые из ключевых особенностей TypeScript включают в себя необязательную статическую типизацию и поддержку интерфейсов, классов и декораторов. (Декораторы - это функции с префиксом «@» за которыми сразу следует класс, параметр или свойство.)

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

Разве это не здорово? React позволяет вставлять теги XML/HTML в ваш файл JavaScript, и это делается через JSX, который предлагает возможности расширения синтаксиса для JavaScript. Мы должны использовать такой компилятор, как Babel, который компилирует наш код JSX в JavaScript, который могут понять браузеры. Вышеприведенный код сводится к следующему:

Хотя рекомендуется использовать JSX, вы можете придерживаться React.createElement(), если вы против идеи встраивания HTML-тегов в JavaScript.

Кроме того, вы можете использовать либо стандарты ES6, либо традиционную форму JavaScript во время работы с React. Хотя ES6 является относительно новым, он добавляет множество функций, таких как классы, стрелочные функции, шаблонные литералы, деструкция и использование let и const. Единственным недостатком, о котором я могу подумать, является то, что он добавляет немного кода шаблона, такого как необходимость вызова super() при каждом вызове constructor(), и что он не связывает автоматически методы обработки событий с this.

Проверка типа в Angular и propTypes в React

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

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

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

Ключевое слово type в TypeScript можно использовать для создания псевдонима для типа. Затем вы можете создавать новые типы, которые являются объединением или пересечением этих примитивных типов.

React имеет ограниченную поддержку проверки типов, потому что базовый ES6 не поддерживает его. Тем не менее, вы можете реализовать проверку типов с помощью библиотеки prop-types, разработанной командой React. Проверка типа props у компонента, чтобы проверить строку, можно сделать так, как показано ниже.

Но prop-types не ограничивается строками, числами и логическими значениями. Вы можете сделать намного больше, как описано в документации библиотеки prop-types. Однако, если вы серьезно относитесь к проверке статического типа, вы должны использовать что-то вроде Flow, который является статической библиотекой проверки типов для JavaScript.

Angular CLI против create-react-app

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

Настройка Angular-CLI для angular и create-react-app для React проста, используя npm.

Чтобы создать новое приложение Angular, вы должны использовать следующую команду:

Но это не так. Команда ng generate позволяет создавать компоненты, маршруты, каналы, директивы и службы.

Angular CLI может сделать гораздо больше, например, создать сборку вашего Angular приложения, команды для запуска модульных тестов и сквозного тестирования. Вы можете узнать больше о всем этом на GitHub.

С другой стороны, create-react-app - официально поддерживаемый способ создания приложения React без каких-либо файлов конфигурации.

$ npm install -g create-react-app

Это должно создать рабочее приложение React со всеми зависимостями Babel и webpack. Вы можете запустить приложение в своем браузере, используя npm start.

Вы можете найти сценарии, доступные для react app в файле package.json.

Связывание данных: двусторонняя привязка и однонаправленная привязка

Связывание данных - это функция, которая позволяет синхронизировать данные между состоянием (моделью) приложения и представлением. В односторонней процедуре привязки данных любое изменение состояния приложения автоматически обновляет представление. Напротив, двусторонняя привязка данных связывает вместе свойства и события под одним объектом, то есть любая модификация модели обновляет представление и наоборот.

В React свойства передаются от родительских к дочерним компонентам, что называется однонаправленным потоком данных или сверху вниз. Состояние компонента инкапсулируется и недоступно для других компонентов, если оно не передается дочернему компоненту в качестве props, то есть состояние компонента становится props дочернего компонента.

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

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

Интерполяция - это самый простой способ привязать свойство вашего компонента внутри текста между вашими тегами HTML и назначением атрибутов.

<p>Welcome back {{currentUser.name}}!</p>

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

<img [src] ="userImgUrl">

<user-child [user]="currentUser"></ user-child>

Связывание событий позволяет передавать поток данных в противоположном направлении, то есть от элемента к компоненту. Здесь click - это целевое событие, а справа - метод onSave(), который вызывается при возникновении события.

<button (click)="onSave()">Сохранить</button>

Но наиболее важной особенностью является двусторонняя привязка с использованием [(ngModel)]. Это объединяет связывание свойств и привязку событий в одной директиве и особенно полезно для форм и полей ввода.

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

Обработка на стороне сервера - традиционная технология рендеринга. Здесь сервер возвращает по запросу весь HTML-файл, а браузер оставляет за собой простое представление его пользователю. С другой стороны, рендеринг на стороне клиента возвращает HTML-документ, таблицу стилей и файл JavaScript.

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

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

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

Если вы используете React с Redux, в документации Redux есть хорошее руководство по настройке рендеринга сервера. Вы также можете настроить React для рендеринга с сервера с использованием компонентов BrowserRouter и StaticRouter, доступных в библиотеке react-router. Вы можете узнать больше об этом в этой статье на Medium. Но если вам необходима производительность и оптимизация, вы можете попробовать next.js, который является библиотекой для SSR в React.

Обертывание

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

Каковы ваши мысли по поводу Angular или React? Поделитесь ими в комментариях ниже.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.