[114]angularvs react 김훈민손찬욱

1. Angular2
React
vs
DEVIEW 2016

2. 우리는 왜
이 발표를 하는가?

3. 우리의 관심사
Angular2
React

4. React’s
Family

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. Angular2
vs
React

7. 314k
vs
240k
Webpack 최적화 빌드 기준
angular2(AOT) = core + “platform-browser-zone” + core.js
react = react + redux

8. 성능?Angular v2.0.0
React v15.3.1
Vanilla
https://github.com/CoderK/js-framework-benchmark

9. 성능?1. 1000개의 행 생성
2. 10,000개의 행 생성
3. 1,000개의 행 생성
4. 10의 배수인 행 삭제
5. 모든 행 삭제
6. 특정 셀의 데이터 교체
https://github.com/CoderK/js-framework-benchmark

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. 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. Framework,
왜사용하는 걸까?

13. 생산성?
학습 비용
생태계
신뢰성
개발환경 구축/유지
코드 구현의 용이성
커뮤니케이션

14. Let's Talk About
학습 비용
생태계
신뢰성
개발환경 구축/유지
코드 구현의 용이성
커뮤니케이션

15. Table Of Contents
1. 개발환경
2. 언어 생산성
3. 컴포넌트
4. 데이터 동기화
5. 비동기 처리

16. 1.
개발환경
프로젝트 시작시
항상 고민하는 문제

17. 2.
언어 생산성
JavaScript의 영역 확장
애플리케이션의 다양성과 복잡도 증가
대규모 협업시 동적 언어의 한계

19. Flow?

20. Facebook이 만든 정적 타입 검사기
React와 별개 프로젝트,
함께 사용할 수 있을 뿐!
Flow?

21. 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);
}
}

22. from http://www.npmdiscover.com/
4% ↓
얼마나 사용하고 있을까?

23. 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);

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

27. 외부 모듈이 타입을
제공하지 않는다
면?1. 타입 정의 파일이 있는지 검색한다

28. 1. 타입 정의 파일이 있는지 검색한다
2. 없으면 네가 만든다
외부 모듈이 타입을
제공하지 않는다
면?

29. 1. 타입 정의 파일이 있는지 검색한다
2. 없으면 네가 만든다
3. 귀찮으면 Any로 선언하거나 타입 없이 코딩한다
외부 모듈이 타입을
제공하지 않는다
면?

30. 비용> 소득
따져봐야 할 일

31. Angular2는
왜 TypeScript를
강요하나요?

32. “
Angular2는,
TypeScript라서 싫어요
”

34. 트랜스컴파일 언어?
새로운 언어?

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

36. TypeScript 사용에 따른
비용 >? 소득
당근, 따져보자!

37. 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;
}
}

38. TypeScript
= ES.Next
= JavaScript의 SuperSet

39. JavaScript 개발자라면
선투자
새로운 언어, 학습비용?

40. 3.
컴포넌트
하나의 독립된 기능을
수행하는 최소 단위 UI
Angular2와 React 모두 컴포넌트 설계를 지향

41. 컴포넌트 = HTML + JS +
CSS

42. @Component({
selector: 'app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
constructor() {
}
}
HTML
CSS
JS
Angular2’s Component

43. React의
컴포넌트는 반쪽짜
리
<div class="layout">
<div class="left">{{value1}}</div>
<div class="right">{{value2}}</div>
<div class="footer">{{value3}}</div>
</div>
기본으로 제공하지 않는 CSS 캡슐화
Compon
ent

44. 더 정이 안 가는 이유는
JSX in JS

45. render() {
return (
<section className="main">
<ul className="todo-list">
{
this.getItems()
.map(item => {
return (
<TodoItem key={ item.id }/>
);
})
}
</ul>
</section>
);
}
마크업 개발자와
협업 곤란

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

47. 인정!
그런데 잠깐,
템플릿은
협업과 무관한가?

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

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

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

51. Just
Syntactic SugarNot HTML, Not Template

52. render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}

53. render() {
return <div>Hello {this.props.name}</div>;
}

54. 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>
);
}

55. JSX = 구조 + 기능
JSX in JavaScript는
구조와 기능을 자연스럽게 표현

56. 기능 확장,
의존 컴포넌트 주입(HOF)
export const Sortable = (props) => {
return (
<Sortable>
{ props.children }
</Sortable>
)
}
// SortableBox
<Sortable><Box></Sortable>
// SortableTriangle
<Sortable><Triangle></Sortable>

57. 기능 확장,
의존 컴포넌트 주입(HOF)
export const Sortable = (props) => {
return (
<Sortable>
{ props.children }
</Sortable>
)
}
// SortableBox
<Sortable><Box></Sortable>
// SortableTriangle
<Sortable><Triangle></Sortable>

58. export const Sortable = (props) => {
return (
<Sortable>
{ props.children }
</Sortable>
)
}
// SortableBox
<Sortable><Box></Sortable>
// SortableTriangle
<Sortable><Triangle></Sortable>
기능 확장,
의존 컴포넌트 주입(HOF)
High Order Componen

59. <Sortable>
<Box></Box>
</Sortable>
compose(sortable, box);
new Sortable(new Box());

60. 둘일 때는 불리,
하지만 혼자라면?

