2015.5.18 HTML5j Web Platform 部

Angular2

Kenichi Kanai

can_i_do_web

Web先端技術味見部

http://bit.ly/1Fq9kDe

!

AngularJS Japan User Group

http://bit.ly/1vBMMHl

now on sale.

Agenda

!

•これからのWebアプリ

• Angular 1.x から変わること

• Angular2 でやりたいこと

Concepts

• ( Two-way ) Data Binding

• Template Engine

• Ajax Support

• Routing

• Test

• Security

これからのWebアプリ

Keywords

• ES6

• Components based

• Shadow DOM

• Object.observe ( ES7 )

• Like Virtual DOM

http://webcomponents.org/

今までもあった。

e.g. CSS - Bootstrap

キツい…

Shadow DOM

外部のCSS の影響を受けない！

こんな感じで書くと…

x-my-button タグ内の Shadow DOM には影響しない

Angular 1.x から変わること

※現時点(2015.5.18)でのお話です

https://angularjs.org/ https://angular.io/

Website & Logo & Name

Task Runner

Task Runner

？

Task Runner

Task Runner

Task Runner

https://github.com/broccolijs/broccoli

パフォーマンス

https://github.com/angular/benchpress

Deep Tree Benchmark 2015-02-09

Controller

Directive Definition Object

$scope

module

jqLite

R.I.P

Syntax

HTML Attribute -> DOM Property

Syntax binding

Angular 1.x

Angular 2

HTMLInputElement.prototype.value

Syntax event-binding

Angular 1.x

Angular 2

HTMLButtonElement.prototype.click

Syntax JavaScript

Syntax JavaScript

Routing

http://angular-ui.github.io/ui-router/site/#/api/ui.router

New Router

https://angular.github.io/router/

New Router - Changed

<ng-viewport>

↓

<ng-outlet>

TypeScript

AtScript = Superset of TypeScript

AtScript = Superset of TypeScript

TypeScript「Annotations 対応するよー」

!

AtScript「まじか…」

TypeScript 採用！

https://github.com/angular/ts-quickstart

Angular2 でやりたいこと

Server-side Rendering

• Perceived load time • Actual load time • Client side performance • SEO • Browser support • Link preview

CLI for NPM

• scaffold • skeleton files • set up build • set up testing environment • possibly even deployment

Shadow DOM

etc

• Two-way Data Binding • Improve i18n • Improve Animation • Like Virtual DOM • Migration

End of 2015 at the earliest

- but…

Thank you !

can_i_do_web