AngularJS 2, version 1 and ReactJS

한성민
IGAWorks CI 개발 파트장
PIGNOSE 편집자

AngularJS?
Javascript에서 변수만 변경하면
DOM에서도 자동으로 동기화
반대로 DOM에 값이 변경되면
Javascript 변수도 자동으로 동기화

동기화 = 바인딩
양방향 바인딩 프레임워크
HTML과 Javascript 양쪽 모두 바인딩을 지원하는..

Why AngularJS
생산성 향상
코드 재활용성

$(function () {
var element = $('.item:first')[0];
console.log(element);
});
jQuery

VanillaJSwindow.onload = function () {
var element, elements = [];
var className = 'item';
if (typeof document.querySelectorAll === 'function') {
elements = document.querySelectorAll('.' + className);
} else {
// IE 8 lower polyfills
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
var searchElementItem = allElements[i];
if (typeof searchElementItem.className !== 'undefined') {
if (searchElementItem.className.indexOf(className) !== -1) {
elements.push(searchElementItem);
}
}
}
}
if (elements !== null && elements.length > 0) {
element = elements[0];
}
console.log(element);
}

고작
DOM 객체 하나 가져오는 과정
Vanilla JS
jQuery
2분 +
10초

개발 속도 ↑, 코스트 ↓

탄생배경
2009년
Google Feedback 서비스를 개발하는 과정에서 탄생

탄생배경
6개월간 17,000 라인의 코드로도 만족스럽지 못했던 작업이.
AngularJS 1을 통해 3주만에 1,500 라인의 코드로
대체가 가능

AngularJS 1 구조
Vanilla JS, jQuery AngularJS 1
변수 정의
DOM 삽입
이벤트 바인딩
변수 정의
이벤트 함수 정의
AngularJS
Watcher

AngularJS 1 구조
AngularJS 1는 완전한 MVC 모델이 아님, Model, View, ViewModel Pattern
Controller
Module
Root
Scope
Scope
HTML

AngularJS 1 구조
Request
/page/main
Request
/page/intro
Controller
MainCtrl
Controller
IntroCtrl
MainCtrl Function
IntroCtrl Function
Scope
Scope
HTML

// 변수 정의
var content = 'New Item';
var message = 'Hello World';
var newDomObj = document.createElement('a');
// DOM 삽입
newDomObj.href = '#';
newDomObj.innerHTML = content;
document.body.appendChild(newDomObj);
// 이벤트 바인딩
newDomObj.addEventListener('click', function (event) {
event.preventDefault();
alert(message);
});
Vanilla JS

var app = angular.module('app', [
])
.controller('MainCtrl', function ($scope) {
// 변수 정의
$scope.content = 'New Item';
$scope.message = 'Hello World';
$scope.onClick = function ($event) {
$event.preventDefault();
alert($scope.message);
};
});
AngularJS 1

<!DOCTYPE HTML>
<html lang="en-US" ng-app="app">
<head>
...
</head>
<body ng-controller="MainCtrl">
<a href="#" ng-click="onClick($event);">{{content}}</a>
</body>
</html>
AngularJS 1

<!DOCTYPE HTML>
<html lang="en-US" ng-app="app">
<head>
...
</head>
<body ng-controller="MainCtrl">
<a href="#" ng-click="onClick($event);">{{content}}</a>
</body>
</html>
AngularJS 1
var app = angular.module('app', [
])
.controller('MainCtrl', function ($scope) {
// 변수 정의
$scope.content = 'New Item';
$scope.message = 'Hello World';
$scope.onClick = function ($event) {
$event.preventDefault();
alert($scope.message);
};
});
양방향 바인딩 지원

내부동작
변수의 변경 DOM
Digest
Loop
Watch
List

라이브러리, 프레임워크 별 패턴
Vanilla JS jQuery
PROTOTYPE
Vanilla JS
jQuery.fn
AngularJS 1
Vanilla JS
jQuery
Factory
Provider
Filter
Service
Controller
Module
Etc
Directive

AngularJS 1
jQuery Lite
(빌트-인)

var app = angular.module('app', [])
.run(function ($rootScope) {
// angular.element be used like jQuery.
$rootScope.title = angular.element('#wrapper .inner').eq(0).data('title');
});
AngularJS 1
angular.element로 jQuery와 같이 동작.

사례
IGAWorks에서 개발중인 프론트 프레임워크
동적 엘리먼트 요소를 사용하는 개발 환경에서 불편사항 발생

