Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 2 어디까지 왔을까

15,164 views

Published on

GDG DevFest 2016 Seoul

Published in: Technology
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular 2 어디까지 왔을까

  1. 1. 한장현 han41858@gmail.com han41858.tistory.com : 어디까지 왔을까 ngular 2
  2. 2. Angular 2 진행상황 Angular 2의 장애물 Angular 1 대비 장점 Angular 1 업그레이드 방법 다른 라이브러리와 비교 Today 2
  3. 3. Ver. 2.2.0 ngular 2 3
  4. 4. { "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "npm run lite", "lite": "lite-server" }, "licenses": [ { "type": "MIT", "url": "https://github.com/angular/angular.io/blob/master/LICENSE" } ], "devDependencies": { "concurrently": "^3.0.0", "lite-server": "^2.2.2" } } "dependencies": { "@angular/common": "~2.1.1", "@angular/compiler": "~2.1.1", "@angular/core": "~2.1.1", "@angular/forms": "~2.1.1", "@angular/http": "~2.1.1", "@angular/platform-browser": "~2.1.1", "@angular/platform-browser-dynamic": "~2.1.1", "@angular/router": "~3.1.1", "@angular/upgrade": "~2.1.1", "angular-in-memory-web-api": "~0.1.5", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.25" }, Quickstart package.json 2.0.0 package.json 4
  5. 5. [Major] . [Minor] . [Patch] 버그 수정 호환되지 않는 API 변화 호환되면서 기능 변경, 추가 SemVer http://han41858.tistory.com/22 5
  6. 6. → 빠르고 지속적인 큰 변화 ①장애물 6
  7. 7. 2016. 12. 1 출판 예정 2016. 10. 1 출판 목표 빠른 변화 7
  8. 8. CHANGELOG.mdAngular 2 진행 상황 8
  9. 9. ngModule CLI Angular 2 Final 9
  10. 10. → 새로운 개발 언어 ②장애물 10
  11. 11. Angular 2 개발 언어 11
  12. 12. ts js dart https://angular.io/docs/ /latest/quickstart.html 12
  13. 13. TypeScript Dart 13
  14. 14. AtScript ES5 ES6 TypeScript Annotations 14
  15. 15. AtScript in Reality ES5 ES6 TypeScript Annotations 15
  16. 16. TypeScript 1.5+ ES5 ES6 Types Annotations 16
  17. 17. All of the learnings we have gained in building AngularDart, will be applied back to AngularJS v2. 17
  18. 18. 18
  19. 19. 19
  20. 20. (function(app) { app.AppComponent = ng.core.Component({ selector: 'my-app', template: '<h1>My First Angular App</h1>' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {})); JavaScript import 'package:angular2/core.dart'; @Component( selector: 'my-app', template: '<h1>My First Angular App</h1>' ) export class AppComponent {} Dart import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular App</h1>' }) export class AppComponent {} TypeScript 언어 비교 - Component 20
  21. 21. (function(app) { app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Class({ constructor: function() {} }); })(window.app || (window.app = {})); JavaScript -- This page is not yet available in Dart. We recommend reading it in TypeScript. -- Dart import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } TypeScript 언어 비교 - ngModule 21
  22. 22. (function(app) { document.addEventListener('DOMContentLoaded', function() { ng.platformBrowserDynamic .platformBrowserDynamic() .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {})); JavaScript import 'package:angular2/platform/browser.dart'; import 'package:angular2_quickstart/app_component.dart'; void main() { bootstrap(AppComponent); } Dart import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); TypeScript 언어 비교 - bootstrap 22
  23. 23. →새로운 Tool, 개발 방식의 변화 ③장애물 23
  24. 24. 26% 22% 17% 35% Environment Setup Too Complicated Lack of Documentation Other Interests Mike Brocchi Angular CLI contributor Q. What is/was your largest barrier to getting started with Angular 2? with Angular CLI 24
  25. 25. 25
  26. 26. IDE Build, Bundling Test IDE 26
  27. 27. Boilerplate Making Components Build Running Server Unit / End-to-end Test Deploy CLI 활용 영역 npm generator Yeoman mean.js IDE gulp grunt webpack node.js lite-server webpack-dev-server mocha karma git AWS-cli Angular CLI 27
  28. 28. `-- angular-cli@1.0.0-beta.18 +-- @angular-cli/ast-tools@1.0.5 +-- @angular-cli/base-href-webpack@1.0.4 +-- @angular/common@2.1.1 +-- @angular/compiler@2.1.1 +-- @angular/compiler-cli@2.1.1 +-- @angular/core@2.1.1 +-- @angular/platform-browser@2.1.1 +-- @angular/platform-server@2.1.1 +-- @ngtools/webpack@1.1.2 +-- compression-webpack-plugin@0.3.2 +-- css-loader@0.23.1 +-- ember-cli@2.5.0 +-- handlebars@4.0.5 +-- html-webpack-plugin@2.24.0 +-- node-sass@3.10.1 +-- typescript@2.0.3 +-- webpack@2.1.0-beta.25 `-- webpack-dev-server@2.1.0-beta.9 CLI dependencies 28
  29. 29. Build ng build New Project ng new PROJECT_NAME cd PROJECT_NAME ng serve (http://localhost:4200/) Unit test, end-to-end test ng test ng e2e deploy via GitHub ng github-pages:deploy --message "Optional commit message" CLI 사용 방법 29
  30. 30. Make Components CLI 사용 방법 30
  31. 31. { "name": "cli-test", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint "src/**/*.ts"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "~2.0.0", "@angular/compiler": "~2.0.0", "@angular/core": "~2.0.0", "@angular/forms": "~2.0.0", "@angular/http": "~2.0.0", "@angular/platform-browser": "~2.0.0", "@angular/platform-browser-dynamic": "~2.0.0", "@angular/router": "~3.0.0", "core-js": "^2.4.1", "rxjs": "5.0.0-beta.12", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }, "devDependencies": { "@types/jasmine": "^2.2.30", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.17", "codelyzer": "~0.0.26", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "2.0.2" } } ng new 31
  32. 32. ng serve 32
  33. 33. Angular CLI Demo 33
  34. 34. CLI Roadmap • Offline template compilation • Lazy loading routes • 3rd party add-ons (build, deploy) • Angular upgrades • Continuous integration • Product angular packages • More customizations 34
  35. 35. → 문법의 변화 작은 장애물 35
  36. 36. Directive in Angular 2 36
  37. 37. Data binding 37
  38. 38. * and <template> <hero-detail *ngIf="currentHero" [hero]="currentHero"></hero_detail> <hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></her <span [ngSwitch]="toeChoice"> <span *ngSwitchCase="'Eenie'">Eenie</span> <span *ngSwitchCase="'Meanie'">Meanie</span> <span *ngSwitchCase="'Miney'">Miney</span> <span *ngSwitchCase="'Moe'">Moe</span> <span *ngSwitchDefault>other</span> </span> 38
  39. 39. import {Component} from '@angular/core' import {MdButtonModule} from '@angular-material2/button' import {MdSideNavModule} from '@angular-material2/sidenav' import {MdCardModule} from '@angular-material2/card' import {RouterModule} from '@angular/router' @NgModule({ imports: [ MdButtonModule, MdSideNavModule, MdCardModule, RouterModule.forRoot(routeConfig) ] }) class MyAppModule {} import {Component} from '@angular/core' import {MD_BUTTON_DIRECTIVES} from '@angular-material2/button' import {MD_SIDENAV_DIRECTIVES} from '@angular-material2/sidenav' import {MD_CARD_DIRECTIVES} from '@angular-material2/card' import {provideRouter, ROUTER_DIRECTIVES} from '@angular/router' @Component({ selector: 'my-component', providers: [ provideRouter(routeConfig) ], directives: [ MD_BUTTON_DIRECTIVES, MD_SIDENAV_DIRECTIVES, MD_CARD_DIRECTIVES, ROUTER_DIRECTIVES ] }) class MyComponent {} @ngModule 39
  40. 40. @angular/core Components HTML Elements @angular/core Components ngModule HTML Elements @ngModule before after 40
  41. 41. → 속도 장점 ① 41
  42. 42. 42 https://www.youtube.com/watch?v=XQM0K6YG18s 16:21~17:10
  43. 43. But!! 43
  44. 44. 44
  45. 45. 45 https://www.youtube.com/watch?v=XQM0K6YG18s 17:39~18:48
  46. 46. new change detection : zone.js smoother virtual scrolling smoother view transition lazy loading server-side rendering 첫 로딩은 2.5배 리렌더링은 4.2배 성능 개선 후 언제나 5배 이상 ? Angular 1 대비 46
  47. 47. Angular 1.4+ 1.2 1.3 1.4 1.5 4.13 4.545 0.100 0.095 6.32 10.335 0.125 0.125 4.2 5.715 0.140 0.1 10.075 4.65 0.105 0.165 4.325 6.026 0.207 0.115 10.8 7.92 0.160 0.165 12.85 11.52 0.120 0.235 5.605 7.3 0.350 0.1 28.305 14.93 0.180 0.15 11.5 9.395 0.100 0.17 6.35 5.895 0.100 0.1 6.315 10.24 0.110 0.25 9.01 7.2 0.115 0.1 3.665 13.315 0.150 0.115 5.12 5.245 0.100 0.165 8.03 6.025 0.495 0.23 6.445 12.645 0.115 0.14 8.015 6.085 0.100 0.195 9.365 4.16 0.110 0.165 6.89 14.645 0.115 0.105 Zackary Chapple SW Architect at CareerBuilder 1.2 1.3 1.4 1.5 90%+ 8.36575 8.38955 0.15485 0.14925 47
  48. 48. Deep tree : Speed 8.58 3.11 1.44 1 Baseline Angular 2 with View Cache Angular 2 Angular 1.3 0 1 2 3 4 5 6 7 8 9 10 48
  49. 49. Deep tree : Memory 9.53 2.56 1.16 1 Baseline Angular 2 with View Cache Angular 2 Angular 1.3 0 1 2 3 4 5 6 7 8 9 10 49
  50. 50. 2000 1500 1000 500 0 2 9 16 23 30 # of tables Angular 1 Angular 2 Angular 2 (Immutable Data) Virtual Scrolling Table Time 50
  51. 51. JS frameworks benchmark 51
  52. 52. 2.31 1.69 1 1.6 1 2 3 0 4 5 6 7 8 9 create 1,000 rows Angular v.1.5.8 Angular v.2.0.0-rc5 VanillaJS React replace 1,000 rows create 10,000 rows 10,000 + 1,000 clear 10,000 rows 4.38 3.32 1 3.54 2 1.59 1 1.52 3.67 2.86 1 1.43 8.5 1.69 1 2.36 52
  53. 53. → 체계적인 개발 방법 장점 ② 53
  54. 54. 지향점 • Mobile oriented • Modern browsers only • TypeScript • Dynamic loading, Server-side rendering • controller, $scope ⇒ component (directive + template) • RxJS 지원, Reactive programming • Testing • Angular Material 2 • WebWorkers 54
  55. 55. • A Google Chrome Dev Tools extension for debugging Angular 2 applications. Augury 55
  56. 56. not just a debugger • Component Relationships • Detailed Component Info • Dependency Hierarchy • Change Detection Strategy • Editable Component Properties • Router Structure Vanessa Yuen Augury contributor 56
  57. 57. 57
  58. 58. 58
  59. 59. Augury Demo 59
  60. 60. ngular 2 써야 할까? 언제? 60
  61. 61. Productivity 61
  62. 62. 체계적인 프로젝트 관리 최신 기술의 자연스러운 도입 62
  63. 63. 더 나은 길로 가고 있다. 사용은 아직…. 관심을 계속 갖자. 63
  64. 64. Q & A 64
  65. 65. 세상에 라이브러리는 많다. 65
  66. 66. 66 Angular 2의 선구자가 될 시점은 지금!
  67. 67. 감사합니다. han41858@gmail.com han41858.tistory.com 67

×