Angular 2@Grand-Frontend-Osaka 2015 Summer

2015/8/22にGrand-Frontend-Osaka 2015 Summerにて発表した資料です

Transcript

1. Angular 2 Aug 22, 2015 Grand-Frontend-Osaka 2015 Summer
2. @armorik83 • 奥野 賢太郎 はちさん • Webアプリケーションエンジニア • 9月から東京 • AngularJS歴 2年 • ng-kyoto代表
3. ng-kyoto
4. Qiita
5. Qiita
6. Qiita
7. Qiita
8. Qiita
9. Angular 2 使ったことある人？
10. https://flic.kr/p/4hqh5f David Goehring / My What a Happy New Year!
11. 話すこと 1. いまAngular 2はどうなっているのか 2. Angular 2の特徴・できること 3. AngularJS 1.xとの付き合い方 4. Googleの捉えている未来を予測
12. 話さないこと • Angular 2 実務ノウハウ
13. 1. いまAngular 2は
 どうなっているのか
14. https://angular.io
15. 進捗 • github.com/angular/angular • Angular 2 alpha.35 • ほぼ7日間隔でalphaリリース • AngularJS 2.0 とは呼ばれず、
 Angular 2 for JavaScript となる
16. Highlight 2014.3 • 開発者ブログにて"AngularJS 2.0"という
 記事が掲載 • "AngularJS 2 is a framework for
 mobile apps." と明言 • AngularDartファースト・リリースから
 約4ヶ月後のこと
17. • AngularJSリファレンス（通称、夕日本）発売 • 国内の書籍としてAngular 2が扱われた
 のは初？ [要出典] • 本書のAngular 2像から現在までで、
 けっこう変わった Highlight 2014.9
19. • 全AngularJSユーザを震え上がらせた
 お騒がせ画像 • RIP $scope, ng-controller, etc. • Decorators構文を採用した AtScript を発表 Highlight 2014.10 ng-europe
20. • TypeScript 1.5にDecorators構文の
 導入が決定 • AtScriptをやめ、 TypeScript での開発と発表 • [armorik83 Decorators] [検索]
 以前詳しく書きました Highlight 2015.3 ng-conf
21. • Angular 2 alpha.14辺りから定期更新 • 順調にAngular 2 alpha開発中 • その間、こちらもなんとかリリース • AngularJS 1.4 • TypeScript 1.5.3 Highlight 2015.4 and now
22. 2. Angular 2の
 特徴・できること
23. Performance • AngularJS 1.xと比較して3-6倍の高速化 • フレームワークを用いず最速を意識してチューニングされた Baselineを基準として、Angular 2とAngularJS 1.xを計測
24. TypeScript • ECMAScript 2015ベース
 過渡期なのでES6という呼称と混在 • Decorators構文 • 型付けによって
 変換時に誤指定が
 ないか検証 • IDEの支援が強い @Component({ selector: 'greet' }) @View({ template: 'Hello {{name}}!' }) class Greet { name: string; constructor() { this.name = 'World'; } } ※Babel, ES5でも記述できるように配慮されている
25. Component • @Componentは
 1系でのDirective • 面倒なrestrictは
 廃止 • カスタム要素用の@componentと、
 カスタム属性用の@directiveで構築していく • すべてのDOMはShadow DOMとして生成される
 ViewEncapsulationで設定可 @Component({ selector: 'greet' }) @View({ template: 'Hello {{name}}!' })
26. Dependency Injection • AngularJS 1.xの解説記事などで
 やたらと強調されていたDI • 1系と比べて、テストがだいぶ書きやすくなる • DIコンテナっぽさが強くなった var injector = Injector.resolveAndCreate([ Car, Engine, Tires, Doors ]); var car = injector.get(Car); ͕͜͜ৄ͍͠ http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
27. Change Detection • $digestによるDirty Checkを廃止 • 変更のあった箇所のみ描画を更新 • ReactのVirtual DOMに似た、高速化のための 工夫といえばイメージしやすいか
 （原理は異なる）
