Съесть собаку#2. 21/04/2016

1. Тонкости выбора:
Angular vs React vs Angular 2
Александров Сергей
Senior JavaScript Developer
Acceptic

2. Веб компоненты
(W3C стандарт)
- Custom Elements
- Shadow DOM
- HTML Imports / Templates

3. КО М П О Н Е Н Т Н Ы Й П ОД ХОД

4. - Дебаг
- Тестирование
- Документирование
- Комьюнити
- Производительность
- Миграция
- Порог вхождения
- Архитектура
- Синтаксис
- Комплектация
- Изоморфность
- Кроссплатформенность
ЧЕК ЛИСТ

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 для дебага.

12. ТЕСТИРОВАНИЕ
Angular 1
React
Angular 2
Angular Protractor, Interceptors.
Любые фреймверки.
Любые фреймверки.
Enzyme.
С Redux легче тестировать.
Спец утилит пока нет.

13. ДОКУМЕНТИРОВАНИЕ
Angular 1 React Angular 2
JSDoc, ESDoc. ESDoc, JSDoc
поддерживает JSX.
ESDoc, JSDoc
поддерживает typescript.

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 – перенес пару больших приложений,
вообще без проблем.

17. - Порог вхождения
- Архитектура
- Синтаксис
- Комплектация
- Изоморфность
- Кроссплатформенность
- Дебаг
- Тестирование
- Документирование
- Комъюнити
- Производительность
- Миграция
Angular 1 React Angular 2
?
?
?
В Ы В ОД Ы

18. ВСЕМ СПАСИБО!
ВОПРОСЫ!
Linkedin
https://github.com/AlexSergey
Skype: sergey.aleksandrov_acceptic
My site
КО Н ТА К Т Ы
П Р И М Е Р Ы И С С Ы Л К И
https://github.com/AlexSergey/eat-dog
https://join.skype.com/Ct9eTgsIFHfk
Ч АТ “ С Ъ ЕС Т Ь С О БА К У ”