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

Slide 1

Slide 1 text

Angular 2 最新リリースを試してみた ng-kyoto Angular Meetup #3 / Nov 22, 2015

Slide 2

Slide 2 text

• 奥野賢太郎はちさん • 京都市出身 • ng-kyoto代表 • 　 armorik83

Slide 3

Slide 3 text

Angular 2の進捗どうですか

Slide 4

Slide 4 text

• beta 0リリースまでのマイルストーン • 52% （2015/11/22現在） • だいぶAPIは安定した • と思いきや、細部はまだBreaking Changesある • 大枠は、ほぼ決着 Angular 2 alpha.46

Slide 5

Slide 5 text

• Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの • @Input • @Output 主要API

Slide 6

Slide 6 text

その前に前提知識

Slide 7

Slide 7 text

• Angular 2はTypeScriptからの利用を想定して  設計されている（ES6, ES5でも書けるように作られてる） • Decorators構文を多用 • Decorators構文については過去の登壇資料を参照  https://speakerdeck.com/armorik83/es7-decorators TypeScript & Decolators

Slide 8

Slide 8 text

@Directive

Slide 9

Slide 9 text

• Custom Elementsを作る • AngularJSのDirectiveに相当 • restrict: 'AE'と指定したときのDirective • AngularJSでのDirective名の指定から2ではselector宣言と  なり、要素名・属性名を記述しやすくなった @Directive

Slide 10

Slide 10 text

AngularJS 1.4 Directive DMBTT"UUSJCVUF/BNF$POUSPMMFS\ 㹋鄲 ^ BOHVMBSNPEVMF "11 EJSFDUJWF BUUSJCVUF/BNF \ SFUVSO\ SFTUSJDU" DPOUSPMMFS"UUSJCVUF/BNF$POUSPMMFS ^ ^ JO)5.- EJWBUUSJCVUFOBNFEJW 要素名実装

Slide 11

Slide 11 text

Angular 2 Directive !%JSFDUJWF \ TFMFDUPS ^ DMBTT"UUSJCVUF/BNF%JSFDUJWF\ 㹋鄲 ^ JO)5.- EJWBUUSJCVUFOBNFOBNF 要素名（セレクタ指定なので属性なら[ ]でくくる）

Slide 12

Slide 12 text

@Component

Slide 13

Slide 13 text

• @Directiveと同じくCustom Elementsを作る • templateかtemplateUrlが必須 • テンプレートを持つDirectiveを作るなら  ＠Componentを使えばよい • ng-controllerは廃止 • 基本的には、いくつものComponentの組み合わせで  アプリケーションを構築していく @Component

Slide 14

Slide 14 text

AngularJS 1.4 Directive (with template) DMBTT&MFNFOU/BNF$POUSPMMFS\ 㹋鄲 ^ BOHVMBSNPEVMF "11 EJSFDUJWF FMFNFOU/BNF \ SFUVSO\ SFTUSJDU& UFNQMBUFQIFMMPQ DPOUSPMMFS&MFNFOU/BNF$POUSPMMFS ^ ^ JO)5.- FMFNFOUOBNFFMFNFOUOBNF 要素名内包するテンプレート実装

Slide 15

Slide 15 text

Angular 2 Component !$PNQPOFOU \ TFMFDUPSFMFNFOUOBNF UFNQMBUFA QIFMMPQ A ^ DMBTT&MFNFOU/BNF$PNQPOFOU\ 㹋鄲 ^ JO)5.- FMFNFOUOBNFFMFNFOUOBNF 要素名内包するテンプレート

Slide 16

Slide 16 text

@Input

Slide 17

Slide 17 text

• Custom Elementsに入力インタフェースを提供する • つまり独自要素に属性を追加できる • AngularJSでいうisolatedScopeやbindToControllerに相当 • @Inputアノテーションを使えば記述が簡単 @Input

Slide 18

Slide 18 text

AngularJS 1.4 bindToController DMBTT4PNF$POUSPMMFS\ DPOTUSVDUPS \ UIJTWBMVFGPP ^ ^ BOHVMBSNPEVMF "11 EJSFDUJWF TPNF \ SFUVSO\ SFTUSJDU& UFNQMBUFQ\\4PNFWBMVF^^Q DPOUSPMMFS4PNF$POUSPMMFS DPOUSPMMFS"T4PNF TDPQF\^ CJOE5P$POUSPMMFS\WBMVF!^ ^ ^ JO)5.- TPNFWBMVFGPPTPNF 入力の定義

