Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Angular2
React
vs
DEVIEW 2016
우리는 왜
이 발표를 하는가?
우리의 관심사
Angular2
React
React’s
Family
Angular2 React
버전 2.1.0 15.3.2
개발사 Google Facebook
깃허브 별수 17k 51k
컨트리뷰터 338 804
HTML 스크립팅 Template JSX
데이터 동기화 Data Bindin...
Angular2
vs
React
314k
vs
240k
Webpack 최적화 빌드 기준
angular2(AOT) = core + “platform-browser-zone” + core.js
react = react + redux
성능?Angular v2.0.0
React v15.3.1
Vanilla
https://github.com/CoderK/js-framework-benchmark
성능?1. 1000개의 행 생성
2. 10,000개의 행 생성
3. 1,000개의 행 생성
4. 10의 배수인 행 삭제
5. 모든 행 삭제
6. 특정 셀의 데이터 교체
https://github.com/CoderK/js...
처리속도(기하평균)
2.12 2.00
1.00
0
0.55
1.1
1.65
2.2
2.75
Angular 2.0.0 React v15.2.1 Vanilla
2.67
1.79
1.00
0
0.7
1.4
2.1
2.8
3.5
Angular 2.0.0 React v15.2.1 Vanilla
카테고리 축
제목메모리 사용량
Framework,
왜사용하는 걸까?
생산성?
학습 비용
생태계
신뢰성
개발환경 구축/유지
코드 구현의 용이성
커뮤니케이션
Let's Talk About
학습 비용
생태계
신뢰성
개발환경 구축/유지
코드 구현의 용이성
커뮤니케이션
Table Of Contents
1. 개발환경
2. 언어 생산성
3. 컴포넌트
4. 데이터 동기화
5. 비동기 처리
1.
개발환경
프로젝트 시작시
항상 고민하는 문제
2.
언어 생산성
JavaScript의 영역 확장
애플리케이션의 다양성과 복잡도 증가
대규모 협업시 동적 언어의 한계
Flow?
Facebook이 만든 정적 타입 검사기
React와 별개 프로젝트,
함께 사용할 수 있을 뿐!
Flow?
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
move(x: number, y: numbe...
from http://www.npmdiscover.com/
4% ↓
얼마나 사용하고 있을까?
const todos = [
{id: 1, text: 'Do something', completed: true},
{id: 2, text: 'Do another thing', completed: false}
];
con...
interface Todo {
id: number;
text?: string;
completed: boolean;
}
const todos = [
{id: 1, text: 'Do something', completed:...
interface Todo {
id: number;
text?: string;
completed: boolean;
}
const todos = [
{id: 1, text: 'Do something', completed:...
외부 모듈이 타입을
제공하지 않는다
면?1. 타입 정의 파일이 있는지 검색한다
1. 타입 정의 파일이 있는지 검색한다
2. 없으면 네가 만든다
외부 모듈이 타입을
제공하지 않는다
면?
1. 타입 정의 파일이 있는지 검색한다
2. 없으면 네가 만든다
3. 귀찮으면 Any로 선언하거나 타입 없이 코딩한다
외부 모듈이 타입을
제공하지 않는다
면?
비용> 소득
따져봐야 할 일
Angular2는
왜 TypeScript를
강요하나요?
“
Angular2는,
TypeScript라서 싫어요
”
트랜스컴파일 언어?
새로운 언어?
Metadata
Metadata
Annotations
Optional
Type
Optional Type Types
언어 생산성 향
상
Angular2의 고민
웹표준 지향
ES6
ES
5
classes
modules
ES...
TypeScript 사용에 따른
비용 >? 소득
당근, 따져보자!
TypeScript
function sum(value: Array<number>): number {
return value.reduce( (sum, v) => sum + v),0);
}
JavaScript
functio...
TypeScript
= ES.Next
= JavaScript의 SuperSet
JavaScript 개발자라면
선투자
새로운 언어, 학습비용?
3.
컴포넌트
하나의 독립된 기능을
수행하는 최소 단위 UI
Angular2와 React 모두 컴포넌트 설계를 지향
컴포넌트 = HTML + JS +
CSS
@Component({
selector: 'app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEnca...
React의
컴포넌트는 반쪽짜
리
<div class="layout">
<div class="left">{{value1}}</div>
<div class="right">{{value2}}</div>
<div class=...
더 정이 안 가는 이유는
JSX in JS
render() {
return (
<section className="main">
<ul className="todo-list">
{
this.getItems()
.map(item => {
return (
<TodoI...
<div>
<div className="active">
<input defaultValue="value"/>
</div>
<footer></footer>
<div>
React
<div class="active">
<in...
인정!
그런데 잠깐,
템플릿은
협업과 무관한가?
<h1>Users</h1>
<div>Loading users data</div>
<div>
<button type="button">Load More Users</button>
<a href="#">Create user<...
<h1>Users</h1>
<div *ngIf="loading">Loading users data</div>
<div *ngIf="!loading">
<button type="button"
loading-btn
[loa...
<h1>Users</h1>
<div *ngIf="loading">Loading users data</div>
<div *ngIf="!loading">
<button type="button"
loading-btn
[loa...
Just
Syntactic SugarNot HTML, Not Template
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
render() {
return <div>Hello {this.props.name}</div>;
}
render() {
return (
<section className="main">
<ul className="todo-list">
{
this.getItems()
.map(item => {
debugger;
retur...
JSX = 구조 + 기능
JSX in JavaScript는
구조와 기능을 자연스럽게 표현
기능 확장,
의존 컴포넌트 주입(HOF)
export const Sortable = (props) => {
return (
<Sortable>
{ props.children }
</Sortable>
)
}
// Sort...
기능 확장,
의존 컴포넌트 주입(HOF)
export const Sortable = (props) => {
return (
<Sortable>
{ props.children }
</Sortable>
)
}
// Sort...
export const Sortable = (props) => {
return (
<Sortable>
{ props.children }
</Sortable>
)
}
// SortableBox
<Sortable><Box>...
<Sortable>
<Box></Box>
</Sortable>
compose(sortable, box);
new Sortable(new Box());
둘일 때는 불리,
하지만 혼자라면?
4.
데이터 동기화
뷰(View)와 모델(Model)의 분리,
데이터 동기화 문제 등장
UI 개발 프레임워크가 책임지는 핵심
Angular’s
Data Binding
DOM View Model
Angular’s
Data Binding
DOM View Model
Two Way
Data Binding
DOM View Model
Two Way
Data Binding
DOM View Model
DOM
View
Model
DOM
View Model
DOM
View Model
DOM
View Model
DOM
View
DOM
View
DOM
View
DOM
View
Mode
l
Mode
l
Mode
l
Mode
l
View
View
View
DOM
Mode
l
DOM
DOM
Let’s Reactive
DOM View
Let’s Reactive
DOM View
Let’s Reactive
Virtual DOM + Reconciliation
DOM
Virtual
DOM
Let’s Reactive
Virtual DOM + Reconciliation
DOM
Virtual
DOM
Virtual
DOM
Let’s Reactive
Virtual DOM + Reconciliation
DOM
Virtual
DOM
Virtual
DOM
Diff
Virtual DOM
Virtual DOM
변경 전 변경 후
변경 전 변경 후
DOM
변경 전
변경 후
Patch
양방향 데이터 바인딩이
복잡도를 증가시킨다?
class MyForm extends React.Component {
constructor() {
this.state = {value: 'Hello!'};
this.handleChange = this.handleChan...
@Component({
selector: 'form',
template: [`
<div>
<input type="text" [(ngModel)]=“state.value”/>
<button (click)=“handleCl...
React, 짱먹어라
앞으로는 무분별하게
양방향 데이터 동기
화를
사용하지 않겠습니다.
<h1>{{data}}</h1>
Angular1
DOM
Mode
lView
2way-binding
Angular2
DOM
Mode
lView
1way-binding
<h1>{{data}}</h1>
!!!!CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
Change Detector DOM
Angular2
CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
CD
CD
$timeout(function() {
// something
}, 1000);
$http({
method: 'GET',
url: '/someUrl'
});
$scope.$apply();
비동기 액션이 끝나는 시점을 알...
ZoneJavaScript의 실행영역(Excute context)
실행영역에서 발생하는 작업을
Profile
Zone.current.fork({
onInvokeTask: (…): any => {
try {
this.onEnter();
return delegate.invokeTask(…);
} finally {
this.onLe...
timeout(function() {
// something
}, 1000);
somethingHttp({
method: 'GET',
url: '/someUrl'
});
model.value = "change!!!";
Angular1의 데이터 바인
딩
+ React 데이터 플로우의 심
플함
+ Zone을 이용한 사용성 개
선
데이터 바인딩?
Virtual DOM diff?
DOM이 아닌,
모델에 초점
React
DOM View Model
DOM View Model
Framework
담당
setState, action
명시적 호출
Angular2
DOM View Model
DOM View Model
Framework
담당
5.
비동기 처리
인터랙션 이벤트, 애니메이션, XMLHttpRequest,
멀티미디어 자원(이미지, 동영상…) 로딩,
WebWorker, WebRTC, WebSocket…
핑크빛 열애설
Angular2랑 RxJS…?
import React from 'react';
import Async from 'react-async';
import Rx from 'rx';
function defineXHRObservable(url) {
retur...
callback,
promise,
generator,
async/await
Observable
Subscriber
Message
Observable
Subscribe
Store
Component
State
Subscriber
SubjectMessage
Subscriber
Subject
Store
Action
Component
Subscriber
Subject
State
Action
Store
Component
Subscriber
Subject
Store
Component
http://www.slideshare.net/jayphelps/rxjs-redux-react-amazing
프레임워크 구현에
잘녹여진
RxJS
Zone.current.fork({
onInvokeTask: (…): any => {
try {
this.onEnter();
return delegate.invokeTask(…);
} finally {
this.onLe...
class NgZone {
private _onMicrotaskEmpty: EventEmitter;
private _onStable: EventEmitter;
private onLeave() { this.checkSta...
class EventEmitter extends Subject<T> {
emit(value) { super.next(value); }
}
Rx.Subject
산발적인 이벤트를
스트림(Stream)으
로
CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
Change Detector
CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
기억나시죠?
CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
Change Detector
Observable
+ OnPush ChangeDetectionStrategy
CD
CD
CD
CD
개발자 입장에서도
RxJS를 쉽게 사용
// HTTP
this.jsonp.get('http://url?callback=CALLBACK')
.map(res => console.log(res.json()));
// FORM
var term = new FormCo...
// Service
this.service.getSpreadsheet()
.filter(x => !!x)
.subscribe(v => {
this.spreadsheet = v;
});
}
서비스와 컴포넌트를 push 방...
RxJS
정말 좋은가?
그래서,
당신이 선택해야 할
프레임워크는?
최소 기능 기본 개발자의 선택
개발자의 선택최소 기능
데이타 동기화
컴포넌트
…
코딩 컨벤션
Application
Infra
…
찬욱의 생각
프레임워크 쓸거라면…
문제의 솔루션…
유연성?
구글?
훈민의 생각
선택은 개발자가 해야할 일
All-In-One, 글쎄?
구글?
감사합니다
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
Upcoming SlideShare
Loading in …5
×

[114]angularvs react 김훈민손찬욱

10,319 views

Published on

[114]angularvs react 김훈민손찬욱

Published in: Technology
  • Be the first to comment

[114]angularvs react 김훈민손찬욱

  1. 1. Angular2 React vs DEVIEW 2016
  2. 2. 우리는 왜 이 발표를 하는가?
  3. 3. 우리의 관심사 Angular2 React
  4. 4. React’s Family
  5. 5. Angular2 React 버전 2.1.0 15.3.2 개발사 Google Facebook 깃허브 별수 17k 51k 컨트리뷰터 338 804 HTML 스크립팅 Template JSX 데이터 동기화 Data Binding Virtual DOM + Diff 서버 렌더링 Supported Supported Angular2 vs React Overview
  6. 6. Angular2 vs React
  7. 7. 314k vs 240k Webpack 최적화 빌드 기준 angular2(AOT) = core + “platform-browser-zone” + core.js react = react + redux
  8. 8. 성능?Angular v2.0.0 React v15.3.1 Vanilla https://github.com/CoderK/js-framework-benchmark
  9. 9. 성능?1. 1000개의 행 생성 2. 10,000개의 행 생성 3. 1,000개의 행 생성 4. 10의 배수인 행 삭제 5. 모든 행 삭제 6. 특정 셀의 데이터 교체 https://github.com/CoderK/js-framework-benchmark
  10. 10. 처리속도(기하평균) 2.12 2.00 1.00 0 0.55 1.1 1.65 2.2 2.75 Angular 2.0.0 React v15.2.1 Vanilla
  11. 11. 2.67 1.79 1.00 0 0.7 1.4 2.1 2.8 3.5 Angular 2.0.0 React v15.2.1 Vanilla 카테고리 축 제목메모리 사용량
  12. 12. Framework, 왜사용하는 걸까?
  13. 13. 생산성? 학습 비용 생태계 신뢰성 개발환경 구축/유지 코드 구현의 용이성 커뮤니케이션
  14. 14. Let's Talk About 학습 비용 생태계 신뢰성 개발환경 구축/유지 코드 구현의 용이성 커뮤니케이션
  15. 15. Table Of Contents 1. 개발환경 2. 언어 생산성 3. 컴포넌트 4. 데이터 동기화 5. 비동기 처리
  16. 16. 1. 개발환경 프로젝트 시작시 항상 고민하는 문제
  17. 17. 2. 언어 생산성 JavaScript의 영역 확장 애플리케이션의 다양성과 복잡도 증가 대규모 협업시 동적 언어의 한계
  18. 18. Flow?
  19. 19. Facebook이 만든 정적 타입 검사기 React와 별개 프로젝트, 함께 사용할 수 있을 뿐! Flow?
  20. 20. class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } move(x: number, y: number) { this.x += x; this.y += y; } copy(): Point { return new Point(this.x, this.y); } }
  21. 21. from http://www.npmdiscover.com/ 4% ↓ 얼마나 사용하고 있을까?
  22. 22. const todos = [ {id: 1, text: 'Do something', completed: true}, {id: 2, text: 'Do another thing', completed: false} ]; const completedTodos = (todos) => { return todos.filter(t => t.completed); }; const result = completedTodos(todos); // {id: 1, text: 'Do something', completed: true} console.log(result);
  23. 23. interface Todo { id: number; text?: string; completed: boolean; } const todos = [ {id: 1, text: 'Do something', completed: true}, {id: 2, text: 'Do another thing', completed: false} ]; const completeTodos = (todos: Todo[]): Todo[] => { return todos.filter(t => t.completed); }; const result = completeTodos(todos); // {id: 1, text: 'Do something', completed: true}, console.log(result);
  24. 24. interface Todo { id: number; text?: string; completed: boolean; } const todos = [ {id: 1, text: 'Do something', completed: true}, {id: 2, text: 'Do another thing', completed: false} ]; const completeTodos = (todos: Todo[]): Todo[] => { return todos.filter(t => t.completed); }; const result = completeTodos(todos); // {id: 1, text: 'Do something', completed: true}, console.log(result);
  25. 25. 외부 모듈이 타입을 제공하지 않는다 면?1. 타입 정의 파일이 있는지 검색한다
  26. 26. 1. 타입 정의 파일이 있는지 검색한다 2. 없으면 네가 만든다 외부 모듈이 타입을 제공하지 않는다 면?
  27. 27. 1. 타입 정의 파일이 있는지 검색한다 2. 없으면 네가 만든다 3. 귀찮으면 Any로 선언하거나 타입 없이 코딩한다 외부 모듈이 타입을 제공하지 않는다 면?
  28. 28. 비용> 소득 따져봐야 할 일
  29. 29. Angular2는 왜 TypeScript를 강요하나요?
  30. 30. “ Angular2는, TypeScript라서 싫어요 ”
  31. 31. 트랜스컴파일 언어? 새로운 언어?
  32. 32. Metadata Metadata Annotations Optional Type Optional Type Types 언어 생산성 향 상 Angular2의 고민 웹표준 지향 ES6 ES 5 classes modules ES2015의 생산성 극대화 TypeScript 1.5+ 언어를 만들자, AtScript!!! Annotations Types ES6 ES 5 Metadata Optional Type
  33. 33. TypeScript 사용에 따른 비용 >? 소득 당근, 따져보자!
  34. 34. TypeScript function sum(value: Array<number>): number { return value.reduce( (sum, v) => sum + v),0); } JavaScript function sum(value) { if(Array.isArray(value)) { return value.reduce((sum, v) => { return parseInt(sum + v), 0); }); } else { return 0; } }
  35. 35. TypeScript = ES.Next = JavaScript의 SuperSet
  36. 36. JavaScript 개발자라면 선투자 새로운 언어, 학습비용?
  37. 37. 3. 컴포넌트 하나의 독립된 기능을 수행하는 최소 단위 UI Angular2와 React 모두 컴포넌트 설계를 지향
  38. 38. 컴포넌트 = HTML + JS + CSS
  39. 39. @Component({ selector: 'app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class AppComponent { constructor() { } } HTML CSS JS Angular2’s Component
  40. 40. React의 컴포넌트는 반쪽짜 리 <div class="layout"> <div class="left">{{value1}}</div> <div class="right">{{value2}}</div> <div class="footer">{{value3}}</div> </div> 기본으로 제공하지 않는 CSS 캡슐화 Compon ent
  41. 41. 더 정이 안 가는 이유는 JSX in JS
  42. 42. render() { return ( <section className="main"> <ul className="todo-list"> { this.getItems() .map(item => { return ( <TodoItem key={ item.id }/> ); }) } </ul> </section> ); } 마크업 개발자와 협업 곤란
  43. 43. <div> <div className="active"> <input defaultValue="value"/> </div> <footer></footer> <div> React <div class="active"> <input value="value"/> </div> <footer></footer> HTML과 같은 듯, 다른 문법 Angular2 표준 HTML + Extend 새로운 언어? JSX
  44. 44. 인정! 그런데 잠깐, 템플릿은 협업과 무관한가?
  45. 45. <h1>Users</h1> <div>Loading users data</div> <div> <button type="button">Load More Users</button> <a href="#">Create user</a> <ul class="users-list"> <li> <a href="#"> <img src='http://sample.blahblah.blah/pic1.jpg'/> </a> <div class="actions"> <a href="#">edit</a> </div> </li> <li> <a href="#"> <img src='http://sample.blahblah.blah/pic1.jpg'/> </a> <div class="actions"> <a href="#">edit</a> </div> </li> <li> <a href="#"> <img src='http://sample.blahblah.blah/pic1.jpg'/> </a> <div class="actions"> <a href="#">edit</a> </div> </li> </ul> </div>
  46. 46. <h1>Users</h1> <div *ngIf="loading">Loading users data</div> <div *ngIf="!loading"> <button type="button" loading-btn [loadingText]="'Loading more...'" [loadingMore]="userService.loading" (sampleCustomEvent)="eventHandler($event)" (click)="userService.getMoreUsers()">Load More Users</button> <a [routerLink]="['./User-create']">Create user</a> <ul class="users-list" set-active> <li *ngFor="#user of users"> <a [routerLink]="['./User-details', { username: user.username }]"> <img [src]="user.picture.medium" alt="{{ user.username }}'s picture" /> {{ user.name.last }}, {{ user.name.first }}</a> <div class="actions"> <a [routerLink]="['./User-edit', { username: user.username }]">edit</a> </div> </li> </ul> </div>
  47. 47. <h1>Users</h1> <div *ngIf="loading">Loading users data</div> <div *ngIf="!loading"> <button type="button" loading-btn [loadingText]="'Loading more...'" [loadingMore]="userService.loading" (sampleCustomEvent)="eventHandler($event)" (click)="userService.getMoreUsers()">Load More Users</button> <a [routerLink]="['./User-create']">Create user</a> <ul class="users-list" set-active> <li *ngFor="#user of users"> <a [routerLink]="['./User-details', { username: user.username }]"> <img [src]="user.picture.medium" alt="{{ user.username }}'s picture" /> {{ user.name.last }}, {{ user.name.first }}</a> <div class="actions"> <a [routerLink]="['./User-edit', { username: user.username }]">edit</a> </div> </li> </ul> </div> 이미 순수하지 못한 HTML
  48. 48. Just Syntactic SugarNot HTML, Not Template
  49. 49. render() { return React.createElement( "div", null, "Hello ", this.props.name ); }
  50. 50. render() { return <div>Hello {this.props.name}</div>; }
  51. 51. render() { return ( <section className="main"> <ul className="todo-list"> { this.getItems() .map(item => { debugger; return ( <TodoItem key={ item.id } text={ item.text } id={ item.id } /> ); }) } </ul> </section> ); }
  52. 52. JSX = 구조 + 기능 JSX in JavaScript는 구조와 기능을 자연스럽게 표현
  53. 53. 기능 확장, 의존 컴포넌트 주입(HOF) export const Sortable = (props) => { return ( <Sortable> { props.children } </Sortable> ) } // SortableBox <Sortable><Box></Sortable> // SortableTriangle <Sortable><Triangle></Sortable>
  54. 54. 기능 확장, 의존 컴포넌트 주입(HOF) export const Sortable = (props) => { return ( <Sortable> { props.children } </Sortable> ) } // SortableBox <Sortable><Box></Sortable> // SortableTriangle <Sortable><Triangle></Sortable>
  55. 55. export const Sortable = (props) => { return ( <Sortable> { props.children } </Sortable> ) } // SortableBox <Sortable><Box></Sortable> // SortableTriangle <Sortable><Triangle></Sortable> 기능 확장, 의존 컴포넌트 주입(HOF) High Order Componen
  56. 56. <Sortable> <Box></Box> </Sortable> compose(sortable, box); new Sortable(new Box());
  57. 57. 둘일 때는 불리, 하지만 혼자라면?
  58. 58. 4. 데이터 동기화 뷰(View)와 모델(Model)의 분리, 데이터 동기화 문제 등장 UI 개발 프레임워크가 책임지는 핵심
  59. 59. Angular’s Data Binding DOM View Model
  60. 60. Angular’s Data Binding DOM View Model
  61. 61. Two Way Data Binding DOM View Model
  62. 62. Two Way Data Binding DOM View Model
  63. 63. DOM View Model DOM View Model DOM View Model DOM View Model
  64. 64. DOM View DOM View DOM View DOM View Mode l Mode l Mode l Mode l View View View DOM Mode l DOM DOM
  65. 65. Let’s Reactive DOM View
  66. 66. Let’s Reactive DOM View
  67. 67. Let’s Reactive Virtual DOM + Reconciliation DOM Virtual DOM
  68. 68. Let’s Reactive Virtual DOM + Reconciliation DOM Virtual DOM Virtual DOM
  69. 69. Let’s Reactive Virtual DOM + Reconciliation DOM Virtual DOM Virtual DOM Diff
  70. 70. Virtual DOM
  71. 71. Virtual DOM
  72. 72. 변경 전 변경 후
  73. 73. 변경 전 변경 후
  74. 74. DOM 변경 전 변경 후 Patch
  75. 75. 양방향 데이터 바인딩이 복잡도를 증가시킨다?
  76. 76. class MyForm extends React.Component { constructor() { this.state = {value: 'Hello!'}; this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleClick() { this.setState({value: 'changed!'}); } render() { return ( <div> <input type="text" value={this.state.value} onChange={this.handleChange} /> <button onClick={this.handleClick} >change</button> </div> ); } } React’s example setState로 데이터 변경!
  77. 77. @Component({ selector: 'form', template: [` <div> <input type="text" [(ngModel)]=“state.value”/> <button (click)=“handleClick()">change</button> </div> ` }) class MyFrom() { state = { value: 'Hello'}; constructor() {} handleClick() { this.state.value = 'changed'; } } 데이터 바인딩은 Simple Angular2’s example
  78. 78. React, 짱먹어라
  79. 79. 앞으로는 무분별하게 양방향 데이터 동기 화를 사용하지 않겠습니다.
  80. 80. <h1>{{data}}</h1> Angular1 DOM Mode lView 2way-binding
  81. 81. Angular2 DOM Mode lView 1way-binding <h1>{{data}}</h1>
  82. 82. !!!!CD CD CD CD CD CD CD CD CD CD CD Change Detector DOM Angular2 CD CD CD CD CD CD CD CD CD CD CD CD CD
  83. 83. $timeout(function() { // something }, 1000); $http({ method: 'GET', url: '/someUrl' }); $scope.$apply(); 비동기 액션이 끝나는 시점을 알려 주면 데이터 동기화 수행
  84. 84. ZoneJavaScript의 실행영역(Excute context) 실행영역에서 발생하는 작업을 Profile
  85. 85. Zone.current.fork({ onInvokeTask: (…): any => { try { this.onEnter(); return delegate.invokeTask(…); } finally { this.onLeave(); } } }).run(main); 데이터 동기화 시점
  86. 86. timeout(function() { // something }, 1000); somethingHttp({ method: 'GET', url: '/someUrl' }); model.value = "change!!!";
  87. 87. Angular1의 데이터 바인 딩 + React 데이터 플로우의 심 플함 + Zone을 이용한 사용성 개 선
  88. 88. 데이터 바인딩? Virtual DOM diff? DOM이 아닌, 모델에 초점
  89. 89. React DOM View Model DOM View Model Framework 담당 setState, action 명시적 호출
  90. 90. Angular2 DOM View Model DOM View Model Framework 담당
  91. 91. 5. 비동기 처리 인터랙션 이벤트, 애니메이션, XMLHttpRequest, 멀티미디어 자원(이미지, 동영상…) 로딩, WebWorker, WebRTC, WebSocket…
  92. 92. 핑크빛 열애설 Angular2랑 RxJS…?
  93. 93. import React from 'react'; import Async from 'react-async'; import Rx from 'rx'; function defineXHRObservable(url) { return { id: url, start() { return Rx.fromPromise(fetch(url)) } } } function MyComponentObservables(props) { return { user: defineXHRObservable(`/api/user?user${props.userID}`) } } @Async(MyComponentObservables) class MyComponent extends React.Component { render() { let {user} = this.props ... } }
  94. 94. callback, promise, generator, async/await
  95. 95. Observable Subscriber Message
  96. 96. Observable Subscribe Store Component State
  97. 97. Subscriber SubjectMessage
  98. 98. Subscriber Subject Store Action Component
  99. 99. Subscriber Subject State Action Store Component
  100. 100. Subscriber Subject Store Component
  101. 101. http://www.slideshare.net/jayphelps/rxjs-redux-react-amazing
  102. 102. 프레임워크 구현에 잘녹여진 RxJS
  103. 103. Zone.current.fork({ onInvokeTask: (…): any => { try { this.onEnter(); return delegate.invokeTask(…); } finally { this.onLeave(); } } }).run(main); 데이터 동기화 시점 기억나시죠?
  104. 104. class NgZone { private _onMicrotaskEmpty: EventEmitter; private _onStable: EventEmitter; private onLeave() { this.checkStable(); } private checkStable() { try { this._onMicrotaskEmpty.emit(null); } finally { this._onStable.emit(null) } } }
  105. 105. class EventEmitter extends Subject<T> { emit(value) { super.next(value); } } Rx.Subject 산발적인 이벤트를 스트림(Stream)으 로
  106. 106. CD CD CD CD CD CD CD CD CD CD CD Change Detector CD CD CD CD CD CD CD CD CD CD CD 기억나시죠?
  107. 107. CD CD CD CD CD CD CD CD CD CD CD Change Detector Observable + OnPush ChangeDetectionStrategy CD CD CD CD
  108. 108. 개발자 입장에서도 RxJS를 쉽게 사용
  109. 109. // HTTP this.jsonp.get('http://url?callback=CALLBACK') .map(res => console.log(res.json())); // FORM var term = new FormControl(); term.valueChanges .debounceTime(400) .distinctUntilChanged() .subscribe(v => console.log(v.keyCode); Angular2의 HTTP, FORM은 RxJS를 지원
  110. 110. // Service this.service.getSpreadsheet() .filter(x => !!x) .subscribe(v => { this.spreadsheet = v; }); } 서비스와 컴포넌트를 push 방식으로 연결 느슨한 결합
  111. 111. RxJS 정말 좋은가?
  112. 112. 그래서, 당신이 선택해야 할 프레임워크는?
  113. 113. 최소 기능 기본 개발자의 선택 개발자의 선택최소 기능 데이타 동기화 컴포넌트 … 코딩 컨벤션 Application Infra …
  114. 114. 찬욱의 생각 프레임워크 쓸거라면… 문제의 솔루션… 유연성? 구글?
  115. 115. 훈민의 생각 선택은 개발자가 해야할 일 All-In-One, 글쎄? 구글?
  116. 116. 감사합니다

×