angular 2 on production

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

Shadow DOM

Shadow DOM

27 January 2017 10

Shadow DOM

27 January 2017 11

Shadow DOM – Emulated

27 January 2017 12


27 January 2017 13


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

angular 2 on production

Technology