Embed Size (px)
Citation preview
2
OAngular 2 진행상황
Angular 2 의 장애물
Angular 1 대비 장점 XAngular 1업그레이드 방법
다른 라이브러리와 비교
Today
3
Ver. 2.2.0
ngular 2
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/mas-ter/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.j-son
2.0.0 package.json
5
[Major] . [Minor] . [Patch]버그 수정
호환되지 않는 API 변화호환되면서 기능 변경 , 추가
SemVer
http://han41858.tistory.com/22
6
→ 빠르고 지속적인 큰 변화①장애물
7
2016. 12. 1 출판 예정
2016. 10. 1 출판 목표
빠른 변화
9
ngModule
CLIAngular 2 Final
10
→ 새로운 개발 언어②장애물
11
Angular 2 개발 언어
12
ts
js
dart
https://angular.io/docs/ /latest/quickstart.html
13
TypeScript Dart
14
AtScript
ES5
ES6
TypeScript
Annotations
15
AtScript in Reality
ES5
ES6
TypeScript
Annotations
16
TypeScript 1.5+
ES5
ES6
Types
Annotations
17
All of the learnings we have gained
in building AngularDart, will be ap-
plied back to AngularJS v2.
18
19
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 {}
Type-Script
언어 비교 - Component
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 { }
Type-Script
언어 비교 - ngModule
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);
Type-Script
언어 비교 - bootstrap
23
→ 새로운 Tool, 개발 방식의 변화
③장애물
24
26%22%17%35%
Environment Setup
Too Complicated
Lack of Documentation
Other Interests
Mike BrocchiAngular CLI contributor
Q. What is/was your largest barrier to getting started with Angular 2?
with Angular CLI
25
26
IDE
Build, Bundling
Test
IDE
27
Boilerplate MakingComponents Build Running ServerUnit /
End-to-end Test Deploy
CLI 활용 영역
npmgeneratorYeomanmean.js
IDE
gulpgrunt
webpack
node.jslite-server
webpack-dev-servermochakarma
gitAWS-cli
Angular CLI
28
`-- [email protected] +-- @angular-cli/[email protected] +-- @angular-cli/[email protected] +-- @angular/[email protected] +-- @angular/[email protected] +-- @angular/[email protected] +-- @angular/[email protected] +-- @angular/[email protected] +-- @angular/[email protected] +-- @ngtools/[email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] `-- [email protected]
CLI dependencies
29
Buildng build
New Projectng new PROJECT_NAMEcd PROJECT_NAMEng serve (http://localhost:4200/)
Unit test, end-to-end testng testng e2e
deploy via GitHubng github-pages:deploy --message "Optional commit message"
CLI 사용 방법
30
Make Components
CLI 사용 방법
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
32
ng serve
33
Angular CLI Demo
34
CLI Roadmap
• Offline template compilation• Lazy loading routes• 3rd party add-ons (build, deploy)• Angular upgrades• Continuous integration• Product angular packages• More customizations
35
→ 문법의 변화작은 장애물
36
Directive in Angular 2
37
Data binding
38
* and <template>
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero_detail>
<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
<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>
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
40
@angular/core
Components
HTML Elements
@angular/core
Components
ngModule
HTML Elements
@ngModulebefore after
41
→ 속도장점 ①
42
https://www.youtube.com/watch?v=XQM0K6YG18s16:21~17:10
43
But!!
44
45
https://www.youtube.com/watch?v=XQM0K6YG18s17:39~18:48
46
new change detection :
zone.js
smoother virtual scrolling
smoother view transition
lazy loading
server-side rendering
첫 로딩은 2.5 배
리렌더링은 4.2 배
성능 개선 후 언제나 5 배 이상
?
Angular 1 대비
47
Angular 1.4+1.2 1.3 1.4 1.54.13 4.545 0.100 0.0956.32 10.335 0.125 0.1254.2 5.715 0.140 0.1
10.075 4.65 0.105 0.1654.325 6.026 0.207 0.11510.8 7.92 0.160 0.165
12.85 11.52 0.120 0.2355.605 7.3 0.350 0.1
28.305 14.93 0.180 0.1511.5 9.395 0.100 0.176.35 5.895 0.100 0.1
6.315 10.24 0.110 0.259.01 7.2 0.115 0.1
3.665 13.315 0.150 0.1155.12 5.245 0.100 0.1658.03 6.025 0.495 0.23
6.445 12.645 0.115 0.148.015 6.085 0.100 0.1959.365 4.16 0.110 0.1656.89 14.645 0.115 0.105
Zackary ChappleSW Architect at CareerBuilder
1.2 1.3 1.4 1.5
90%+
8.36575 8.38955 0.15485 0.14925
48
Deep tree : Speed
8.58
3.11
1.441
Baseline Angular 2with
View Cache
Angular 2 Angular 1.30
1
2
3
4
5
6
7
8
9
10
49
Deep tree : Memory
9.53
2.56
1.161
Baseline Angular 2with
View Cache
Angular 2 Angular 1.30
1
2
3
4
5
6
7
8
9
10
50
2000
1500
1000
500
02 9 16 23 30
# of tables
Angular 1
Angular 2
Angular 2(Immutable Data)
Virtual Scrolling Table
Tim
e
51
JS frameworks benchmark
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
21.59
11.52
3.67
2.86
11.43
8.5
1.69
1
2.36
53
→ 체계적인 개발 방법장점 ②
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
55
• A Google Chrome Dev Tools extension for debugging Angular 2 applications.
Augury
56
not just a debugger
• Component Relationships
• Detailed Component Info
• Dependency Hierarchy
• Change Detection Strategy
• Editable Component Properties
• Router StructureVanessa Yuen
Augury contributor
57
58
59
Augury Demo
60
ngular 2써야 할까 ?언제 ?
61
Productivity
62
체계적인 프로젝트 관리
최신 기술의 자연스러운 도입
63
더 나은 길로 가고 있다 .
사용은 아직… .
관심을 계속 갖자 .
64
Q & A
65
세상에 라이브러리는 많다 .
66
Angular 2 의 선구자가 될 시점은 지금 !
![[이슈분석]웨어러블 컴퓨터, 어디까지 왔나](https://img.pdfslide.tips/doc/110x75/55a876c81a28ab39548b48b2/-55a876c81a28ab39548b48b2.jpg)