28. One-time Binding • Change Detectionが採用されたので
 基本的には2 way bindingではなくなっている • テンプレートに明示的に記述することで
 再現可能 <input [(ng-model)]="todo.text"></input>
29. Template • Angular 2のパーサのお陰で
 Templateにはsugarをたくさん使える <div>Hello {{name}}</div> <input [(ng-model)]="todo.text"></input> <button (click)="player.pause()">Pause</button>
30. Template • {{}} はAngularJS 1.x系でおなじみになったもの • [] は属性値が 式として評価 される
 （逆に[]無しだと文字列） • () はイベントへのバインド
 (click)はonclickという意味 • [()] は2 way binding
 onchange + bind expr.とイメージすればよい
31. Template • 慣れない？ sugar無しでも書けます！ <div>Hello {{name}}</div> <input [(ng-model)]="todo.text"></input> <button (click)="player.pause()">Pause</button> <div>Hello {{name}}</div> <input bindon-ng-model="todo.text"></input> <button on-click="player.pause()">Pause</button>
32. Template • ここへきて突如アンケートが開始 • [Angular 2 Developer Survey] [検索] • 回答しよう！ https://docs.google.com/forms/d/1BSHEMqR-1fkG0_edLiOQql7nbNT7Z8aHVxMJok1ljgo/viewform
33. Pipes • Pipesは重要なAPI • AngularJS 1.x系にあるFilterの後継と
 イメージすると近い {{ dateObj | date }} // output is 'Jun 15, 2015' {{ dateObj | date:'shortTime' }} // output is '9:43 PM' {{ dateObj | date:'mmss' }} // output is '43:11'
34. Pipes • Pipesは重要なAPI • AngularJS 1.x系にあるFilterの後継と
 イメージすると近い • だが真価はそこではなく、AsyncPipeによって
 ObservableやPromiseまで扱えるところ • すでにサードのOSSとして、RxJS Streamを
 組み合わせる試みも起こっている
35. Router • サード製ui-routerから本家が影響を受けて開発 • New RouterComponent Router • pathに対して紐付けるRoot Componentを指定 router.config([ {path: '/', component: IndexComp, as: 'index'}, {path: '/user/:id', component: UserComp, as: 'user'}, ]); <router-outlet><!-- expand here --></router-outlet> <a [router-link]="['./user']">link to user component</a>
36. alpha • 骨格は完成していると見てる • 幾度ものBREAKING CHANGESを経てきて
 そろそろbetaを見据えて、落ち着いてきたか • でも細かいところでイライラすることは、まだ多い
 a25からa35で色々改善されているので、今後も良くなってほしい • 趣味でなら使い始めてOK
37. 3. AngularJS 1.x
 との付き合い方
38. の前に 大反省会
40. 44/100 ❌
42. 70/100
44. 87/100 ⭕
46. 92/100 ⭕
47. Angular 2を
 意識しなかった頃の方が高得点※ ※自己採点、得点はアバウトです
48. AngularJS どんどんやろう • やっていいです！ • 続けてください！ • 少なくとも、年内にAngular 2移行案件は
 起こさなくていい • 年内にAngular 2 stableが来るかさえ不明
49. 言語選択 • ES2015, TypeScriptへの引っ越しは
 そろそろ考えてよい時期 • 新規部分から採用してみるのもアリ • CoffeeScriptは減少傾向
 いまからの新規採用は、よほどRubyエンジニアが多くない限り
 しなくていい
50. • http://www.slideshare.net/teppeis/effective-es6 • https://speakerdeck.com/koba04/whats-happening-in-frontend-now • https://html5experts.jp/vvakame/16241/
51. AngularJS 1.4 • ng-controllerは減らしていく • controller as構文は必須 • $scopeは、まだ使ってもよい
 ただし徐々にcontroller asやbindToControllerも 採用し、$scopeを減らしていく || 減らす意義を
 理解することがベター • ES2015, TypeScriptにすると、特に恩恵が大きい
