Reactive, Component 그리고 Angular 2

Jeado Kohaibane84@gmail.com

+jeado.kohaibane84@gmail.com

- “Google Developer Expert” - Web Technology

- “Bitfinder.co” Software Engineer

- “http://webframeworks.kr” AngularJS Tutorial Contributor

- “Google Developer Group Korea WebTech” Organizer

- “시작하세요 AngularJS wikibooks” Author

Awair어웨어는 공기에서 가장 중요한 5가지 요소인 온도, 습도, 이산화탄소 , VOC(휘발성유기화합물 ), 미세먼지를 측정합니다. 그리고 측정치를 바탕으로 전체 공기 상태를 분석해냅니다. 분석된 공기 상태는 0-100점 사이의 점수인 어웨어 스코어로 계산되며, 각 점수대는 특정한 색상으로 표현됩니다. 0점은 최악의 공기 상태를 의미하며, 100점은 최상의 공기 상태를 의미합니다.

Angular 2

Component Reactive

목차Angular 2 101컴포넌트component

리엑티브reactive

Angular 2 101

Angular 2 RC 5

Framework to Platform

DependencyInjection Decorators Zones

Compile Change Render

Material(UI Tool)

Angular Mobile(Progressive Web App

Support)

Universal(Isomorphic Support)

Angular CLI(Build tool)

LanguageServices

Augury(debugging)

ngUpgrade

Router

Animation

i18n

????????????

We have problems- Bad for mobile- Bad for huge application- Bad for $scope- Bad for Directive- Bad for speed

cli.angular.io

Previously...

Create a project directory

Write a tsconfig.json file

Write a typings.json file

Write a package.json file

Install packages

Create folder structure

Write app.component.ts

Write main.ts

Write index.html

Write style.css

npm start

With Angular CLI...

ng new AwesomeApp

cd AwesomeApp

ng serve

Workflow Automation: Angular CLI

Create Project

Generate Components Dev Server

Deploy!

Scaffold Tests

Lint & Format

Generate Routes

Run Tests Preprocess CSS

Deployment Build

✓ ✓ ✓

✓ ✓ ✓

✓ ✓ ✓ ✓

Let`s create new project

Typescript

• 마이크로 소프트의 Open Source 프로젝트

•자바스크립트의 부족한 부분은 고치기 위한 시도

•자바스크립트의 슈퍼셋 => 자바스크립트 + 정적 타입 (그리고 클래스, 인터페이스 , 모듈 등…).

•타입 어노테이션과 함께 ES6 문법을 사용하여 일반 자바스크립트로 컴파일 (컴파일 대상 : ES3, ES5, ES6).

•어떠한 자바스크립트 에플리케이션은 타입스크립트 어플리케이션임

타입스크립트 정의 파일

• .d.ts 확장자.

• 타입의 정의를 가능케함

• 외부 자바스크립트 라이브러리들의 타입 정의를 제공

Typescript

tsc app.tsapp.ts app.js

TSC - 타입스크립트 컴파일러 npm install -g typescript

typings - 타입스크립트 정의 파일들의 패키지 매니져 npm install typings --global

DefinitelyTyped (http://definitelytyped.org/): 타입스크립트 정의 파일들의 레파지토리 (github을 통해 호스팅)

Typescriptclass Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; }}

var greeter = new Greeter("world");

var button = document.createElement('button');button.textContent = "Say Hello";button.onclick = function() { alert(greeter.greet());}

document.body.appendChild(button);

Type Annotation

Typescript

import { Component } from '@angular/core';

@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }

Meta Annotation

Language Support

ES5 ES6 TypeScript Dart

Language Support

CompileNo Compile

ES5 ES6 TypeScript Dart

Language Support

TypesNo Types

ES5 ES6 TypeScript Dart

Language Support

TypeScriptES6 Dart

No JS

TypeScriptES6

JavaScript-Based Syntax

ES5

컴포넌트

웹 프레임워크의 발전

Library Feature-CompleteFramework

MVCFramework

Component

AngularJS 2.0

Component

= Building block (LEGO)= a group of HTML elements

Application

출처: https://vsavkin.com/the-core-concepts-of-angular-2-c3d6cbe04d04#.his34hjyo

my-filter talks

talk talk

<my-filter>

<my-talk>

<my-talks>

Component is made of two main parts

- View- Logic

My First Component

import {Component} from '@angular/core';

@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) class AppComponent { }

View

Logic

Component

Template Directive Controller Component

ng1 ng2

만들 데모 보여주기

Talks to componentsvar HEROES = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }];@Component({ selector: 'my-app', template: ` <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <my-hero-detail [hero]="selectedHero"></my-hero-detail>`, directives: [HeroDetailComponent]})export class AppComponent { heroes = HEROES; selectedHero; onSelect(hero: Hero) { this.selectedHero = hero; }}

AppComponent

HeroDetailComponent

SelectedHero

Talks to components@Component({ selector: 'my-hero-detail', template: ` <div *ngIf="hero"> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"/> </div> </div>`})export class HeroDetailComponent { @Input() hero: Hero;}

