Download as PDF, PPTX
![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)
Uploaded byOleksandr Tryshchenko
Angular 2 On Production
Документ представляет собой обзор года использования Angular 2 в производственной среде, включая основные темы такие как производительность, стабильность, и доступность сообществ. Рассматриваются проблемы и решения, связанные с использованием технологии, а также инструменты, такие как Angular CLI и TypeScript. Включает примеры кода и обсуждение принципов работы с компонентами и асинхронными действиями.
Angular 2 On Production
- 2. ONE YEAR OFANGULAR 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 WebComponents • Shadow DOM • Templates • Imports • Custom Elements
- 8. 27 January 2017 WebComponents • Shadow DOM • Templates • Imports • Custom Elements
- 9.
- 10. Shadow DOM 27 January2017 10
- 11. Shadow DOM 27 January2017 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.
- 19. 27 January 2017 AngularCLI • Официальный инструмент. • Стандартизация и подавление индивидуальности Разработчика. • Экономия времени и денег на рутине. • Конфигурирует Webpack вместо тебя J. • Подразумевает написание юнит тестов.
- 20. 27 January 2017 AngularCLI – Что умеет • Создание пустого проекта • Генерация компонентов и сервисов • Генерация инфраструктуры: сборка, тесты • Синтаксический анализ кода • Различные окружения • Форматирование кода
- 21. Angular CLI ? 27January 2017 21
- 22. 27 January 2017 AngularCLI - Webpack - Webpack 2 - Tree Shaking
- 23. 27 January 2017 TreeShaking - Webpack вычищает неиспользуемые ссылки. - UglifyJsPlugin удаляет неиспользуемый код.
- 24. 27 January 2017 AndersHejlsberg Занимался разработкой таких языков как: • Turbo Pascal • Delphi • C# • TypeScript
- 25. 27 January 2017 TypeScript •Очень гибкий транспайлер • Система контроля типов • Интерфейсы • Mixins • Пространства имен
- 26. TS Типизация • Интерфейсы •Проверка типов аргументов функций • Проверка типов свойств • Проверка типов возвращаемых значений функций • Возможность декларации собственных типов • Enum 27 January 2017 26
- 27. TS Типизация 27 January2017 27
- 28. TS Декораторы (ESXXXX Декораторы) 27January 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.
- 30.
- 31. Декораторы 27 January 2017H 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 namespaced3 { 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.
- 40. Rx.js 27 January 2017H 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 ChangeDetection 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 27January 2017 44
- 45. Web Animations API 27January 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 27January 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.
- 52. 27 January 2017 VisualStudio Code • Синтаксический анализ кода с учетом указанных типов. • Встроенный транспайлер.
- 53. Субъективно • Есть компоненты.Один тип компонентов. • Есть директивы. Один тип директив. • Есть сервисы. Один тип сервисов. 27 January 2017 53
- 54.
- 55. А что дальше? 27January 2017 55
- 56. 27 January 2017 Angular2 Universal • Инструмент от команды A2. • Рендеринг статических страниц на сервере. • Пре-рендер и ре-рендер. • Невероятно крутой API refence.
- 57.
- 58.
- 59.
- 60.
- 61.