52. AngularJS 1.5 Plan • angular.module().component()
 が検討されている • 『AngularJSモダンプラクティス』で述べた手法の ラップに近い • Angularの父 Miško Hevery氏が
 Strategy Draftの作成に携わっているので、
 採用の可能性がある
53. AngularJS 1.x Plan • AngularJS 1.xでもDecorators構文を使えるように
 というプランも実際Issuesで起こっていた • いまのところ採用は無さそうな印象
 （結局1 to 2で書き直しが発生するのでメリットが少ない） • OSSでこれを頑張っているサードがいて
 公式が支援の意向を出しているので
 今後採用になるかも？
 （Routerでいう、ui-routerのようなサードの存在）
54. Angular 2 ブラウザ • 下記のブラウザを対象にCIが回っている • Chrome (Desktop + Mobile) • Android 4.1.x • Safari (Desktop + Mobile) • Firefox • Edge • IE 11, 10, 9
55. ngUpgrade • https://github.com/angular/ngUpgrade • Angular 1 module.component() Helper • Guides and Best Practices • Angular 1 to Angular 2 Upgrade Strategy Draft • 今後、移行に関する知見を集積させるためのrepo • 現在のAngularJS採用と今後が不安な方は
 ここにあるいくつかの資料を検討材料に使えます
56. 正直なところ • AngularJS 1.xからAngular 2へは
 アップデートというより移植に近いです • Angular 2移行が今から本気なら、ロックインを
 意識して抽象レイヤーを育てておくとよさそう • 「だったら
 [ React | Riot | Mithril | Aurelia | Cycle ] 行くわ…」 • これもやむを得ない （Angular 2を気に入ってくれたら嬉しい）
57. 4. Googleの捉えている 未来を予測
58. 実は、まだ伏せていることがあって
60. • Angular 2 Roadmap Update • by Igor Minar, Brad Green, Miško Hevery Highlight 2015.7 Angular U
61. Event Loop
62. Worker
63. Worker
64. ೋ૧ࣜ?
65. Mobile
66. Mobile NativeScript React Native
67. Server-side Rendering
68. Material + ngAnimate
69. Milestones Angular 2 ships when? Alpha February Website preview March First migration @ Google May Beta ? Next Milestones Finish Core API Sugaring Docs Perf+ Migration Support Animate CLI Material Design Server Render Native ? Web Workers
70. 事実― • Google社内では2,000のアプリケーションが
 AngularJSによって構築されている • AngularJSは、社内フレームワークのOSS化という側面がある • Angular 2 alpha.30辺りから
 ngAnimateやMaterialの整備にリソースを割くようになってきた • Angular 2はWorker利用やMobile Nativeを意識
71. 事実を基にした推測と妄想 • AppleがOS Xでフレームワーク "Cocoa"を採用しているように
 「Googleのフレームワーク」 を意識しているのではないか • ngAnimateやMaterialとの親和性を重視している姿勢は
 Reactや他の有象無象フレームワークと視線が異なって見える • React Nativeとの協調や、Angular 2 for Dartの存在などから、
 Angularを単なる「JavaScriptフレームワーク」として
 位置付けていないのではないか
72. 事実を基にした推測と妄想 • AppleがOS Xでフレームワーク "Cocoa"を採用しているように
 「Googleのフレームワーク」 を意識しているのではないか • ngAnimateやMaterialとの親和性を重視している姿勢は
 Reactや他の有象無象フレームワークと視線が異なって見える • React Nativeとの協調や、Angular 2 for Dartの存在などから、
 Angularを単なる「JavaScriptフレームワーク」として
 位置付けていないのではないか • Chrome自体が一種のOSのように扱われ、その上の
 アプリケーションはAngularによって構築される未来…？
73. さて、どうなることやら
74. Angular 2 ありがとうございました