AngularJS 2, version 1 and ReactJS

2,565 views

Published on

AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.

AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.

마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.

해당 자료는 XECon 2016에 발표되었습니다.

Published in: Technology
1 Comment
48 Likes
Statistics
Notes
  • Ionic2 접하게 되면서 angular js 2만 써본 상태인데 각각의 프레임워크가 어떻게 차이가 나는지 어떤 특징이 있는지 요약이 잘 된 것 같네요
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,565
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
35
Comments
1
Likes
48
Embeds 0
No embeds

No notes for slide

AngularJS 2, version 1 and ReactJS

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

×