ONE YEAR OF ANGULAR 2 ON PRODUCTION

Oleksandr Tryshchenko

Senior Front-end Developer, Dataart

29 April 2017

Agenda

• Why?

• How?

• Problems

• How to solve problems

• Examples

• Q&A

What we expected from technology

• It doesn’t force you to write infrastructure code

• Stable framework with active community

• Simple team complectation

• Consistent ecosystem and similar architecture for all projects

• High level of abstraction and real boost for developent

• Low coupling

• Testability.

29 April 2017 5

What we wanted from technology

• High performance.

• Compatibility with old browsers.

• Long product lifecycle.

29 April 2017 6

29 April 2017

Web Components

• Shadow DOM

• Templates

• Imports

• Custom Elements

29 April 2017

Web Components

• Shadow DOM

• Templates

• Imports

• Custom Elements

29 April 2017

Shadow DOM

Shadow DOM

29 April 2017 10

Shadow DOM

29 April 2017 11

Shadow DOM – Emulated

29 April 2017 12

Shadow DOM – Emulated

29 April 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

29 April 2017 14

Shadow DOM – Pseudoselectors

:host

/deep/

29 April 2017 15

viewEncapsulation

• None – don’t use Shadow DOM.

• Emulated – emulate Shadow DOM behavior (Default).

• Native – turn on the native implementation.

29 April 2017 16

Component Declaration

29 April 2017 17

29 April 2017

Angular CLI

• Official tool.

• Standardization and totalitarism.

• Achieves time on routine.

• Configures Webpack instead of you .

• Expect unit tests from developer.

29 April 2017

Angular CLI – possibilities

It can:

• Scaffold an empty project

• Generate components, services, pipess

• Generate infrastructure: tests, builds

• Syntax code analysis

• Development environment

• Code formatting

Angular CLI ?

29 April 2017 21

29 April 2017

Angular CLI - Webpack

29 April 2017

Anders Hejlsberg

Was working on:

• Turbo Pascal

• Delphi

• C#

• TypeScript

29 April 2017

TypeScript

• Very flexible transpiler

• Types control

• Interfaces

• Mixins

• Namespaces

TS Type handling

• Interfaces

• Check function types and arguments

• Check types of object properties

• Check function return values

• Possibility to declare your own types

• Enum

29 April 2017 25

private models = new Observable<Correlation[]>();

29 April 2017 F O O T E R H E R E 26

TS Decorators(ESXXXX Decorators)

29 April 2017 27

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() { }

}

Decorators

29 April 2017 28

Decorators

29 April 2017 29

Decorators

29 April 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 30

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;

}

29 April 2017 31

29 April 2017

Binding

One-direction «inside»:

• {{expression}}

• [target] = "expression"

• bind-target = "expression"

29 April 2017

Binding

One-direction «внаружу»:

• (target) = "statement"

• on-target = "statement"

29 April 2017

Binding

Two-way

• [(target)] = "expression"

• bindon-target = "expression"

Key Value Differs

29 April 2017 35

29 April 2017

ReactiveX (Rx.js)

• Another way to organize async actions

• Cause the new way of component

composition

Using flatMap and switchMap

29 April 2017 37

Rx.js + A2

PROS

- Allows us to remove http logic from components

- Can be used with an async pipe

CONS

- Require composition changes

- Implements toPromise() method

29 April 2017 38

Composition of components

29 April 2017 39

Rx.js

29 April 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

• Cool errors trace.

• Dirty-checking.

• You can stop all the async actions after component

destruction

29 April 2017 41

Web Animations API

29 April 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 42

ANGULAR 2 0

ANIMATIONS MATIAS

NIEMELA

ANGULARCONNECT

Angular 2 Forms

29 April 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 43

ANGULAR 2 FORMS

KARA ERICKSON

Compatibility

• App particulary compiles into ES5.

• CLI generates polyfills.brower.ts.

• Won’t work on Safari and IE .

• We need to include intl polyfill.

29 April 2017 44

Debugging of Angular 2 applications

29 April 2017 45

@angular/core/testing

- Jasmine

- Karma

- Protractor (e2e)

29 April 2017 46

29 April 2017

Augury

• Official tool from A2 team.

• Don’t need any efforts from developer.

• Works well with an built app.

29 April 2017 48

29 April 2017

Visual Studio Code

• Syntax analysis and smart suggestions

based on types and interfaces

• Built-in transpiler

Personal

• Components. Only one type of components.

• Directives. Only one type of directives.

• Services. Only one type of services.

29 April 2017 50

Thanks!

29 April 2017 51

What’s after?

29 April 2017 52

29 April 2017

Angular 2 Universal

• Official tool.

• Renders static pages on server side.

• Pre-render and re-render.

• Cool API reference.

29 April 2017

NativeScript

29 April 2017

angular

29 April 2017

angular-react

29 April 2017

angular-react-native

29 April 2017

angular-react-native-renderer