Тонкости выбора:Angular vs React vs Angular 2

Александров Сергей Senior JavaScript DeveloperAcceptic

Веб компоненты

(W3C стандарт)- Custom Elements- Shadow DOM- HTML Imports / Templates

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

- Дебаг- Тестирование- Документирование- Комьюнити- Производительность- Миграция

- Порог вхождения- Архитектура- Синтаксис- Комплектация- Изоморфность- Кроссплатформенность

Ч Е К Л И С Т

П О Р О Г ВХОЖ Д Е Н И Я

Angular 1Легко в учении, тяжело в бою

ReactСам по себе прост, но без зоопаркавспомогательных утилит бесполезен

Angular 2Убраны – фабрики, сервисы, контроллеры. Typescript, функциональное программирование, реактивность (RxJS), Redux или что-то подобное

А РХ И Т Е К Т У РА

Angular 1

Делай что хочешь, как можешь бардак из фабрик, сервисов, контроллеров, директив.

React

Flux – совокупность паттернов: наблюдатель, медиатор, состояние.

Redux – воплощение лучших практик flux и подходов функционального программирования.

Angular 2

Пока нет предложенных подходов от Google. В составе есть EventEmitter, RxJS.Без проблем можно подружить с Redux.

С И Н ТА КС И СAngular 1 React Angular 2

Плюсы: Чистый JS. Не нужны компиляторы.

Минусы: Свои велосипеды для DI, модульности, куча абстракций. Componentнемного упрощает синтаксис директив.

“Плохая абстракция, лучше чем отсутствие абстракции.”Плюсы: Современный ES.Минималистичный API.

Минусы: Мешанина бизнес логикии представления (частично вопрос решает Redux вынося логику в редюсеры).

Плюсы: TypeScript и типизация,HTML отдельно,стили отдельно, современный ES.

Минусы: TypeScript не стандарт, нельзя использовать выражения в шаблоне.

КО М П Л Е К ТА Ц И Я

Angular 1 React Angular 2

+ средства для тестирования+ средства для тестирования

TypeScriptTypingsSystem.jsBrowserSyncRxJS

Плюсы:Имеем структуру

Минусы:Сложнее кастомизировать

И З О М О Р Ф Н О С Т Ь

Angular 1 React Angular 2

100% изоморфный.Ссылка на пример приложенияв 50 строк делающей полную изоморфность без измененийприложения, будет доступна напоследнем слайде.

Не изоморфный Фреймворк.

К Р О С С П Л АТФ О Р М Е Н Н О С Т Ь

Angular 1 React Angular 2Очень гибкий. Работает с Phonegap, Ionic, Electron, NW.js без проблем.Имеет кучу модулей.

React-Native – разработкаС использованиемНативных компонент.Также можно завернуть во что угодно.

Интеграция в Ionic 2.

Д Е Б А Г

Angular 1 React Angular 2Отлов ошибок на этапе компиляции.

Batarangle.

В лучшем случае – краснаяконсоль.

В худшем – ничего.

Angular Batarang и прочие.

Отлов ошибок на этапе компиляции.

Redux devtools покажет состояние системы.

Redux middlewares для дебага.

Т ЕС Т И Р О В А Н И Е

Angular 1

React

Angular 2

Angular Protractor, Interceptors.Любые фреймверки.

Любые фреймверки.Enzyme.С Redux легче тестировать.

Спец утилит пока нет.

ДО К У М Е Н Т И Р О В А Н И Е

Angular 1 React Angular 2JSDoc, ESDoc. ESDoc, JSDoc

поддерживает JSX.ESDoc, JSDoc поддерживает typescript.

КО М Ь Ю Н И Т И

Angular 1 React Angular 2

У всех трех решений огромная поддержка первоклассных специалистов.

Ответ почти на любой вопрос можно нагуглить.

Angular 2 из-за своего молодого возраста немного уступает.

React более сплочено подходит к формированию комъюнити.

https://github.com/reactjs

П Р О И З В ОД И Т ЕЛ Ь Н О С Т Ь

Angular 1

React- setState- Виртуальный дом- Иммутабельность

Angular 2- Zone.js, ChangeDetector cycle- Виртуальный дом- Иммутабельность

- Digest cycle, проверка watcher’ов- Тяжелый апдейт состояния

*Подробный обзор в ссылках

М И Г РА Ц И Я

React 0.10 React 0.14 – В течении рабочего дня перенес большое приложение с сотнями компонентов. React выводил подсказки по необходимым изменениям.

Angular 1 Angular 2 – без переписывания 75% кода не обойтись. Для теста решил перенести сайт-визитку, созданную 3 года назад за 6 часов. Я потратил более 20 часов на миграцию.Требует изменений бизнес логики.

React 0.14 React 15.0.1 – перенес пару больших приложений, вообще без проблем.

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

Angular 1 React Angular 2

?

??

В Ы В О Д Ы

ВСЕМ СПАСИБО! ВОПРОСЫ!

Linkedin

https://github.com/AlexSergey

Skype: sergey.aleksandrov_acceptic

My site

К О Н ТА К Т Ы

П Р И М Е Р Ы И С С Ы Л К Иhttps://github.com/AlexSergey/eat-dog

https://join.skype.com/Ct9eTgsIFHfk

Ч АТ “ С Ъ Е С Т Ь С О Б А К У ”