reactive, component 그리고 angular2
TRANSCRIPT
![Page 2: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/2.jpg)
- “Google Developer Expert” - Web Technology
- “Bitfinder.co” Software Engineer
- “http://webframeworks.kr” AngularJS Tutorial Contributor
- “Google Developer Group Korea WebTech” Organizer
- “시작하세요 AngularJS wikibooks” Author
![Page 3: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/3.jpg)
Awair어웨어는 공기에서 가장 중요한 5가지 요소인 온도, 습도, 이산화탄소 , VOC(휘발성유기화합물 ), 미세먼지를 측정합니다. 그리고 측정치를 바탕으로 전체 공기 상태를 분석해냅니다. 분석된 공기 상태는 0-100점 사이의 점수인 어웨어 스코어로 계산되며, 각 점수대는 특정한 색상으로 표현됩니다. 0점은 최악의 공기 상태를 의미하며, 100점은 최상의 공기 상태를 의미합니다.
![Page 4: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/4.jpg)
Angular 2
Component Reactive
![Page 5: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/5.jpg)
목차Angular 2 101컴포넌트component
리엑티브reactive
![Page 6: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/6.jpg)
Angular 2 101
![Page 7: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/7.jpg)
Angular 2 RC 5
![Page 8: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/8.jpg)
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
![Page 9: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/9.jpg)
????????????
![Page 10: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/10.jpg)
We have problems- Bad for mobile- Bad for huge application- Bad for $scope- Bad for Directive- Bad for speed
![Page 11: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/11.jpg)
cli.angular.io
![Page 12: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/12.jpg)
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
![Page 13: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/13.jpg)
With Angular CLI...
ng new AwesomeApp
cd AwesomeApp
ng serve
![Page 14: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/14.jpg)
Workflow Automation: Angular CLI
Create Project
Generate Components Dev Server
Deploy!
Scaffold Tests
Lint & Format
Generate Routes
Run Tests Preprocess CSS
Deployment Build
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓ ✓
![Page 15: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/15.jpg)
Let`s create new project
![Page 16: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/16.jpg)
Typescript
• 마이크로 소프트의 Open Source 프로젝트
•자바스크립트의 부족한 부분은 고치기 위한 시도
•자바스크립트의 슈퍼셋 => 자바스크립트 + 정적 타입 (그리고 클래스, 인터페이스 , 모듈 등…).
•타입 어노테이션과 함께 ES6 문법을 사용하여 일반 자바스크립트로 컴파일 (컴파일 대상 : ES3, ES5, ES6).
•어떠한 자바스크립트 에플리케이션은 타입스크립트 어플리케이션임
![Page 17: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/17.jpg)
타입스크립트 정의 파일
• .d.ts 확장자.
• 타입의 정의를 가능케함
• 외부 자바스크립트 라이브러리들의 타입 정의를 제공
Typescript
tsc app.tsapp.ts app.js
TSC - 타입스크립트 컴파일러 npm install -g typescript
typings - 타입스크립트 정의 파일들의 패키지 매니져 npm install typings --global
DefinitelyTyped (http://definitelytyped.org/): 타입스크립트 정의 파일들의 레파지토리 (github을 통해 호스팅)
![Page 18: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/18.jpg)
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
![Page 19: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/19.jpg)
Typescript
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
Meta Annotation
![Page 20: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/20.jpg)
Language Support
ES5 ES6 TypeScript Dart
![Page 21: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/21.jpg)
Language Support
CompileNo Compile
ES5 ES6 TypeScript Dart
![Page 22: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/22.jpg)
Language Support
TypesNo Types
ES5 ES6 TypeScript Dart
![Page 23: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/23.jpg)
Language Support
TypeScriptES6 Dart
No JS
TypeScriptES6
JavaScript-Based Syntax
ES5
![Page 24: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/24.jpg)
컴포넌트
![Page 25: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/25.jpg)
웹 프레임워크의 발전
Library Feature-CompleteFramework
MVCFramework
Component
AngularJS 2.0
![Page 26: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/26.jpg)
![Page 27: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/27.jpg)
Component
= Building block (LEGO)= a group of HTML elements
![Page 28: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/28.jpg)
Application
출처: https://vsavkin.com/the-core-concepts-of-angular-2-c3d6cbe04d04#.his34hjyo
my-filter talks
talk talk
<my-filter>
<my-talk>
<my-talks>
![Page 29: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/29.jpg)
Component is made of two main parts
- View- Logic
![Page 30: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/30.jpg)
My First Component
import {Component} from '@angular/core';
@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) class AppComponent { }
View
Logic
![Page 31: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/31.jpg)
Component
Template Directive Controller Component
ng1 ng2
![Page 32: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/32.jpg)
만들 데모 보여주기
![Page 33: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/33.jpg)
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
![Page 34: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/34.jpg)
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
![Page 35: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/35.jpg)
Data Binding in template
![Page 36: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/36.jpg)
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)
![Page 37: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/37.jpg)
Rendering
![Page 38: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/38.jpg)
universal.angular.io
![Page 39: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/39.jpg)
Initial Rendering: Universal
![Page 40: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/40.jpg)
Initial Rendering: Universal
Request
![Page 41: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/41.jpg)
Initial Rendering: Universal
HTML + CSS
![Page 42: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/42.jpg)
Initial Rendering: Universal
JS
![Page 43: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/43.jpg)
Initial Rendering: Universal
Node.js
ASP.NET
Others...
![Page 44: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/44.jpg)
리엑티브
![Page 45: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/45.jpg)
Reactive Programmingprogramming paradigm oriented around data flows and the propagation of change‒ wikipedia.org/wiki/Reactive_programming
![Page 46: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/46.jpg)
![Page 47: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/47.jpg)
● Reactive programming은 프로그램 패러다임
● Reactive programming은 비동기 데이터 스트림을 가지고 하는
프로그래밍
● 프론트엔드에선 주로 Observables과 함께하는 프로그래밍
Reactive Programming
![Page 48: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/48.jpg)
We have problems
Async is hardStream is hard
![Page 49: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/49.jpg)
& async
![Page 50: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/50.jpg)
● DOM Events● Animations● AJAX● WebSockets● SSE● etc...
Async 예시 Stream 예시● Mouse movement● User Input● WebSockets● Animations● Ajax Polling● etc...
![Page 51: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/51.jpg)
RxJS
![Page 52: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/52.jpg)
Observer pattern
Iterator pattern
+ Function Programming
ReactiveX
![Page 53: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/53.jpg)
![Page 54: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/54.jpg)
What is Observables?- Like promise - async
- Like arrays - many values
- Lazy
- Reusable
- Disposable
- Composable
![Page 55: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/55.jpg)
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’))
![Page 56: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/56.jpg)
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
![Page 57: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/57.jpg)
let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3); sink.complete();});
Observables - completion
![Page 58: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/58.jpg)
let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3); sink.error(‘OHNOES’);});
Observables - errors
![Page 59: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/59.jpg)
let o = new Observable((sink:Subscriber) => { let id = setInterval(() => { sink.next(‘tick’); }, 1000); return () => //cleanup clearInterval(id);});
Observables - disposal
![Page 60: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/60.jpg)
let o = Observable.interval(1000);
let sub = o.subscribe(v => console.log(v));
//later
sub.unsubscribe();
Observables - disposal
![Page 61: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/61.jpg)
let iterable = [1, "3", "xyz", 6];
iterable .forEach(x => console.log(x));
Iterator
![Page 62: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/62.jpg)
let iterable = [1, "3", "xyz", 6];
Rx.Observable.from(iterable) .subscribe(x => console.log(x));
Iterator
![Page 63: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/63.jpg)
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
![Page 64: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/64.jpg)
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
![Page 65: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/65.jpg)
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
![Page 66: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/66.jpg)
let obs = Rx.Observable .fromEvent(document, "mousemove");
obs.subscribe(x=>console.log(x));
Iterator
![Page 67: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/67.jpg)
![Page 68: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/68.jpg)
Let`s use Observable in Angular 2
![Page 69: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/69.jpg)
![Page 70: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/70.jpg)
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
![Page 71: Reactive, component 그리고 angular2](https://reader034.vdocuments.net/reader034/viewer/2022042611/58714ad01a28ab55588b6829/html5/thumbnails/71.jpg)
Thanks youQnA