Angular 2 On Production
1 like922 views
Документ представляет собой обзор года использования Angular 2 в производственной среде, включая основные темы такие как производительность, стабильность, и доступность сообществ. Рассматриваются проблемы и решения, связанные с использованием технологии, а также инструменты, такие как Angular CLI и TypeScript. Включает примеры кода и обсуждение принципов работы с компонентами и асинхронными действиями.
![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() { }
}](https://image.slidesharecdn.com/kiv-a2-pdf-170429112309/85/Angular-2-On-Production-28-320.jpg)
![27 January 2017
Связывание
Однонаправленный «внутрь»:
• {{expression}}
• [target] = "expression"
• bind-target = "expression"](https://image.slidesharecdn.com/kiv-a2-pdf-170429112309/85/Angular-2-On-Production-33-320.jpg)
![27 January 2017
Связывание
Однонаправленный «внаружу»:
• [(target)] = "expression"
• bindon-target = "expression"](https://image.slidesharecdn.com/kiv-a2-pdf-170429112309/85/Angular-2-On-Production-35-320.jpg)
Angular 2 On Production
- 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.