angular 2 on production
TRANSCRIPT
ONE YEAR OF ANGULAR 2 ON PRODUCTION
Oleksandr TryshchenkoSenior Front-end Developer, DataArt
27 January 2017
Агенда
• Почему?• Как?• Проблемы• Решения проблем• Примеры• Q&A• Плюшки
Что ожидалось от технологии
• Отсутствие необходимости писать код ради самой технологии.• Стабильность и живое сообщество.• Простая комплектация команд под проекты.• Целостная экосистема и подобная структура от проекта к
проекту.• Достаточный уровень абстракции и ощутимый прирост в
скорости разработки.• Низкая связность приложения.• Удобная тестируемость.
27 January 2017 5
Что хотелось от технологии
• Высокая производительность.• Совместимость со старыми браузерами.• Длинный жизненный цикл продукта.
27 January 2017 6
27 January 2017
Web Components
• Shadow DOM• Templates• Imports• Custom Elements
27 January 2017
Web Components
• Shadow DOM• Templates• Imports• Custom Elements
27 January 2017
Shadow DOM
Shadow DOM
27 January 2017 10
Shadow DOM
27 January 2017 11
Shadow DOM – Emulated
27 January 2017 12
Shadow DOM – Emulated
27 January 2017 13
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
Shadow DOM !== Virtual DOM
1. Это вообще разные вещи.2. … и предназначены они для разного.
27 January 2017 15
viewEncapsulation
• None – не используем Shadow DOM.• Emulated – эмулируем поведение Shadow DOM
(Default).• Native – включить нативную реализацию.
27 January 2017 16
Декларация компонентов
27 January 2017 17
27 January 2017
Angular CLI
• Официальный инструмент.• Стандартизация и подавление индивидуальности
Разработчика.• Экономия времени и денег на рутине.• Конфигурирует Webpack вместо тебя J.• Подразумевает написание юнит тестов.
27 January 2017
Angular CLI – Что умеет
• Создание пустого проекта• Генерация компонентов и сервисов• Генерация инфраструктуры: сборка, тесты• Синтаксический анализ кода• Различные окружения• Форматирование кода
Angular CLI ?
27 January 2017 21
27 January 2017
Angular CLI - Webpack
- Webpack 2- Tree Shaking
27 January 2017
Tree Shaking
- Webpack вычищает неиспользуемые ссылки.
- UglifyJsPlugin удаляет неиспользуемый код.
27 January 2017
Anders Hejlsberg
Занимался разработкой таких языков как:• Turbo Pascal• Delphi• C#• TypeScript
27 January 2017
TypeScript
• Очень гибкий транспайлер• Система контроля типов• Интерфейсы• Mixins• Пространства имен
TS Типизация
• Интерфейсы• Проверка типов аргументов функций• Проверка типов свойств• Проверка типов возвращаемых значений функций• Возможность декларации собственных типов• Enum
27 January 2017 26
TS Типизация
27 January 2017 27
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() { }
}
Декораторы
27 January 2017 29
Декораторы
27 January 2017 30
Декораторы
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
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
27 January 2017
Связывание
Однонаправленный «внутрь»:• {{expression}}• [target] = "expression"• bind-target = "expression"
27 January 2017
Связывание
Однонаправленный «внаружу»:• (target) = "statement"• on-target = "statement"
27 January 2017
Связывание
Однонаправленный «внаружу»:• [(target)] = "expression"• bindon-target = "expression"
27 January 2017
ReactiveX (Rx.js)
• Еще один подход для организацииасинхронных действий.
• Влечет за собой новый подход ккомпозиции компонентов нашегоприложения.
Используем flatMap и switchMap
27 January 2017 37
Rx.js + A2
PROS- Позволяет убрать http логику из компонентов- Очень удобно использовать с async pipe
CONS- Вносит коррективы в композицию приложения- Реализует метод toPromise()
27 January 2017 38
Композиция компонентов
27 January 2017 39
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
Zone.js
• Переопределяет стандартные методы для асинхронных действий
• Детальный trace ошибок.• Dirty-checking.• Возможность прекратить все асинхронные действия
при уничтожении компонента.
27 January 2017 41
Angular 2 Change Detection Strategies
27 January 2017 42
OnPush Strategy
• Мы полагаем, что все входы компонента иммутабельные.
• Мы используем ручной вызов с помощью markForCheck() для всех остальных случаев.
• Мы должны использовать только Immutable входящие данные.
27 January 2017 F O O T E R H E R E 43
Key Value Differs
27 January 2017 44
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 NIEMELAANGULARCONNECT
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
Совместимость
• Приложение частично собирается в ES5.• CLI генерирует polyfills.brower.ts.• Это не заведется на Safari + IE J.• Для этого нам нужно руками подключить intl
полифилл.
27 January 2017 47
Отладка Angular 2 приложений
27 January 2017 48
@angular/core/testing
- Jasmine- Karma- Protractor (e2e)
27 January 2017 49
27 January 2017
Augury
• Инструмент от команды A2.• Не требует никаких телодвижений со
стороны разработчика.• Отлично работает с собранными
приложениями.
27 January 2017 51
27 January 2017
Visual Studio Code
• Синтаксический анализ кода с учетом указанных типов.
• Встроенный транспайлер.
Субъективно
• Есть компоненты. Один тип компонентов.• Есть директивы. Один тип директив.• Есть сервисы. Один тип сервисов.
27 January 2017 53
Спасибо!
27 January 2017 54
А что дальше?
27 January 2017 55
27 January 2017
Angular 2 Universal
• Инструмент от команды A2.• Рендеринг статических страниц на
сервере.• Пре-рендер и ре-рендер.• Невероятно крутой API refence.
27 January 2017
NativeScript
27 January 2017
angular
27 January 2017
angular-react
27 January 2017
angular-react-native
27 January 2017
angular-react-native-renderer