During the presentation, I've explained how to start with Angular 2 and get better results using it. Also I've told about our experience and the most important points to care about.

2. ONE YEAR OF ANGULAR 2
ON PRODUCTION
Oleksandr Tryshchenko
Senior Front-end Developer, DataArt

3. 27 January 2017
Агенда
• Почему?
• Как?
• Проблемы
• Решения проблем
• Примеры
• Q&A
• Плюшки

5. Что ожидалось от технологии
• Отсутствие необходимости писать код ради самой технологии.
• Стабильность и живое сообщество.
• Простая комплектация команд под проекты.
• Целостная экосистема и подобная структура от проекта к
проекту.
• Достаточный уровень абстракции и ощутимый прирост в
скорости разработки.
• Низкая связность приложения.
• Удобная тестируемость.
27 January 2017 5

6. Что хотелось от технологии
• Высокая производительность.
• Совместимость со старыми браузерами.
• Длинный жизненный цикл продукта.
27 January 2017 6

7. 27 January 2017
Web Components
• Shadow DOM
• Templates
• Imports
• Custom Elements

8. 27 January 2017
Web Components
• Shadow DOM
• Templates
• Imports
• Custom Elements

9. 27 January 2017
Shadow DOM

10. Shadow DOM
27 January 2017 10

11. Shadow DOM
27 January 2017 11

12. Shadow DOM – Emulated
27 January 2017 12

13. Shadow DOM – Emulated
27 January 2017 13

14. Shadow DOM – Emulated
barny-bear
- - barny-bear.component.ts
- - barny-bear.component.spec.ts
- - barny-bear.component.scss
- - barny-bear.component.html
- - barny-bear.module.ts
27 January 2017 14

15. Shadow DOM !== Virtual DOM
1. Это вообще разные вещи.
2. … и предназначены они для разного.
27 January 2017 15

16. viewEncapsulation
• None – не используем Shadow DOM.
• Emulated – эмулируем поведение Shadow DOM
(Default).
• Native – включить нативную реализацию.
27 January 2017 16

17. Декларация компонентов
27 January 2017 17

19. 27 January 2017
Angular CLI
• Официальный инструмент.
• Стандартизация и подавление индивидуальности
Разработчика.
• Экономия времени и денег на рутине.
• Конфигурирует Webpack вместо тебя J.
• Подразумевает написание юнит тестов.

20. 27 January 2017
Angular CLI – Что умеет
• Создание пустого проекта
• Генерация компонентов и сервисов
• Генерация инфраструктуры: сборка, тесты
• Синтаксический анализ кода
• Различные окружения
• Форматирование кода

21. Angular CLI ?
27 January 2017 21

22. 27 January 2017
Angular CLI - Webpack
- Webpack 2
- Tree Shaking

23. 27 January 2017
Tree Shaking
- Webpack вычищает неиспользуемые
ссылки.
- UglifyJsPlugin удаляет
неиспользуемый код.

24. 27 January 2017
Anders Hejlsberg
Занимался разработкой таких языков как:
• Turbo Pascal
• Delphi
• C#
• TypeScript

25. 27 January 2017
TypeScript
• Очень гибкий транспайлер
• Система контроля типов
• Интерфейсы
• Mixins
• Пространства имен

26. TS Типизация
• Интерфейсы
• Проверка типов аргументов функций
• Проверка типов свойств
• Проверка типов возвращаемых значений функций
• Возможность декларации собственных типов
• Enum
27 January 2017 26

27. TS Типизация
27 January 2017 27

28. TS Декораторы
(ESXXXX Декораторы)
27 January 2017 28
import { Component, Input, Output, EventEmitter } from
'@angular/core';
@Component({
selector: 'conditional-formating',
templateUrl: './conditional-formating.component.html',
styleUrls: ['./conditional-formating.component.scss'],
providers: []
})
export class ConditionalFormatingComponent {
@Input() value: Number = 0;
@Input() label: String = ‘No Value';
constructor() { }
}

29. Декораторы
27 January 2017 29

30. Декораторы
27 January 2017 30