AppComponent

HeroDetailComponent

SelectedHero

Data Binding in template

Compiling in Angular 1

xhr(browser)

Parser(browser)

DOM(browser)

Angular 1(JS)

build

Compiling in Angular 2

template(file)

Parser(node)

AST(node)

Source(JS)

Source(browser)

Angular 2(JS)

Rendering

universal.angular.io

Initial Rendering: Universal

Initial Rendering: Universal

Request

Initial Rendering: Universal

HTML + CSS

Initial Rendering: Universal

JS

Initial Rendering: Universal

Node.js

ASP.NET

Others...

리엑티브

Reactive Programmingprogramming paradigm oriented around data flows and the propagation of change‒ wikipedia.org/wiki/Reactive_programming

● Reactive programming은 프로그램 패러다임

● Reactive programming은 비동기 데이터 스트림을 가지고 하는

프로그래밍

● 프론트엔드에선 주로 Observables과 함께하는 프로그래밍

Reactive Programming

We have problems

Async is hardStream is hard

& async

● DOM Events● Animations● AJAX● WebSockets● SSE● etc...

Async 예시 Stream 예시● Mouse movement● User Input● WebSockets● Animations● Ajax Polling● etc...

RxJS

Observer pattern

Iterator pattern

+ Function Programming

ReactiveX

What is Observables?- Like promise - async

- Like arrays - many values

- Lazy

- Reusable

- Disposable

- Composable

Observables

let o = new Observable((sink:Subscriber) => { //do stuff here});

let sub = o.subscribe( (val) => console.log(val), (err) => console.error(err), () => console.log(‘done’))

let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3);});

let sub = o.subscribe((val) => console.log(val));//1//2//3

Observables - propagating values

let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3); sink.complete();});

Observables - completion

let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3); sink.error(‘OHNOES’);});

Observables - errors

let o = new Observable((sink:Subscriber) => { let id = setInterval(() => { sink.next(‘tick’); }, 1000); return () => //cleanup clearInterval(id);});

Observables - disposal

let o = Observable.interval(1000);

let sub = o.subscribe(v => console.log(v));

//later

sub.unsubscribe();

Observables - disposal

let iterable = [1, "3", "xyz", 6];

iterable .forEach(x => console.log(x));

Iterator

let iterable = [1, "3", "xyz", 6];

Rx.Observable.from(iterable) .subscribe(x => console.log(x));

Iterator

let iterable = [1, "3", "xyz", 6];

let result = iterable .map(x => parseInt(x)) .filter(x => !!x) .reduce((akk, x) => akk+x, 0);

console.log(result);

Iterator

let iterable = [1, "3", "xyz", 6];

let obs = Rx.Observable.from(iterable) .map(x => parseInt(x)) .filter(x => !!x) .reduce((akk, x) => akk+x, 0);

obs.subscribe(x => console.log(x));

Iterator

let iterable = [1, "3", "xyz", 6];

let obs = Rx.Observable.from(iterable) .map(x => parseInt(x)) .filter(x => !!x) .reduce((akk, x) => akk+x, 0);

obs.subscribe(x => console.log(x));

Iterator

let obs = Rx.Observable .fromEvent(document, "mousemove");

obs.subscribe(x=>console.log(x));

Iterator

Let`s use Observable in Angular 2

References- https://angular.io/

- AngularConnect Keynote 2015

- ngConf 2016 day 1 Keynote

- ngConf 2016 day 2 Keynote

- ngVegas The Angular 2 Glossary

- reactive javascript

- Fluent 2016 - Reactive Angular2

Thanks youQnA