View
3.186
Download
3
Category
Preview:
Citation preview
한성민
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)
싱글 페이지 어플리케이션 (SPA)
전통적인 웹 페이지 페이지 전환시 Javascript, CSS, Image 등 모든 리소스를 새로 다운로드
로딩시간이 오래걸리며, 불필요한 요청이 발생
SPA 필요한 리소스만 다운로드
페이지 전환에 로딩시간이 적게 발생
싱글 페이지 어플리케이션 (SPA)
Server 변경이 발생한 부분만 다운로드
데이터는 Javascript에서 관리
Best Practice
싱글 페이지 어플리케이션 (SPA)
검색엔진 최적화 (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
타입 스크립트 (Typescript)와 AngularJS 2
AngularJS 1 vs AngularJS 2
번들러(Bundler)와 Webpack
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
AngularJS 2 AngularJS 1
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
타입 스크립트 (Typescript)와 AngularJS 2
AngularJS 1 vs AngularJS 2
번들러(Bundler)와 Webpack
AngularJS 2와 번들러(Bundler)
AngularJS 2를 Typescript로 개발 할 경우, 컴포넌트 모듈 별 Javascript 를 분리하고 Import를 통해 호출하게 되는데, 이때, Import는 브라우저에서 지원하는 기능이 아니기 때문에 번들러(Bundler) 사용이 필수적.
번들러(Bundler)의 배경
ECMA6, Typescript 도입으로 인해 요구사항이 더욱 높아짐. 모듈 단위로 js 파일을 분리하고, Import 등으로 해당 컴포넌트/클래스를 불러오는 과정에서 번들러(Bundler)는 Import를 지원하지 않는 브라우저에 사용 됨.
번들러(Bundler) 소개
SystemJS WebPack Jspm
AngularJS vs ReactJS
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
Performance Benchmark
Benchmark 1 10,000개의 행을 Loop로 추가. Benchmark 2 10,000개의 행 중 5,000개의 행을 랜덤 삭제. Benchmark 3 1,000개의 행과 20개의 열로 중첩 Loop.
Performance Benchmark
Performance Benchmark
3번 집계 후 평균 추산.
Performance Benchmark
https://github.com/KennethanCeyer/AngularJS-vs-ReactJS-Benchmark
벤치마크 코드는 위 주소를 통해 확인 하실 수 있습니다.
AngularJS 1 AngularJS 2
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의 차이는 미미함
AngularJS vs ReactJS
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 kennethan@nhpcw.com
https://github.com/KennethanCeyer/AngularJS-Best-Practices
Recommended