блог 
Angular и React пользуются примерно одинаковой популярностью, но не идентичны по своим характеристикам и не являются взаимозаменяемыми.
Фреймворк Angular или библиотека React: в чем разница
React стал раньше доступен разработчикам: Facebook выпустили его для массового использования в 2013 году. Angular является продуктом Google, достоянием общественности он стал в 2016 году. У разработчиков было больше времени, чтобы привыкнуть к React и внести в продукт удобные доработки. Однако Angular быстро наверстывает упущенное, и спрос на него в ближайшие годы несомненно возрастет.
React используется на платформах AirBnb, Dropbox, Facebook, Instagram, Netflix, Whatsapp, Uber. Среди клиентов Angular числятся CVS shop, Delta, Eat24, Google Express, NBA, onefootball.
Angular (MVC-фреймворк) — программное обеспечение, позволяющее собрать проект из отдельных модулей и составляющих. React представляет собой фронтенд-библиотеку на опенсорсе для интеграции, со значительным количеством пакетов. Привязка данных в React осуществляется в единственном направлении, в Angular — в двух. Базой для React выступает JSX + JS (ES5 / ES6), Angular строится на HTML и TypeScript.
React задействует динамически типизированный язык, Angular — статически типизированный. Динамически типизированные языки легче изучать, написание кода на них отнимает меньше времени, они гибкие и предоставляют разработчикам больший простор для творчества. JavaScript (ES6), на котором построен React, является общепринятым языком программирования с 1995 года. Внутри него содержатся удобные модули, классы, литералы и операторы распространения, структура кода получается предельно чистой.
TypeScript, на котором базируется Angular, вошел в массовый обиход в 2012 году и не опирается на классовую систему. Если специалист раньше работал только на языках программирования с динамической типизацией, ему будет непросто освоить TypeScript со статической типизацией. Привлекая к проекту новых разработчиков, придется заложить дополнительное время на их обучение.
В базе React содержится свыше 100 000 кодов и 300 готовых решений. База Angular насчитывает 1800 решений, этот фреймворк характеризуется каркасной структурой и внушительными размерами.
Для наглядного сравнения вы можете ознакомиться с табличкой ниже:
Оба продукта способны работать как с нативными мобильными приложениями, так и с веб-приложениями. В React для нативных продуктов задействуют React Native, для кроссплатформенных используют React Native Renderer. В Angular для создания нативных разработок используют NativeScript, для гибридных — Ionic Framework.
Точка входа для Angular выглядит так:
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'posts', component: PostsComponent },
{ path: 'form', component: FormComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
]</pre>
@NgModule({
declarations: [
AppComponent,
PostsComponent,
HomeComponent,
FormComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
ApolloModule.forRoot(provideClient),
FormsModule,
ReactiveFormsModule,
HttpModule,
BrowserAnimationsModule,
MdInputModule, MdSelectModule, MdButtonModule, MdCardModule, MdIconModule
],
providers: [
AppService
],
bootstrap: [AppComponent]
})
@Injectable()
export class AppService {
username = 'Mr. User'
}
Точка входа на React:
const appStore = AppStore.getInstance()
const routerStore = RouterStore.getInstance()</pre>
const rootStores = {
appStore,
routerStore
}
ReactDOM.render(
<Provider {...rootStores} >
<Router history={routerStore.history} >
<App>
<Switch>
<Route exact path='/home' component={Home as any} />
<Route exact path='/posts' component={Posts as any} />
<Route exact path='/form' component={Form as any} />
<Redirect from='/' to='/home' />
</Switch>
</App>
</Router>
</Provider >,
document.getElementById('root')
)
Плюсы и минусы фреймворка Angular
Библиотека React: преимущества и недостатки
Ботам от поисковиков удобнее просматривать сайты на React, чем на Angular. Это нужно учитывать специалистам, заинтересованным в SEO-продвижении и улучшении пользовательского взаимодействия с ресурсом.
Рендеринг, архитектура компонентов, направленность и классы зависимостей (другие особенности)
React задействует Virtual DOM, более рациональный и экономичный по сравнению с Real DOM. DOM — это способ предоставлять содержимое HTML-документа в формате объектов, для управления которыми предусмотрен интерфейс. Когда среди содержимого требуется обнаружить конкретный фрагмент, Real DOM последовательно обновляет теги, снижая производительность приложения. Virtual DOM действует по такому алгоритму:
- создает копию DOM;
- обрабатывает;
- сопоставляет с исходником.
Если результаты сопоставления не совпадают, Virtual DOM обновляет только один нужный фрагмент HTML.
У Angular подобного преимущества нет. Поток данных делится надвое: клиентская часть (браузер) обеспечивает рендеринг, серверная отвечает за создание директив, загрузку кода и сервисов.
Страницы сайтов на Virtual DOM загружаются быстрее. На мобильных устройствах ощутимо сокращается трафик.
Angular — это фреймворк, а React JS это библиотека. На практике разница выражается в том, что React ориентирован на формат Model-View-Controller. Модель обеспечивает предоставление сведений, Вид отвечает за отображение сведений для пользователей. Роль Контроллера сводится к тому, чтобы интерпретировать пользовательские действия и побуждать Модель внедрять коррективы в соответствии с интерпретацией.
Если проект создается на React, разработчику придется:
- искать и внедрять библиотеки ради последовательной реализации задач;
- настраивать функциональную составляющую приложения под нужды библиотек;
- прикладывать усилия для привлечения разработчиков к проекту.
Реализация архитектуры проекта потребует значительных временных затрат. Низкоуровневому API нужна длительная настройка.
У Angular подобных затруднений не возникнет: обратная совместимость библиотек обеспечивается высокоуровневым API, программист со стороны присоединится к разработке моментально. Поэтому полноценные фреймворки ценятся выше, чем библиотеки.
Передача данных в React односторонняя. Каждый объект инкапсулирован — относится к конечным процедурам, до завершения работы не требующих от пользователей никаких действий. В библиотеке предусмотрена возможность копировать и передавать состояния. Свойства прописанных объектов можно восстановить на новом устройстве: нужно, чтобы пользователь открыл приложение и сообщил состояние компонентов. Рендеринг получится неотличимым, дисплеи будут отображать одинаковую картинку.
Вот наглядный образец кода, иллюстрирующий разницу между решениями. В Angular вычисляемые свойства задаются так:
import { Injectable } from '@angular/core'
import { BehaviorSubject } from 'rxjs/BehaviorSubject'</pre>
@Injectable()
export class HomeService {
message = 'Welcome to home page'
counterSubject = new BehaviorSubject(0)
// Computed property can serve as basis for further computed properties
counterMessage = new BehaviorSubject('')
constructor() {
// Manually subscribe to each subject that couterMessage depends on
this.counterSubject.subscribe(this.recomputeCounterMessage)
}
// Needs to have bound this
private recomputeCounterMessage = (x) => {
console.log('recompute counterMessage!')
this.counterMessage.next(`${x} ${x === 1 ? 'click' : 'clicks'} since last visit`)
}
increment() {
this.counterSubject.next(this.counterSubject.getValue() + 1)
}
}
В React процесс выглядит проще:
import { observable, computed, action } from 'mobx'</pre>
export class HomeStore {
import { observable, computed, action } from 'mobx'
export class HomeStore {
@observable counter = 0
increment = () => {
this.counter++
}
@computed get counterMessage() {
console.log('recompute counterMessage!')
return `${this.counter} ${this.counter === 1 ? 'click' : 'clicks'} since last visit`
}
}
В Angular объекты взаимодействуют в пределах служб, являющихся составными элементами модулей. Для создания масштабных приложений востребована модульная архитектура. Каждый модуль позволяет решать несколько задач идентичной функциональности. Скорость обработки информации увеличивается, конечный размер кода уменьшается.
На базе Model-View-View-Model различные задачи решают в одном разделе приложения, задействуя идентичный набор сведений. Двусторонняя направленность передачи данных определяется зависимостью функций. С помощью каждой отдельной процедуры можно запустить иной процесс.
При переходе на обновленную версию продукта React удобнее. Разные версии без проблем совмещаются между собой. К приложению допустимо подключать библиотеки различных версий и обновлять устаревшие, наследуя их свойства.
Проекты на Angular зависимы от предшествующих версий и компонентов. Перейти напрямую со старой версии на новою невозможно: обновления осуществляют последовательно и по отдельности, приложение ощутимо увеличивается в размерах.
Выводы
React и Angular отличаются по критериям взаимодействия внутри комьюнити. Это ключевой аспект для начинающих разработчиков — если комьюнити многочисленное, активное, готовое помогать новичкам, любая проблема решается быстрее, чем в одиночку.
Для React невозможно отыскать исчерпывающую актуальную документацию. Продукт функционирует на опенсорсе, свежие библиотеки добавляются ежедневно. Для опытных разработчиков это несомненный плюс, но новичкам нелегко разобраться в свойствах, функциях, процессах применения свежих библиотек. Новые модули React появляются в ходе того, что разработчик решает определенную задачу в рамках своего проекта и создает новую библиотеку. Потом он делится наработками в свободном доступе, сопровождая их кратким руководством. Если у другого разработчика возникают вопросы касательно использования данной библиотеки, он должен задать их ее автору.
В Angular проще найти нужные сведения. Новичку не придется обращаться к экспертам из комьюнити. Продукт сопровождается подробной документацией, к нему опубликованы многочисленные гайдлайны. Если документация недостаточно детальная или доходчивая, проконсультироваться с участниками комьюнити можно на любой популярной площадке, где разработчики обмениваются опытом.
Выбирая между Angular или React, специалисты ориентируются на специфику проекта. У обоих подходов есть сильные и слабые стороны, а также многотысячное комьюнити разработчиков из десятков стран мира. И React, и Angular развиваются и совершенствуются. React вышел на рынок на три года раньше, поэтому разработчики успели его усовершенствовать и сделать более удобным в использовании. Но Angular сумеет быстро ликвидировать отрыв и предложить пользователям значимые, уникальные преимущества.
