About me

• TOPGATE, Inc.
• I 💖 Google / 🍺 / Anime
• TypeScript/Golang
• Angular2 Info
  https://ng2-info.github.io

Agenda

• FAQ and Misunderstanding
• Angular 2 Fundamental
• Things to Learn Angular 2

FAQ and Misunderstanding

the Fact

"Angular" contains ...

• Framework library
• Browser/Web Worker/Electron/Native/...
• Server-side
• CLI
• ...

"Angular" = Platform

Why TypeScript?

• Static type checking
• Decorators
• Type-base DI

Static Types

Types as API documents

• Always correct
• Compiler check
• Generics: Type-safe collection
• Auto-completions

@Decorators()

Spec: javascript-decorators
Status: tc39/ecma262

• Class and Property: Stage 1
• Function: Stage 0
• Method: Stage 0

tsc --experimentalDecorators

Component definition (ES5)

var ProfileComponent = ng.core.Component({
    selector: "app-profile",
    template: "<p>Name: {{ name }}</p>"
}).Class({
    constructor: function() {
        this.name = "laco";
    }
});

Component definition (TS)

@Component({
    selector: "app-profile",
    template: "<p>Name: {{ name }}</p>"
})
class ProfileComponent {
    name: string;
    constructor() {
        this.name = "laco";
    }
}

Type-base DI

import {Http} from "angular2/http";

@Injectable()
class MyService {
    constructor(private anyNameForHttp: Http) {
    }
}

Good-bye "$http"

Angular 2 with TypeScript

Safe & Productive

Component Helper

angular.module("myApp")
    .component("myComponent", {...});

<my-component></my-component>

Component Router

$routeConfig: [
    { path: '/a/b/c', component: 'myComponent' },
    ...
]

ng-model

<input ng-model="myName">
<span>{{ myName }}</span>

Two-way Data-binding

[(ngModel)]

<input [(ngModel)]="myName">

<input [ngModel]="myName"
    (ngModelChange)="myNameChanged($event)">

Sugar of One-way + Event handler

• Explicit Syntax: [()]
• Simple API

Code Generate

Angular generates VM friendly code

• on bootstrapping
• Component specific checker: Change Detector
• 100000 checks / ~10 ms

Don't worry number of $watch!

Angular Universal

• One of the Angular Project
• Run on Node.js
• Same API as on Browser: "angular2/core"
• Can Reuse Components

In the future...

Node.js / Java / PHP / .Net / Python / ...

Use ShadowDOM

ViewEncapsulation

@Component({
    selector: "my-component",
    encapsulation: ViewEncapsulation.Native
})
class MyComponent{}

Default: ViewEncapsulation.Emulated

ViewEncapsulation.Emulated

ViewEncapsulation.Native

Angular 2 Fundamental

SystemJS

Dynamic Module Loader
systemjs/systemjs

• Loads modules in Runtime
• For Lazy Loading
• Polyfill for Browser Loader

SystemJS is NOT required

• Used for Bundled JS
• npm package never requires SystemJS
• You can use Browserify / Webpack / JSPM / ...

RxJS

Reactive Programming in JavaScript
ReactiveX/RxJS

• Polyfill for Observable
• Useful Operators
• "Lodash for Async"

Observable

Spec: es-observable
Status: tc39/ecma262

• Proposal: Stage 1
• Sequential Async Data

Observable vs Promise

• Multiple vs Once
• Cancelable vs Uncancelable
• Writable vs Read-only
• Lazy vs Not Lazy

Async on the Web

• DOM Events : Multiple
  <input onkeyup="...">
• Animations : Cancelable
  element.animate(...).cancel()
• WebSockets : Multiple
  connection.onmessage(e=>...)
• Ajax : Cancelable
  xhr.abort()

Zones

Spec: Zones
Status: tc39/ecma262

• Proposal: Stage 0
• a logical asynchronous context
• Events: beforeTask(), afterTask(), ...

Zones

zone.fork({
    onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {
        try {
            console.log("before")
            return delegate.invokeTask(target, task, applyThis, applyArgs);
        } finally {
            console.log("after");
        }
    }
}).run(() => {
    setTimeout(() => { console.log("task"); }, 0);
});

Changes

Changes happens in ...:

• XHR: Ajax responce
• Timer: setTimeout(), setInterval()
• View Events: click, submit

Async tasks Changes
=> Angular watches all task

reflect-metadata

• Reflection for Decorators
• Component metadata from Decorator

tsc --emitDecoratorMetadata

Things to Learn Angular 2

How to get happy Angular days

XXX = Simplicity

Angular 1

ngClick, ngKeydown, ngKeyup, ngBlur, ngMaxLength, ngMinLength, ngMouseOver, ngMouseLeave, ngBind, ngFocus, ...

.directive(), .controller(), .service(), .factory(), .constant(), .config(), ...

Angular 2

Properties: <input [value]="userName">

Events: <button (click)="send($event)">...</button>

Two-way: <input [(ngModel)]="userName">

Component: @Component

XXX = Performance

• dirty-checking
• two-way bindings
• $digest loop

What's Change Detection?

Check changes

• Every component has own CD
• 100000 checks / 10ms
• Change Detectors Tree:

One-way checking

ChangeDetectionStrategy

XXX = Toolability

Tooling

"Analyzability"

<my-directive
    prop1="ctrl.someProp"
    prop2="some text">
</my-directive>

Expression? Text?

Angular 2

<my-directive
    [prop1]="someProp"
    prop2="some text">
</my-directive>

Static Analyzable

Things to learn

Angular on the (Next) Web Standards

• ES2015
• Decorators
• Observables
• Zones

To Learn: Angular feature < Web Standards

Coming soon

• ES2016 / ES.next
• Web Components
• Web Animations
• Module Loader
• ServiceWorker
• ...

Don't scare Open Source

• Have Confidence
• Keep Learning
• Keep Creating
• Keep Improving

You can also...

• Join a Conference (just now!)
• Go to Meetup
• Write Articles
• Discuss on SNS

Everyone has Something to Teach Others