Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2@Grand-Frontend-Osaka 2015 Summer

Angular 2@Grand-Frontend-Osaka 2015 Summer

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

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

August 22, 2015
Tweet

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
  18. None
  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. の前に 大反省会

  39. None
  40. 44/100 ❌

  41. None
  42. 70/100

  43. None
  44. 87/100 ⭕

  45. None
  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. 実は、まだ伏せていることがあって

  59. None
  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 ありがとうございました