AngularJS 2, version 1 and ReactJS

한성민

IGAWorks CI 개발 파트장

PIGNOSE 편집자

AngularJS?

AngularJS?

Javascript에서 변수만 변경하면 DOM에서도 자동으로 동기화

반대로 DOM에 값이 변경되면

Javascript 변수도 자동으로 동기화

AngularJS?

Javascript에서 변수만 변경하면 DOM에서도 자동으로 동기화

반대로 DOM에 값이 변경되면

Javascript 변수도 자동으로 동기화

동기화 = 바인딩

양방향 바인딩 프레임워크

HTML과 Javascript 양쪽 모두 바인딩을 지원하는..

Why AngularJS

Why AngularJS

생산성 향상

코드 재활용성

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

jQuery

VanillaJS window.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초

개발 속도 ↑, 코스트 ↓

AngularJS 는

탄생배경

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

쉽게

변수의 변경 DOM

Why AngularJS

생산성 향상

코드 재활용성

라이브러리, 프레임워크 별 패턴

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

var app = angular.module('app', []) .directive('input', function () { return { restrict: 'E', priority: 3, link: function (scope, elem, attrs) { elem.input(); } }; });

AngularJS 1

Input 키워드 감지

대상이 Element 타입인 것만 체크

탐색된 대상에 전용 함수 수행.

Best Practice

Best Practice

싱글 페이지 어플리케이션 (SPA)

검색엔진 최적화 (SEO)


전통적인 웹 페이지 페이지 전환시 Javascript, CSS, Image 등 모든 리소스를 새로 다운로드

로딩시간이 오래걸리며, 불필요한 요청이 발생

SPA 필요한 리소스만 다운로드

페이지 전환에 로딩시간이 적게 발생


Server 변경이 발생한 부분만 다운로드

데이터는 Javascript에서 관리

Best Practice


검색엔진 최적화 (SEO)

검색 엔진 최적화 (SEO)

정의 검색 제공업체 (Naver, Google) 등에서

웹 서버 페이지들을 크롤링 하는 부분에 포커스

이슈 SPA 특성 상 정적 페이지를 남기지 않기 때문에

검색 엔진이 동적 자바스크립트를 인식하기 어려운 문제

검색 엔진 최적화 (SEO)

AngularJS 1 버전의 Hashbang 해시뱅 (#!) 사용 시 SEO가 어려움.

HTML5의 <base>를 이용한 동적 URL의 경우, 서버 사이드 랜더링으로 정적 페이지를 별도로 추가하여 진행.

?_escaped_fragment 및 <meta name=“fragment” />는 2015. 10 Google에서 Officially Deprecated 항목.

AngularJS 2

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

구조의 변경 AngularJS 2 AngularJS 1

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




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,334 Benchmark 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의 차이는 미미함


Overview

퍼포먼스

결론

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

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

AngularJS 2

var Apple = React.createClass({ getInitialState: function() { return { binder: 'banana' }; }, handleChange: function(event) { this.setState({binder: event.target.value}); }, render: function() { ... } });

ReactJS

var Apple = React.createClass({ getInitialState: function() { return { binder: 'banana' }; }, handleChange: function(event) { this.setState({binder: event.target.value}); }, render: function() { ... } });

ReactJS

동기 작업 요구

SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함. 공식 Router 지원으로 확장 / 관리가 손쉬움.

SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함. 공식 Router 지원으로 확장 / 관리가 손쉬움. 검색엔진 개발사에서 개발 진행, 성장중인 프레임워크.

검증된 ReactJS 안정화.

AngularJS 2 ReactJS

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

검증된 ReactJS 안정화. Flux

검증된 ReactJS 안정화. Flux Redux

Questions?

Thank you

GitHub

Email [email protected]

https://github.com/KennethanCeyer/AngularJS-Best-Practices

Technology

AngularJS 2, version 1 and ReactJS