Angular 2 最新リリースを試してみた

ng-kyoto Angular Meetup #3 にて発表した資料です。

Transcript

1. Angular 2 最新リリースを試してみた ng-kyoto Angular Meetup #3 / Nov 22, 2015
2. • 奥野 賢太郎 はちさん • 京都市出身 • ng-kyoto代表 • 　 armorik83
3. Angular 2の進捗どうですか
4. • beta 0リリースまでのマイルストーン • 52% （2015/11/22現在） • だいぶAPIは安定した • と思いきや、細部はまだBreaking Changesある • 大枠は、ほぼ決着 Angular 2 alpha.46
5. • Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの • @Input • @Output 主要API
6. その前に前提知識
7. • Angular 2はTypeScriptからの利用を想定して
 設計されている （ES6, ES5でも書けるように作られてる） • Decorators構文を多用 • Decorators構文については過去の登壇資料を参照
 https://speakerdeck.com/armorik83/es7-decorators TypeScript & Decolators
8. @Directive
9. • Custom Elementsを作る • AngularJSのDirectiveに相当 • restrict: 'AE'と指定したときのDirective • AngularJSでのDirective名の指定から2ではselector宣言と
 なり、要素名・属性名を記述しやすくなった @Directive
10. AngularJS 1.4 Directive DMBTT
    "UUSJCVUF/BNF$POUSPMMFS
    \
    
    
    
    㹋鄲
    ^
    BOHVMBSNPEVMF "11 EJSFDUJWF BUUSJCVUF/BNF
    
    
    \
    
    
    SFUVSO
    \
    
    
    
    
    SFTUSJDU
    "
    
    
    
    
    DPOUSPMMFS
    "UUSJCVUF/BNF$POUSPMMFS
    
    
    ^
    ^ 
    
    JO
    )5.-
    EJW
    BUUSJCVUFOBNFEJW 要素名 実装
11. Angular 2 Directive !%JSFDUJWF \
    
    
    TFMFDUPS
    <BUUSJCVUFOBNF>
    ^
    DMBTT
    "UUSJCVUF/BNF%JSFDUJWF
    \
    
    
    
    㹋鄲
    ^
    
    JO
    )5.-
    EJW
    BUUSJCVUFOBNFOBNF 要素名（セレクタ指定なので属性なら[ ]でくくる）
12. @Component
13. • @Directiveと同じくCustom Elementsを作る • templateかtemplateUrlが必須 • テンプレートを持つDirectiveを作るなら
 ＠Componentを使えばよい • ng-controllerは廃止 • 基本的には、いくつものComponentの組み合わせで
 アプリケーションを構築していく @Component
14. AngularJS 1.4 Directive (with template) DMBTT
    &MFNFOU/BNF$POUSPMMFS
    \
    
    
    
    㹋鄲
    ^
    BOHVMBSNPEVMF "11 EJSFDUJWF FMFNFOU/BNF
    
    
    \
    
    
    SFUVSO
    \
    
    
    
    
    SFTUSJDU
    &
    
    
    
    
    UFNQMBUF
    QIFMMPQ
    
    
    
    
    DPOUSPMMFS
    &MFNFOU/BNF$POUSPMMFS
    
    
    ^
    ^ 
    
    JO
    )5.-
    FMFNFOUOBNFFMFNFOUOBNF 要素名 内包するテンプレート 実装
15. Angular 2 Component !$PNQPOFOU \
    
    
    TFMFDUPS
    FMFNFOUOBNF
    
    
    UFNQMBUF
    A
    
    
    
    
    QIFMMPQ
    
    
    A
    ^
    DMBTT
    &MFNFOU/BNF$PNQPOFOU
    \
    
    
    
    㹋鄲
    ^
    
    JO
    )5.-
    FMFNFOUOBNFFMFNFOUOBNF 要素名 内包するテンプレート
16. @Input
17. • Custom Elementsに入力インタフェースを提供する • つまり独自要素に属性を追加できる • AngularJSでいうisolatedScopeやbindToControllerに相当 • @Inputアノテーションを使えば記述が簡単 @Input
18. AngularJS 1.4 bindToController DMBTT
    4PNF$POUSPMMFS
    \
    
    
    DPOTUSVDUPS \
    
    
    
    
    UIJTWBMVF
    
    GPP
    
    
    ^
    ^
    BOHVMBSNPEVMF "11 EJSFDUJWF TPNF
    
    
    \
    
    
    SFUVSO
    \
    
    
    
    
    SFTUSJDU
    &
    
    
    
    
    UFNQMBUF
    Q\\4PNFWBMVF^^Q
    
    
    
    
    DPOUSPMMFS
    4PNF$POUSPMMFS
    
    
    
    
    DPOUSPMMFS"T
    4PNF
    
    
    
    
    TDPQF
    \^
    
    
    
    
    CJOE5P$POUSPMMFS
    \WBMVF
    !^
    
    
    ^
    ^ 
    
    JO
    )5.-
    TPNF
    WBMVFGPPTPNF 入力の定義