Slide 19

Slide 19 text

Angular 2 Input !$PNQPOFOU \ TFMFDUPSTPNF UFNQMBUFA Q\\WBMVF^^Q A ^ DMBTT4PNF$PNQPOFOU\ !*OQVU WBMVFTUSJOH PO*OJU WPJE\ UIJTWBMVFGPP ^ ^ JO)5.- TPNFWBMVFGPPTPNF 入力、およびプロパティの定義

Slide 20

Slide 20 text

@Output

Slide 21

Slide 21 text

• Custom Elementsに出力インタフェースを提供する • 独自要素から発するイベントを自由に定義できる • Angular 2の目玉であり個人的に一番気になってるAPI • AngularJSの$broadcast, $emitは廃止 • @Outputアノテーションで記述 @Output

Slide 22

Slide 22 text

Angular 2 Output !$PNQPOFOU \ TFMFDUPSUPEP UFNQMBUFA CVUUPO DMJDL PO$MJDL FWFOU $PNQMFUFCVUUPO A ^ DMBTT5PEP$PNQPOFOU\ !0VUQVU DPNQMFUFOFX&WFOU&NJUUFS PO$MJDL NPVTF&WFOU WPJE\ UIJTDPNQMFUFOFYU NPVTF&WFOU ^ ^ JO)5.- UPEP DPNQMFUF PO$PNQMFUF FWFOU UPEP 出力の定義出力に対する受け取り

Slide 23

Slide 23 text

• カレンダー、ダイアログボックス、ポップアップといった  UIパーツ毎の細々とした制御の実装に • $scope.$emitより構造変更に強く、Fluxに組み込むには  大袈裟すぎる場面で、パーツ内で完結させたい場合に有用 • MouseEvent, KeyboardEventなどを、一旦扱いやすい  インタフェースに整えてから外部への公開が可能 • RxJSのObservable準拠で、受け取る側のフィルタリングが楽 • たとえばスクロールやマウス制御などでのthrottle Angular 2 Output は何が嬉しいか

Slide 24

Slide 24 text

• Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの • @Input • @Output まずはこの4つが理解できればOK

Slide 25

Slide 25 text

• UIインタラクションの実装 • @Input, @Outputによるbindとemit • NgAnimateとCSS Transitionによる視覚効果 • ロジックとデータフローの実装 • FluxアーキテクチャはAngular 2においても適用可能 • @Injectableを用いたDIベースのビジネスロジック利用 Application architecture

Slide 26

Slide 26 text

Angular 2のその他の特徴

Slide 27

Slide 27 text

• 例のNew Router • アプリケーションのルートに  @RouteConfigアノテーションで記述 • Pathに対して、紐付けるComponentを指定 Component Router @RouteConfig([ {path: '/home', component: HomeComponent, name: 'Home'} ]) class MyApp { } // in HTML

Slide 28

Slide 28 text

• AngularJSでの$http, $resource辺りに相当 • Angular 2 DIに適した形のfetch • 実体はXMLHttpRequestのラップ • 戻り値がPromiseではなくObservableな点が魅力 Http

Slide 29

Slide 29 text

• AngularJSで便利だったビルトイン・ディレクティブも健在 • ng-class, ng-style, ng-if, ng-for （1でのng-repeat） • フォーム実装を強力に支援するng-formが追加 • Angular 2は単方向バインディング • だが、AngularJSの特徴だった双方向バインディング  ng-modelも残っている Built-in Directives

Slide 30

Slide 30 text

• Promise, EventEmitterを搭載（別途Polyfillする必要なし） • フィルタを実現できるPipes • onInit, onChanges, onDestroyといったLifecycle Hooks • 生のDOMElementを直接扱える禁断のRef • そのComponent内にのみ適用されるCSS Styles, StyleUrls • DIとKarma, Protractorを活かしたテストの書きやすさ • これぞAngularの正当進化！！ And more...

Slide 31

Slide 31 text

はじめよう Angular 2

Slide 32

Slide 32 text

• Qiita Angular 2 Advent Calendar 2015準備中！ • まだ枠も空いているので、Angular 2試して感想を書くのに最適 • http://qiita.com/advent-calendar/2015/angular2 • それでも空いてる日はng-kyotoのオーガナイザが  頑張って埋めます告知

Slide 33

Slide 33 text

Angular 2 最新リリースを試してみたありがとうございました