사례
태그가 추가되거나 변경될 때 마다
매번 전용 함수를 호출해야 함. Ex) $element.toggle();

$(function () {
// 동적 HTML 태그 정의.
var elem = $('<input type="text" placeholder="An Example" value="Example" />');
// 동적 태그를 Body 하위에 삽입.
elem.appendTo('body');
// HomeWorks INPUT 컴포넌트 정의.
elem.input();
});
jQuery

Best Practice
싱글 페이지 어플리케이션 (SPA)
검색엔진 최적화 (SEO)

전통적인 웹 페이지
페이지 전환시 Javascript, CSS, Image 등 모든 리소스를 새로 다운로드
로딩시간이 오래걸리며, 불필요한 요청이 발생
SPA
필요한 리소스만 다운로드
페이지 전환에 로딩시간이 적게 발생

Server
변경이 발생한 부분만 다운로드
데이터는 Javascript에서 관리

검색 엔진 최적화 (SEO)
정의
검색 제공업체 (Naver, Google) 등에서
웹 서버 페이지들을 크롤링 하는 부분에 포커스
이슈
SPA 특성 상 정적 페이지를 남기지 않기 때문에
검색 엔진이 동적 자바스크립트를 인식하기 어려운 문제

검색 엔진 최적화 (SEO)
AngularJS 1 버전의 Hashbang 해시뱅 (#!) 사용 시 SEO가 어려움.
HTML5의 <base>를 이용한 동적 URL의 경우,
서버 사이드 랜더링으로 정적 페이지를 별도로 추가하여 진행.
?_escaped_fragment 및 <meta name=“fragment” />는
2015. 10 Google에서 Officially Deprecated 항목.

AngularJS 2
타입 스크립트 (Typescript)와 AngularJS 2
AngularJS 1 vs AngularJS 2
번들러(Bundler)와 Webpack

AngularJS 2
2016년 5월 3일 AngularJS 2 RC 버전 발표.
2016년 11월 17일 2.2.1 Released.
AngularJS 2는 Typescript”도” 지원하는 컴포넌트 기반 프레임워크.

Typescript
Typescript는 AngularJS 2에서 지원하는 언어의 종류.
Microsoft사에서 2012년 발표된 Javascript 확장형 언어.
AngularJS 2에서는 Google과 Microsoft의 콜라보레이션.
Typescript는 이름에 맞게 타이핑 언어의 특성을 가짐.

Welcome to Hell Typescript
Typescript
ECMA 6
ECMA 5

Typescript
OOP 기반의 컴포넌트 작성에 대한 문제 해결.
런타임에서 발생하는 오류를 타입기반 특성으로 미연에 방지.
모듈의 다형성, 상속에 대한 요구사항 지원.

class Alpaca {
// Private member variables.
private message: string = 'boowoo~ boowoo!!';
// Alpaca class's constructor.
constructor() {
console.log(this.bark());
}
// Member function
bark(): string {
return this.message;
}
}
Typescript

AngularJS 2 AngularJS 1
Component 기반
HTML5 Base URL 사용
Typescript를 통한 OOP 지원
Renderer 지원
Javascript, Typescript, Dart 지원
Scope, Controller, Directive 기반
HTML5 Base URL 사용, 해시 뱅 사용
OOP 미지원, 대체 디자인 패턴 지원
jQuery lite 빌트-인

구조의 변경
Component Component
Component
View View
Component
Ctrl Ctrl
View View
Ctrl
$scope$scope $scope
$directive
$service

구조의 변경
Event
Queue
DOM
Wait
Digest
Loop
Watch
List
CD
CD CD
CD CD
CD CD CD
Digest
Loop

AngularJS 2 추가 지원기능
Automatic Change Detection.
Render Update 이벤트 지원. (Life Cycle)
Child routes 지원.
선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Two Ways].
ECMA6 모듈 사용.

AngularJS 2 추가 지원기능
Automatic Change Detection. (?)
Render Update 이벤트 지원. (Life Cycle)
Child routes 지원.
선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Double Ways].
ECMA6 모듈 사용.

$http({
method: 'POST',
url: '/api/list'
}).then(function(response) {
$scope.list = response.list;
$scope.$evalAsync();
}, function(response) {
// some snippets...
});
AngularJS 1

$http({
method: 'POST',
url: '/api/list'
}).then(function(response) {
$scope.list = response.list;
$scope.$evalAsync();
}, function(response) {
// some snippets...
});
AngularJS 1
비동기 작업의 경우 Render 시점을 알려주어야 함.

