![$(function () {
var element = $('.item:first')[0];
console.log(element);
});
jQuery](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-9-2048.jpg?cb=1668251218)
![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);
}](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-10-2048.jpg?cb=1668251218)
![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](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-20-2048.jpg?cb=1668251218)
![<!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);
};
});
양방향 바인딩 지원](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-22-2048.jpg?cb=1668251218)
![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와 같이 동작.](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-28-2048.jpg?cb=1668251218)
![var app = angular.module('app', [])
.directive('input', function () {
return {
restrict: 'E',
priority: 3,
link: function (scope, elem, attrs) {
elem.input();
}
};
});
AngularJS 1
Input 키워드 감지
대상이 Element 타입인 것만 체크
탐색된 대상에 전용 함수 수행.](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-32-2048.jpg?cb=1668251218)
![AngularJS 2 추가 지원기능
Automatic Change Detection.
Render Update 이벤트 지원. (Life Cycle)
Child routes 지원.
선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Two Ways].
ECMA6 모듈 사용.](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-51-2048.jpg?cb=1668251218)
![AngularJS 2 추가 지원기능
Automatic Change Detection. (?)
Render Update 이벤트 지원. (Life Cycle)
Child routes 지원.
선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Double Ways].
ECMA6 모듈 사용.](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-52-2048.jpg?cb=1668251218)
AngularJS 2, version 1 and ReactJS
•53 likes•6,056 views
Report
Share
Download to read offline
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다. AngularJS 2를 실무환경에 적용함으로 얻는 이점. AngularJS 2와 1의 차이점과 성능. 그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다. 마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다. 해당 자료는 XECon 2016에 발표되었습니다.
More Related Content
What's hot
![Angular Seminar [한빛미디어 리얼타임 세미나]](https://cdn.slidesharecdn.com/ss_thumbnails/angularseminarhanbitpublic-170725053734-thumbnail.jpg?width=384&fit=bounds)
What's hot(20)
![Angular Seminar [한빛미디어 리얼타임 세미나]](https://cdn.slidesharecdn.com/ss_thumbnails/angularseminarhanbitpublic-170725053734-thumbnail.jpg?width=768&fit=bounds)
![XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기](https://cdn.slidesharecdn.com/ss_thumbnails/react1-160404022032-thumbnail.jpg?width=768&fit=bounds)
Similar to AngularJS 2, version 1 and ReactJS
![[114]angularvs react 김훈민손찬욱](https://cdn.slidesharecdn.com/ss_thumbnails/114angularvsreact-161023163723-thumbnail.jpg?width=384&fit=bounds)
Similar to AngularJS 2, version 1 and ReactJS(20)
![[114]angularvs react 김훈민손찬욱](https://cdn.slidesharecdn.com/ss_thumbnails/114angularvsreact-161023163723-thumbnail.jpg?width=768&fit=bounds)
![[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)](https://cdn.slidesharecdn.com/ss_thumbnails/td2015mvc6-151104051613-lva1-app6892-thumbnail.jpg?width=768&fit=bounds)
![[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기](https://cdn.slidesharecdn.com/ss_thumbnails/wjkqukgsqgm2vger5dnt-signature-2cf736e9b897e2aaaa6315f9d31d6951ba19fae7560fe278cefb4644ac0753c6-poli-170428114140-thumbnail.jpg?width=768&fit=bounds)
More from Kenneth Ceyer
More from Kenneth Ceyer(14)
AngularJS 2, version 1 and ReactJS
- 2. 한성민 IGAWorks CI 개발 파트장 PIGNOSE 편집자
- 3. AngularJS?
- 4. AngularJS? Javascript에서 변수만 변경하면 DOM에서도 자동으로 동기화 반대로 DOM에 값이 변경되면 Javascript 변수도 자동으로 동기화
- 5. AngularJS? Javascript에서 변수만 변경하면 DOM에서도 자동으로 동기화 반대로 DOM에 값이 변경되면 Javascript 변수도 자동으로 동기화
- 6. 동기화 = 바인딩 양방향 바인딩 프레임워크 HTML과 Javascript 양쪽 모두 바인딩을 지원하는..
- 8. Why AngularJS 생산성 향상 코드 재활용성
- 9. $(function () { var element = $('.item:first')[0]; console.log(element); }); jQuery
- 10. 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); }
- 11. 고작 DOM 객체 하나 가져오는 과정 Vanilla JS jQuery 2분 + 10초
- 12. 개발 속도 ↑, 코스트 ↓
- 13. AngularJS 는
- 14. 탄생배경 2009년 Google Feedback 서비스를 개발하는 과정에서 탄생
- 15. 탄생배경 6개월간 17,000 라인의 코드로도 만족스럽지 못했던 작업이. AngularJS 1을 통해 3주만에 1,500 라인의 코드로 대체가 가능
- 16. AngularJS 1 구조 Vanilla JS, jQuery AngularJS 1 변수 정의 DOM 삽입 이벤트 바인딩 변수 정의 이벤트 함수 정의 AngularJS Watcher
- 17. AngularJS 1 구조 AngularJS 1는 완전한 MVC 모델이 아님, Model, View, ViewModel Pattern Controller Module Root Scope Scope HTML
- 18. AngularJS 1 구조 Request /page/main Request /page/intro Controller MainCtrl Controller IntroCtrl MainCtrl Function IntroCtrl Function Scope Scope HTML
- 19. // 변수 정의 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
- 20. 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
- 21. <!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
- 22. <!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); }; }); 양방향 바인딩 지원
- 24. 쉽게 변수의 변경 DOM
- 25. Why AngularJS 생산성 향상 코드 재활용성
- 26. 라이브러리, 프레임워크 별 패턴 Vanilla JS jQuery PROTOTYPE Vanilla JS jQuery.fn AngularJS 1 Vanilla JS jQuery Factory Provider Filter Service Controller Module Etc Directive
- 28. 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와 같이 동작.
- 29. 사례 IGAWorks에서 개발중인 프론트 프레임워크 동적 엘리먼트 요소를 사용하는 개발 환경에서 불편사항 발생
- 30. 사례 태그가 추가되거나 변경될 때 마다 매번 전용 함수를 호출해야 함. Ex) $element.toggle();
- 31. $(function () { // 동적 HTML 태그 정의. var elem = $('<input type="text" placeholder="An Example" value="Example" />'); // 동적 태그를 Body 하위에 삽입. elem.appendTo('body'); // HomeWorks INPUT 컴포넌트 정의. elem.input(); }); jQuery
- 32. var app = angular.module('app', []) .directive('input', function () { return { restrict: 'E', priority: 3, link: function (scope, elem, attrs) { elem.input(); } }; }); AngularJS 1 Input 키워드 감지 대상이 Element 타입인 것만 체크 탐색된 대상에 전용 함수 수행.
- 33. Best Practice
- 34. Best Practice 싱글 페이지 어플리케이션 (SPA) 검색엔진 최적화 (SEO)
- 35. 싱글 페이지 어플리케이션 (SPA) 전통적인 웹 페이지 페이지 전환시 Javascript, CSS, Image 등 모든 리소스를 새로 다운로드 로딩시간이 오래걸리며, 불필요한 요청이 발생 SPA 필요한 리소스만 다운로드 페이지 전환에 로딩시간이 적게 발생
- 36. 싱글 페이지 어플리케이션 (SPA) Server 변경이 발생한 부분만 다운로드 데이터는 Javascript에서 관리
- 37. Best Practice 싱글 페이지 어플리케이션 (SPA) 검색엔진 최적화 (SEO)
- 38. 검색 엔진 최적화 (SEO) 정의 검색 제공업체 (Naver, Google) 등에서 웹 서버 페이지들을 크롤링 하는 부분에 포커스 이슈 SPA 특성 상 정적 페이지를 남기지 않기 때문에 검색 엔진이 동적 자바스크립트를 인식하기 어려운 문제
- 39. 검색 엔진 최적화 (SEO) AngularJS 1 버전의 Hashbang 해시뱅 (#!) 사용 시 SEO가 어려움. HTML5의 <base>를 이용한 동적 URL의 경우, 서버 사이드 랜더링으로 정적 페이지를 별도로 추가하여 진행. ?_escaped_fragment 및 <meta name=“fragment” />는 2015. 10 Google에서 Officially Deprecated 항목.
- 40. AngularJS 2
- 41. AngularJS 2 타입 스크립트 (Typescript)와 AngularJS 2 AngularJS 1 vs AngularJS 2 번들러(Bundler)와 Webpack
- 42. AngularJS 2 2016년 5월 3일 AngularJS 2 RC 버전 발표. 2016년 11월 17일 2.2.1 Released. AngularJS 2는 Typescript”도” 지원하는 컴포넌트 기반 프레임워크.
- 43. Typescript Typescript는 AngularJS 2에서 지원하는 언어의 종류. Microsoft사에서 2012년 발표된 Javascript 확장형 언어. AngularJS 2에서는 Google과 Microsoft의 콜라보레이션. Typescript는 이름에 맞게 타이핑 언어의 특성을 가짐.
- 44. Welcome to Hell Typescript Typescript ECMA 6 ECMA 5
- 45. Typescript OOP 기반의 컴포넌트 작성에 대한 문제 해결. 런타임에서 발생하는 오류를 타입기반 특성으로 미연에 방지. 모듈의 다형성, 상속에 대한 요구사항 지원.
- 46. 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
- 47. AngularJS 2 타입 스크립트 (Typescript)와 AngularJS 2 AngularJS 1 vs AngularJS 2 번들러(Bundler)와 Webpack
- 48. AngularJS 2 AngularJS 1 Component 기반 HTML5 Base URL 사용 Typescript를 통한 OOP 지원 Renderer 지원 Javascript, Typescript, Dart 지원 Scope, Controller, Directive 기반 HTML5 Base URL 사용, 해시 뱅 사용 OOP 미지원, 대체 디자인 패턴 지원 jQuery lite 빌트-인
- 49. 구조의 변경 Component Component Component View View Component AngularJS 2 AngularJS 1 Ctrl Ctrl View View Ctrl $scope$scope $scope $directive $service
- 50. 구조의 변경 AngularJS 2 AngularJS 1 Event Queue DOM Wait Digest Loop Watch List CD CD CD CD CD CD CD CD Digest Loop
- 51. AngularJS 2 추가 지원기능 Automatic Change Detection. Render Update 이벤트 지원. (Life Cycle) Child routes 지원. 선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Two Ways]. ECMA6 모듈 사용.
- 52. AngularJS 2 추가 지원기능 Automatic Change Detection. (?) Render Update 이벤트 지원. (Life Cycle) Child routes 지원. 선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Double Ways]. ECMA6 모듈 사용.
- 53. $http({ method: 'POST', url: '/api/list' }).then(function(response) { $scope.list = response.list; $scope.$evalAsync(); }, function(response) { // some snippets... }); AngularJS 1
- 54. $http({ method: 'POST', url: '/api/list' }).then(function(response) { $scope.list = response.list; $scope.$evalAsync(); }, function(response) { // some snippets... }); AngularJS 1 비동기 작업의 경우 Render 시점을 알려주어야 함.
- 55. this.http.post('/api/list') .subscribe(response => this.list = response.list); AngularJS 2 !!!!
- 56. AngularJS 2 타입 스크립트 (Typescript)와 AngularJS 2 AngularJS 1 vs AngularJS 2 번들러(Bundler)와 Webpack
- 57. AngularJS 2와 번들러(Bundler) AngularJS 2를 Typescript로 개발 할 경우, 컴포넌트 모듈 별 Javascript 를 분리하고 Import를 통해 호출하게 되는데, 이때, Import는 브라우저에서 지원하는 기능이 아니기 때문에 번들러(Bundler) 사용이 필수적.
- 58. 번들러(Bundler)의 배경 ECMA6, Typescript 도입으로 인해 요구사항이 더욱 높아짐. 모듈 단위로 js 파일을 분리하고, Import 등으로 해당 컴포넌트/클래스를 불러오는 과정에서 번들러(Bundler)는 Import를 지원하지 않는 브라우저에 사용 됨.
- 64. 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
- 66. Performance Benchmark AngularJS 2 마이그레이션에 앞서, 성능테스트가 필요함에 따라 벤치마크 AngularJS 1 / AngularJS 2 / ReactJS 별로 비교
- 67. Benchmark 1 Benchmark 2 Benchmark 3 Performance Benchmark
- 68. Benchmark 1 10,000개의 행을 Loop로 추가. Benchmark 2 10,000개의 행 중 5,000개의 행을 랜덤 삭제. Benchmark 3 1,000개의 행과 20개의 열로 중첩 Loop. Performance Benchmark
- 69. Performance Benchmark 3번 집계 후 평균 추산.
- 70. Performance Benchmark https://github.com/KennethanCeyer/AngularJS-vs-ReactJS-Benchmark 벤치마크 코드는 위 주소를 통해 확인 하실 수 있습니다.
- 71. AngularJS 1 AngularJS 2 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.
- 72. 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과 비교해도 많은 성능 향상이 확인됨.
- 73. 원본 벤치마크 데이터
- 74. 하지만 DOM Rendering이 느린 것이 Fact
- 75. ReactJS와 AngularJS 2의 차이는 미미함
- 77. SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함.
- 78. class Apple { constructor() { this.binder = 'Banana'; } } AngularJS 2
- 79. var Apple = React.createClass({ getInitialState: function() { return { binder: 'banana' }; }, handleChange: function(event) { this.setState({binder: event.target.value}); }, render: function() { ... } }); ReactJS
- 80. var Apple = React.createClass({ getInitialState: function() { return { binder: 'banana' }; }, handleChange: function(event) { this.setState({binder: event.target.value}); }, render: function() { ... } }); ReactJS 동기 작업 요구
- 81. SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함. 공식 Router 지원으로 확장 / 관리가 손쉬움.
- 82. SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함. 공식 Router 지원으로 확장 / 관리가 손쉬움. 검색엔진 개발사에서 개발 진행, 성장중인 프레임워크.
- 83. 검증된 ReactJS 안정화.
- 84. AngularJS 2 ReactJS 릴리즈 주기 비교 (2016. 11. 23 기준)
- 87. Questions?