Как они сравниваются?
Я большой фанат бейсбола. Мне не нравилось, как ни один из существующих сайтов представлял оценки, поэтому в 2014 году я написал сайт, используя AngularJS, чтобы представить оценки так, как мне нравилось. Вскоре после завершения я услышал, что Angular 2 не будет обратно совместим с AngularJS. Тогда я понял, что мой сайт придется переписать раньше, чем я думал. Добро пожаловать в фронтенд-разработку!
В 2017 году я услышал участившиеся слухи о React. Несколько фронтенд-разработчиков, которых я знал, говорили об этом в январе/феврале 2017 года, и казалось, что все они говорили об этом к концу 2017 года. Я помню интересные дебаты разработчиков Angular JS о том, стоит ли прыгать и переходить с AngularJS на Реагировать.
AngularJS в Angular 6
В 2018 году я руководил проектом, в котором для интерфейса использовался Angular 6. Обратите внимание, что в этой статье, когда я говорю об Angular, я говорю об Angular 6. Поэтому я подумал, что хорошим способом изучения Angular будет использование его для переписывания моего бейсбольного сайта на AngularJS.
Я провел несколько часов и унылых совещаний, работая над переписыванием, и закончил его в ноябре 2018 года.
Самыми большими проблемами для меня в навигации были:
- Улучшения, представленные в JavaScript ECMA 2015 (то есть ключевое слово let, классы, промисы и стрелочные функции)
- Добавление TypeScript в Angular,
- Переход от архитектуры MVC AngularJS к компонентной архитектуре Angular.
Это было очень весело, но некоторые дергали за волосы, о которых я расскажу позже в этой статье.
Переход от Angular к React
Как только я завершил переписывание Angular, я начал задаваться вопросом, что нужно сделать, чтобы сделать еще одно переписывание с использованием React. Я провел некоторое время в декабре 2018 года и закончил 24 декабря. Хо-хо-хо.
В этой статье речь пойдет о следующих направлениях:
- Различия высокого уровня
- Расширение HTML против расширения JavaScript
- Односторонняя и двусторонняя привязка данных
- Проверка типа
- Фильтры
Различия высокого уровня
Я обнаружил, что начать работу с React для меня было определенно проще, чем с Angular. Angular — это полноценная среда JavaScript, а React — библиотека для представления представлений. Баннер на reactjs.org гласит следующее: Библиотека JavaScript для создания пользовательских интерфейсов.
React концептуально проще, чем Angular, но он не пытается сделать столько же. React использует подход a la carte. Он позволяет вам выбирать собственную маршрутизацию, формы, DI, компоненты и библиотеку форм.
Относительная простота React может быть обманчивой. Вы можете быстро приступить к работе, но вам придется провести некоторое исследование, чтобы выяснить, какие дополнительные библиотеки потребуются вашему проекту. Некоторым понравится эта гибкость, некоторые найдут ее парализующей.
Angular говорит: «Вот целая структура для начала. Но если вам нужно — идите вперед и замените то, что вам не подходит — но вот ваша отправная точка».
Расширение HTML против расширения JavaScript
Разработчики Angular добавили в HTML директивы. Например, они добавили возможность делать операторы if и циклы for. Существует даже умный способ поместить операторы if-then-else в HTML.
if then else goes here:
<div *ngIf="isLoggedIn; else loggedOut">
Welcome back, friend.
</div>
<ng-template #loggedOut>
Please friend, login.
</ng-template>
React пошел другим путем — они расширили JavaScript, определив JSX.
Мне нравится, как оформлена эта статья:
- Angular — вводит JavaScript в HTML
- React — переносит HTML в JavaScript
Еще один способ взглянуть на это — Angular позволяет программировать в HTML, а JSX позволяет создавать HTML из JavaScript.
Лично мне больше нравится использовать JavaScript с JSX, а не директивы Angular из-за более короткой кривой обучения — в Angular много директив! Есть что-то очень мощное и гибкое в написании JavaScript, который генерирует HTML. Дополнительный бонус: JSX отлавливает синтаксические ошибки в вашем HTML во время компиляции.
Односторонняя и двусторонняя привязка данных
AngularJS и Angular поддерживают двухстороннюю привязку данных. W3Schools обеспечивает хорошую демонстрацию AngularJS, используя это здесь.
Хороший способ понять, как двухсторонняя привязка данных эволюционировала от AngularJS к Angular, — это перенести программу W3Schools на Angular. Увидеть ниже:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:
`
Name: <input [(ngModel)]="name" />
<h1> {{ name }} </h1>
<p>Change the name inside the input field, and the model data
will change automatically, and therefore also the header will
change its value.</p>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Scott';
}
И перенесено на React, в котором нет встроенной поддержки этой функции:
import React, { Component } from 'react';
class App extends Component {
constructor (props) {
super();
this.state = {name : 'Scott'};
}
handleChange = (e) => {this.setState({name: e.target.value});}
render() {
return (
<div>
Name: <input value={this.state.name}
onChange={this.handleChange}/>
<h1>{this.state.name}</h1>
<p>Change the name inside the input field, and the model
data will change automatically, and therefore also the
header will change its value.</p>
</div>
);
}
}
export default App;
React не поддерживает двустороннюю привязку данных. Вам необходимо написать собственную функцию события для обработки обновления. Я не считаю это существенным ограничением React. Я помню, как здорово было, когда я открыл для себя двустороннюю привязку данных в AngularJS, но написать небольшую функцию обработки событий не так уж и сложно.
Обратите внимание, что отсутствие в React двусторонней привязки данных не было поверхностным решением. Это было связано со сложностью взаимодействий, возникающих при наличии большого количества компонентов, перекрестно уведомляющих друг друга об изменениях.
Архитекторы React планировали использовать его с шаблоном проектирования Flux, который реализован с помощью Redux.
Это отличное видео, знакомящее с Flux, и эта статья дает отличное обсуждение неизменяемой/однонаправленной модели потока данных, лежащей в основе React и Redux.
Проверка типа
Angular поставляется с TypeScript и показан во всех фрагментах кода в документации. TypeScript позволяет выполнять статическую проверку типов. Это отличный способ выявить проблемы во время компиляции по сравнению с тем, когда логика действительно выполняется.
React также включает поддержку TypeScript, но это не обсуждается в учебниках. Короче говоря, он есть, но вам нужно немного постараться, что вписывается в модель быстрого старта React, модель a la carte.
Фильтры
Angular позволяет включать каналы в ваш HTML. В приведенном ниже примере показано использование каналов и одного из встроенных фильтров: uppercase.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:
`
{{ "Scott Larribeau" | uppercase}}
`
})
export class AppComponent {
}
Angular также позволяет вам писать свои собственные фильтры. Ниже показано, как я использовал фильтры для своего бейсбольного сайта.
Бейсбольный сезон — это последовательность записей, хранящихся в массиве, называемом турнирной таблицей. Вот одна строка из этого массива:
{"League":"AL", "Division":"EAST", "Team":"NYY", "W":"1", "L":"0", "PCT":"1.000", "GB":"--", "Date":"2018-3-29"},
Вот строка кода из моего бейсбольного приложения, которое фильтрует результаты, соответствующие указанной лиге, дивизиону и дате:
<tr *ngFor="let standing of standings | leagueFilter:(league) | divisionFilter:(division) | filter:(date)">
Фильтр даты был встроенным, но мне пришлось написать leagueFilter и divisionFilter. Эти фильтры было немного неинтуитивно писать:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'leagueFilter'
})
export class LeagueFilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if(!items) return [];
if(!searchText) return items;
return items.filter( it => {
if (it.League == searchText) {
return true;
} else {
return false;
}
});
}
}
Однако React был всего лишь простым JavaScript:
const result = props.standings.filter(x => x.Date === tmpDate); const result2 = result.filter(x => x.League === props.league); const result3 = result2.filter(x => x.Division === props.division);
Вывод
Наличие похожих сайтов, написанных на Angular и React, дало мне отличный способ изучить их и провести сравнение. Лично я предпочитаю React, и я понимаю, почему он привлекателен для многих разработчиков. Однако при выборе между ними важно рассматривать этот вопрос как часть всей команды, масштаба проекта и горизонта проекта.
Кроме того, следите за обновлениями, вот несколько идей для будущих улучшений и соответствующие статьи:
- Подключите интерфейс к реальному серверу с помощью REST API. На обоих этих сайтах сезон 2018 года жестко запрограммирован во внешнем интерфейсе.
- Включите Редукс.
