5. ПОРОГ ВХОЖДЕНИЯ
Angular 1
Легко в учении, тяжело в бою
React
Сам по себе прост, но без зоопарка
вспомогательных утилит бесполезен
Angular 2
Убраны – фабрики, сервисы,
контроллеры. Typescript,
функциональное программирование,
реактивность (RxJS), Redux
или что-то подобное
6. АРХИТЕКТУРА
Angular 1
Делай что хочешь, как можешь
бардак из фабрик, сервисов,
контроллеров, директив.
React
Flux – совокупность паттернов:
наблюдатель, медиатор, состояние.
Redux – воплощение лучших практик
flux и подходов функционального
программирования.
Angular 2
Пока нет предложенных подходов от Google.
В составе есть EventEmitter, RxJS.
Без проблем можно подружить с Redux.
7. СИНТАКСИС
Angular 1 React Angular 2
Плюсы:
Чистый JS. Не нужны
компиляторы.
Минусы:
Свои велосипеды для DI,
модульности, куча
абстракций. Component
немного упрощает
синтаксис директив.
“Плохая абстракция, лучше
чем отсутствие абстракции.”
Плюсы:
Современный ES.
Минималистичный API.
Минусы:
Мешанина бизнес логики
и представления (частично
вопрос решает Redux
вынося логику в редюсеры).
Плюсы:
TypeScript и типизация,
HTML отдельно,
стили отдельно,
современный ES.
Минусы:
TypeScript не стандарт,
нельзя использовать
выражения в шаблоне.
8. КОМПЛЕКТАЦИЯ
Angular 1 React Angular 2
+ средства для тестирования + средства для тестирования
TypeScript
Typings
System.js
BrowserSync
RxJS
Плюсы:
Имеем структуру
Минусы:
Сложнее кастомизировать
9. ИЗОМОРФНОСТЬ
Angular 1 React Angular 2
100% изоморфный.
Ссылка на пример приложения
в 50 строк делающей полную
изоморфность без изменений
приложения, будет доступна на
последнем слайде.
Не изоморфный
Фреймворк.
10. КРОССПЛАТФОРМЕННОСТЬ
Angular 1 React Angular 2
Очень гибкий.
Работает с Phonegap, Ionic,
Electron, NW.js
без проблем.
Имеет кучу модулей.
React-Native – разработка
С использованием
Нативных компонент.
Также можно завернуть
во что угодно.
Интеграция в Ionic 2.
11. ДЕБАГ
Angular 1 React Angular 2
Отлов ошибок на этапе
компиляции.
Batarangle.
В лучшем случае – красная
консоль.
В худшем – ничего.
Angular Batarang и прочие.
Отлов ошибок на этапе
компиляции.
Redux devtools покажет
состояние системы.
Redux middlewares для дебага.
14. КОМЬЮНИТИ
Angular 1 React Angular 2
У всех трех решений огромная поддержка первоклассных специалистов.
Ответ почти на любой вопрос можно нагуглить.
Angular 2 из-за своего молодого возраста немного уступает.
React более сплочено подходит к формированию комъюнити.
https://github.com/reactjs
15. ПРОИЗВОДИТЕЛЬНОСТЬ
Angular 1
React
- setState
- Виртуальный дом
- Иммутабельность
Angular 2
- Zone.js, ChangeDetector cycle
- Виртуальный дом
- Иммутабельность
- Digest cycle, проверка watcher’ов
- Тяжелый апдейт состояния
*Подробный обзор в ссылках
16. МИГРАЦИЯ
React 0.10 React 0.14 – В течении рабочего дня
перенес большое приложение с сотнями компонентов.
React выводил подсказки по необходимым изменениям.
Angular 1 Angular 2 – без переписывания 75% кода не обойтись.
Для теста решил перенести сайт-визитку, созданную 3 года назад
за 6 часов. Я потратил более 20 часов на миграцию.
Требует изменений бизнес логики.
React 0.14 React 15.0.1 – перенес пару больших приложений,
вообще без проблем.