61. 4.
데이터 동기화
뷰(View)와 모델(Model)의 분리,
데이터 동기화 문제 등장
UI 개발 프레임워크가 책임지는 핵심

62. Angular’s
Data Binding
DOM View Model

63. Angular’s
Data Binding
DOM View Model

64. Two Way
Data Binding
DOM View Model

65. Two Way
Data Binding
DOM View Model

66. DOM
View
Model
DOM
View Model
DOM
View Model
DOM
View Model

67. DOM
View
DOM
View
DOM
View
DOM
View
Mode
l
Mode
l
Mode
l
Mode
l
View
View
View
DOM
Mode
l
DOM
DOM

68. Let’s Reactive
DOM View

69. Let’s Reactive
DOM View

70. Let’s Reactive
Virtual DOM + Reconciliation
DOM
Virtual
DOM

71. Let’s Reactive
Virtual DOM + Reconciliation
DOM
Virtual
DOM
Virtual
DOM

72. Let’s Reactive
Virtual DOM + Reconciliation
DOM
Virtual
DOM
Virtual
DOM
Diff

73. Virtual DOM

74. Virtual DOM

75. 변경 전 변경 후

76. 변경 전 변경 후

77. DOM
변경 전
변경 후
Patch

78. 양방향 데이터 바인딩이
복잡도를 증가시킨다?

79. 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로 데이터 변경!

80. @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

81. React, 짱먹어라

83. 앞으로는 무분별하게
양방향 데이터 동기
화를
사용하지 않겠습니다.

84. <h1>{{data}}</h1>
Angular1
DOM
Mode
lView
2way-binding

85. Angular2
DOM
Mode
lView
1way-binding
<h1>{{data}}</h1>

86. !!!!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

87. $timeout(function() {
// something
}, 1000);
$http({
method: 'GET',
url: '/someUrl'
});
$scope.$apply();
비동기 액션이 끝나는 시점을 알려
주면
데이터 동기화 수행

88. ZoneJavaScript의 실행영역(Excute context)
실행영역에서 발생하는 작업을
Profile

89. Zone.current.fork({
onInvokeTask: (…): any => {
try {
this.onEnter();
return delegate.invokeTask(…);
} finally {
this.onLeave();
}
}
}).run(main);
데이터 동기화
시점

90. timeout(function() {
// something
}, 1000);
somethingHttp({
method: 'GET',
url: '/someUrl'
});
model.value = "change!!!";

91. Angular1의 데이터 바인
딩
+ React 데이터 플로우의 심
플함
+ Zone을 이용한 사용성 개
선

93. 데이터 바인딩?
Virtual DOM diff?
DOM이 아닌,
모델에 초점

94. React
DOM View Model
DOM View Model
Framework
담당
setState, action
명시적 호출

95. Angular2
DOM View Model
DOM View Model
Framework
담당

96. 5.
비동기 처리
인터랙션 이벤트, 애니메이션, XMLHttpRequest,
멀티미디어 자원(이미지, 동영상…) 로딩,
WebWorker, WebRTC, WebSocket…

97. 핑크빛 열애설
Angular2랑 RxJS…?

99. 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
...
}
}

100. callback,
promise,
generator,
async/await

101. Observable
Subscriber
Message

102. Observable
Subscribe
Store
Component
State

103. Subscriber
SubjectMessage

104. Subscriber
Subject
Store
Action
Component

105. Subscriber
Subject
State
Action
Store
Component

106. Subscriber
Subject
Store
Component

107. http://www.slideshare.net/jayphelps/rxjs-redux-react-amazing

109. 프레임워크 구현에
잘녹여진
RxJS

110. Zone.current.fork({
onInvokeTask: (…): any => {
try {
this.onEnter();
return delegate.invokeTask(…);
} finally {
this.onLeave();
}
}
}).run(main);
데이터 동기화
시점
기억나시죠?

111. class NgZone {
private _onMicrotaskEmpty: EventEmitter;
private _onStable: EventEmitter;
private onLeave() { this.checkStable(); }
private checkStable() {
try {
this._onMicrotaskEmpty.emit(null);
} finally {
this._onStable.emit(null)
}
}
}

112. class EventEmitter extends Subject<T> {
emit(value) { super.next(value); }
}
Rx.Subject
산발적인 이벤트를
스트림(Stream)으
로

113. CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
Change Detector
CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
기억나시죠?

114. CD
CD CD
CD
CD
CD
CD
CD
CD
CD
CD
Change Detector
Observable
+ OnPush ChangeDetectionStrategy
CD
CD
CD
CD

115. 개발자 입장에서도
RxJS를 쉽게 사용

116. // 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를
지원

117. // Service
this.service.getSpreadsheet()
.filter(x => !!x)
.subscribe(v => {
this.spreadsheet = v;
});
}
서비스와 컴포넌트를 push 방식으로 연결
느슨한 결합

118. RxJS
정말 좋은가?

119. 그래서,
당신이 선택해야 할
프레임워크는?

120. 최소 기능 기본 개발자의 선택
개발자의 선택최소 기능
데이타 동기화
컴포넌트
…
코딩 컨벤션
Application
Infra
…

121. 찬욱의 생각
프레임워크 쓸거라면…
문제의 솔루션…
유연성?
구글?

122. 훈민의 생각
선택은 개발자가 해야할 일
All-In-One, 글쎄?
구글?

123. 감사합니다