reactive, component 그리고 angular2
TRANSCRIPT
- “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