JSCON:16 컨퍼런스 발표자료 http://www.jscon.io/

1. Reactive, Component 그리고
Angular 2
Jeado Ko
haibane84@gmail.com

2. +jeado.ko
haibane84@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

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

4. Angular 2
Component Reactive

5. 목차
Angular 2 101
컴포넌트component
리엑티브reactive

6. Angular 2 101

7. Angular 2 RC 5

8. Framework to Platform
Dependency
Injection
Decorators Zones
Compile Change Render
Material
(UI Tool)
Angular Mobile
(Progressive Web App
Support)
Universal
(Isomorphic Support)
Angular CLI
(Build tool)
Language
Services
Augury
(debugging)
ngUpgrade
Router
Animation
i18n

9. ????????????

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

11. cli.angular.io

12. 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

13. With Angular CLI...
ng new AwesomeApp
cd AwesomeApp
ng serve

14. Workflow Automation: Angular CLI
Create
Project
Generate
Components
Dev Server
Deploy!
Scaffold
Tests
Lint &
Format
Generate
Routes
Run Tests
Preprocess
CSS
Deployment
Build
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓ ✓

15. Let`s create
new project

16. Typescript
• 마이크로 소프트의 Open Source 프로젝트
• 자바스크립트의 부족한 부분은 고치기 위한 시도
• 자바스크립트의 슈퍼셋 => 자바스크립트 + 정적 타입
(그리고 클래스, 인터페이스, 모듈 등…).
• 타입 어노테이션과 함께 ES6 문법을 사용하여 일반
자바스크립트로 컴파일 (컴파일 대상 : ES3, ES5, ES6).
• 어떠한 자바스크립트 에플리케이션은 타입스크립트
어플리케이션임

17. 타입스크립트 정의 파일
• .d.ts 확장자.
• 타입의 정의를 가능케함
• 외부 자바스크립트 라이브러리들의 타입 정의를 제공
Typescript
tsc app.tsapp.ts app.js
TSC - 타입스크립트 컴파일러 npm install -g typescript
typings - 타입스크립트 정의 파일들의 패키지 매니져 npm install typings --global
DefinitelyTyped (http://definitelytyped.org/): 타입스크립트 정의 파일들의 레파지토리 (github을 통해 호스팅)

18. Typescript
class 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

19. Typescript
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
Meta Annotation

20. Language Support
ES5 ES6 TypeScript Dart

21. Language Support
CompileNo Compile
ES5 ES6 TypeScript Dart

22. Language Support
TypesNo Types
ES5 ES6 TypeScript Dart

23. Language Support
TypeScriptES6 Dart
No JS
TypeScriptES6
JavaScript-Based Syntax
ES5

24. 컴포넌트

25. 웹 프레임워크의 발전
Library Feature-Complete
Framework
MVC
Framework
Component
AngularJS 2.0

27. Component
= Building block (LEGO)
= a group of HTML elements

28. Application
출처:
my-filter talks
talk talk
<my-filter>
<my-talk>
<my-talks>

29. Component is made of two
main parts
- View
- Logic

30. My First Component
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent {
}
View
Logic

31. Component
Template
Directive
Controller Component
ng1 ng2

32. 만들 데모 보여주기

33. Talks to components
var 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

34. 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

35. Data Binding in template

36. 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)

37. Rendering

38. universal.angular.io

39. Initial Rendering: Universal

40. Initial Rendering: Universal
Request

41. Initial Rendering: Universal
HTML + CSS

42. Initial Rendering: Universal
JS

43. Initial Rendering: Universal
Node.js
ASP.NET
Others...

44. 리엑티브

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

47. ● Reactive programming은 프로그램 패러다임
● Reactive programming은 비동기 데이터 스트림을 가지고
하는
프로그래밍
● 프론트엔드에선 주로 Observables과 함께하는 프로그래밍
Reactive Programming

48. We have problems
Async is hard
Stream is hard

49. & async

50. ● DOM Events
● Animations
● AJAX
● WebSockets
● SSE
● etc...
Async 예시 Stream 예시
● Mouse movement
● User Input
● WebSockets
● Animations
● Ajax Polling
● etc...

51. RxJS

52. Observer pattern
Iterator pattern
+ Function Programming
ReactiveX

54. What is Observables?
- Like promise - async
- Like arrays - many values
- Lazy
- Reusable
- Disposable
- Composable

55. 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’)
)

56. 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

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

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

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

60. let o = Observable.interval(1000);
let sub = o.subscribe(v => console.log(v));
//later
sub.unsubscribe();
Observables - disposal

61. let iterable = [1, "3", "xyz", 6];
iterable
.forEach(x => console.log(x));
Iterator

62. let iterable = [1, "3", "xyz", 6];
Rx.Observable.from(iterable)
.subscribe(x => console.log(x));
Iterator

63. 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

64. 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

65. 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

66. let obs = Rx.Observable
.fromEvent(document, "mousemove");
obs.subscribe(x=>console.log(x));
Iterator

68. Let`s use Observable in
Angular 2

70. 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

71. Thanks you
QnA