19. Angular 2 Input !$PNQPOFOU \
    
    
    TFMFDUPS
    TPNF
    
    
    UFNQMBUF
    A
    
    
    
    
    Q\\WBMVF^^Q
    
    
    A
    ^
    DMBTT
    4PNF$PNQPOFOU
    \
    
    
    !*OQVU
    WBMVF
    TUSJOH
    
    
    PO*OJU 
    WPJE
    \
    
    
    
    
    UIJTWBMVF
    
    GPP
    
    
    ^
    ^
    
    JO
    )5.-
    TPNF
    WBMVFGPPTPNF 入力、およびプロパティの定義
20. @Output
21. • Custom Elementsに出力インタフェースを提供する • 独自要素から発するイベントを自由に定義できる • Angular 2の目玉であり個人的に一番気になってるAPI • AngularJSの$broadcast, $emitは廃止 • @Outputアノテーションで記述 @Output
22. Angular 2 Output !$PNQPOFOU \
    
    
    TFMFDUPS
    UPEP
    
    
    UFNQMBUF
    A
    
    
    
    
    CVUUPO
    DMJDL PO$MJDL FWFOU $PNQMFUFCVUUPO
    
    
    A
    ^
    DMBTT
    5PEP$PNQPOFOU
    \
    
    
    !0VUQVU
    DPNQMFUF
    
    OFX
    &WFOU&NJUUFS 
    
    
    PO$MJDL NPVTF&WFOU 
    WPJE
    \
    
    
    
    
    UIJTDPNQMFUFOFYU NPVTF&WFOU 
    
    
    ^
    ^
    
    JO
    )5.-
    UPEP
    DPNQMFUF PO$PNQMFUF FWFOU UPEP 出力の定義 出力に対する受け取り
23. • カレンダー、ダイアログボックス、ポップアップといった
 UIパーツ毎の細々とした制御の実装に • $scope.$emitより構造変更に強く、Fluxに組み込むには
 大袈裟すぎる場面で、パーツ内で完結させたい場合に有用 • MouseEvent, KeyboardEventなどを、一旦扱いやすい
 インタフェースに整えてから外部への公開が可能 • RxJSのObservable準拠で、受け取る側のフィルタリングが楽 • たとえばスクロールやマウス制御などでのthrottle Angular 2 Output は何が嬉しいか
24. • Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの • @Input • @Output まずはこの4つが理解できればOK
25. • UIインタラクションの実装 • @Input, @Outputによるbindとemit • NgAnimateとCSS Transitionによる視覚効果 • ロジックとデータフローの実装 • FluxアーキテクチャはAngular 2においても適用可能 • @Injectableを用いたDIベースのビジネスロジック利用 Application architecture
26. Angular 2のその他の特徴
27. • 例のNew Router • アプリケーションのルートに
 @RouteConfigアノテーションで記述 • Pathに対して、紐付けるComponentを指定 Component Router @RouteConfig([ {path: '/home', component: HomeComponent, name: 'Home'} ]) class MyApp { } // in HTML <router-outlet><!-- ͜͜ʹඳը --></router-outlet>
28. • AngularJSでの$http, $resource辺りに相当 • Angular 2 DIに適した形のfetch • 実体はXMLHttpRequestのラップ • 戻り値がPromiseではなくObservableな点が魅力 Http
29. • AngularJSで便利だったビルトイン・ディレクティブも健在 • ng-class, ng-style, ng-if, ng-for （1でのng-repeat） • フォーム実装を強力に支援するng-formが追加 • Angular 2は単方向バインディング • だが、AngularJSの特徴だった双方向バインディング
 ng-modelも残っている Built-in Directives
30. • Promise, EventEmitterを搭載（別途Polyfillする必要なし） • フィルタを実現できるPipes • onInit, onChanges, onDestroyといったLifecycle Hooks • 生のDOMElementを直接扱える禁断のRef • そのComponent内にのみ適用されるCSS Styles, StyleUrls • DIとKarma, Protractorを活かしたテストの書きやすさ • これぞAngularの正当進化！！ And more...
31. はじめよう Angular 2
32. • Qiita Angular 2 Advent Calendar 2015準備中！ • まだ枠も空いているので、Angular 2試して感想を書くのに最適 • http://qiita.com/advent-calendar/2015/angular2 • それでも空いてる日はng-kyotoのオーガナイザが
 頑張って埋めます 告知
33. Angular 2 最新リリースを試してみた ありがとうございました