this.http.post('/api/list')
.subscribe(response => this.list = response.list);
AngularJS 2
!!!!

AngularJS 2와 번들러(Bundler)
AngularJS 2를 Typescript로 개발 할 경우,
컴포넌트 모듈 별 Javascript 를 분리하고
Import를 통해 호출하게 되는데,
이때, Import는 브라우저에서 지원하는 기능이 아니기 때문에
번들러(Bundler) 사용이 필수적.

번들러(Bundler)의 배경
ECMA6, Typescript 도입으로 인해 요구사항이 더욱 높아짐.
모듈 단위로 js 파일을 분리하고,
Import 등으로 해당 컴포넌트/클래스를 불러오는 과정에서
번들러(Bundler)는 Import를 지원하지 않는 브라우저에 사용 됨.

번들러(Bundler) 소개
SystemJS
WebPack
Jspm

AngularJS vs ReactJS
Overview
퍼포먼스
결론

Overview
AngularJS
44%
ReactJS
56%
Deview 2016에서 살펴보는 관심도

Overview
AngularJS
ReactJS
2013.01.01 ~ 2016.11
Programming 카테고리에서 집계

AngularJS 2 ReactJS
구글(Google)
2016. 05
Typescript, Dart, Javascript
MVVM
IE9+, Modern Browsers
TSC(Typescript)
Typescript
페이스북(Facebook)
2013. 05 (오픈소스 발표)
JSX, Javascript
View (Virtual DOM)
IE9+, Modern Browsers (2016. 01 IE 8 지원중단 발표)
Babel REPL (Recommend)
Flow
개발사
출시년도
개발언어
카테고리
지원 브라우저
Transpiler
Typing

퍼포먼스 측정
Overview
퍼포먼스
결론

Performance Benchmark
AngularJS 2 마이그레이션에 앞서,
성능테스트가 필요함에 따라 벤치마크
AngularJS 1 / AngularJS 2 / ReactJS 별로 비교

Benchmark 1
Benchmark 2
Benchmark 3

Benchmark 1
10,000개의 행을 Loop로 추가.
Benchmark 2
10,000개의 행 중 5,000개의 행을 랜덤 삭제.
Benchmark 3
1,000개의 행과 20개의 열로 중첩 Loop.

3번 집계 후 평균 추산.

https://github.com/KennethanCeyer/AngularJS-vs-ReactJS-Benchmark
벤치마크 코드는 위 주소를 통해 확인 하실 수 있습니다.

1,228
933
2,172
Benchmark 1
ReactJS
Benchmark 2
1,087
187
775
708
284
1,334Benchmark 3
ms
ms
ms
ms
ms
ms
ms
ms
ms
Benchmark 1 10,000개의 행을 Loop로 추가.
Benchmark 2 10,000개의 행 중 5,000개의 행을 랜덤 삭제.
Benchmark 3 1,000개의 행과 20개의 열로 중첩 Loop.

0
500
1,000
1,500
2,000
2,500
Benchmark 1 Benchmark 2 Benchmark 3
AngularJS 1 AngularJS 2 ReactJS
배열에서 변경을 통한 Update와 중첩 Loop의 경우 AngularJS 1과 비교해도 많은 성능 향상이 확인됨.

하지만 DOM Rendering이
느린 것이 Fact

ReactJS와 AngularJS 2의
차이는 미미함

SPA 중심적
AngularJS 2
양방향 바인딩(2 Two-way Binding)이 보다 간결함.

class Apple {
constructor() {
this.binder = 'Banana';
}
}
AngularJS 2

SPA 중심적
AngularJS 2
공식 Router 지원으로 확장 / 관리가 손쉬움.

SPA 중심적
AngularJS 2
공식 Router 지원으로 확장 / 관리가 손쉬움.
검색엔진 개발사에서 개발 진행, 성장중인 프레임워크.

AngularJS 2 ReactJS
릴리즈 주기 비교 (2016. 11. 23 기준)

검증된
ReactJS
안정화.
Flux

검증된
ReactJS
안정화.
Flux
Redux

Thank you
GitHub
Email kennethan@nhpcw.com
https://github.com/KennethanCeyer/AngularJS-Best-Practices

AngularJS 2, version 1 and ReactJS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à AngularJS 2, version 1 and ReactJS

Similaire à AngularJS 2, version 1 and ReactJS (20)

Plus de Kenneth Ceyer

Plus de Kenneth Ceyer (14)

AngularJS 2, version 1 and ReactJS