31. Декораторы
27 January 2017 H T T P S : / / G I T H U B . C O M / W Y C A T S / J A V A S C R I P T - D E C O R A T O R S 31

32. TS typing
xxxx.d.ts
declare namespace d3 {
type TooltipDirection = ("n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se");
interface Tooltip {
hide(): Tooltip;
show(target: SVGElement): Tooltip;
attr(name: string, value: Primitive): Tooltip;
style(name: string, value: Primitive, priority?: string): Tooltip;
destroy(): Tooltip;
}
export function tip(): Tooltip;
}
27 January 2017 32

33. 27 January 2017
Связывание
Однонаправленный «внутрь»:
• {{expression}}
• [target] = "expression"
• bind-target = "expression"

34. 27 January 2017
Связывание
Однонаправленный «внаружу»:
• (target) = "statement"
• on-target = "statement"

35. 27 January 2017
Связывание
Однонаправленный «внаружу»:
• [(target)] = "expression"
• bindon-target = "expression"

36. 27 January 2017
ReactiveX (Rx.js)
• Еще один подход для организации
асинхронных действий.
• Влечет за собой новый подход к
композиции компонентов нашего
приложения.

37. Используем flatMap и switchMap
27 January 2017 37

38. Rx.js + A2
PROS
- Позволяет убрать http логику из компонентов
- Очень удобно использовать с async pipe
CONS
- Вносит коррективы в композицию приложения
- Реализует метод toPromise()
27 January 2017 38

39. Композиция компонентов
27 January 2017 39

40. Rx.js
27 January 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = W W R 9 N X V X 1 E C 40
ROB WORMALD
(@ROBWORMALD):
ANGULAR & RXJS AT
NG-EUROPE 2016

41. Zone.js
• Переопределяет стандартные методы для
асинхронных действий
• Детальный trace ошибок.
• Dirty-checking.
• Возможность прекратить все асинхронные действия
при уничтожении компонента.
27 January 2017 41

42. Angular 2 Change Detection
Strategies
27 January 2017 42

43. OnPush Strategy
• Мы полагаем, что все входы компонента
иммутабельные.
• Мы используем ручной вызов с помощью
markForCheck() для всех остальных случаев.
• Мы должны использовать только Immutable входящие
данные.
27 January 2017 F O O T E R H E R E 43

44. Key Value Differs
27 January 2017 44

45. Web Animations API
27 January 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = 4 V D M I V R M L 3 4 45
ANGULAR 2 0
ANIMATIONS MATIAS
NIEMELA
ANGULARCONNECT

46. Angular 2 Forms
27 January 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = X Y V 9 L S R V 0 S 4 46
ANGULAR 2 FORMS
KARA ERICKSON

47. Совместимость
• Приложение частично собирается в ES5.
• CLI генерирует polyfills.brower.ts.
• Это не заведется на Safari + IE J.
• Для этого нам нужно руками подключить intl
полифилл.
27 January 2017 47

48. Отладка Angular 2 приложений
27 January 2017 48

49. @angular/core/testing
- Jasmine
- Karma
- Protractor (e2e)
27 January 2017 49

50. 27 January 2017
Augury
• Инструмент от команды A2.
• Не требует никаких телодвижений со
стороны разработчика.
• Отлично работает с собранными
приложениями.

51. 27 January 2017 51

52. 27 January 2017
Visual Studio Code
• Синтаксический анализ кода с учетом
указанных типов.
• Встроенный транспайлер.

53. Субъективно
• Есть компоненты. Один тип компонентов.
• Есть директивы. Один тип директив.
• Есть сервисы. Один тип сервисов.
27 January 2017 53

54. Спасибо!
27 January 2017 54

55. А что дальше?
27 January 2017 55

56. 27 January 2017
Angular 2 Universal
• Инструмент от команды A2.
• Рендеринг статических страниц на
сервере.
• Пре-рендер и ре-рендер.
• Невероятно крутой API refence.

57. 27 January 2017
NativeScript

58. 27 January 2017
angular

59. 27 January 2017
angular-react

60. 27 January 2017
angular-react-native

61. 27 January 2017
angular-react-native-
renderer