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にて発表した資料です

OKUNOKENTARO

August 22, 2015
Tweet

More Decks by OKUNOKENTARO

Other Decks in Programming

Transcript

  1. 進捗 • github.com/angular/angular • Angular 2 alpha.35 • ほぼ7日間隔でalphaリリース •

    AngularJS 2.0 とは呼ばれず、
 Angular 2 for JavaScript となる
  2. Highlight 2014.3 • 開発者ブログにて"AngularJS 2.0"という
 記事が掲載 • "AngularJS 2 is

    a framework for
 mobile apps." と明言 • AngularDartファースト・リリースから
 約4ヶ月後のこと
  3. TypeScript • ECMAScript 2015ベース
 過渡期なのでES6という呼称と混在 • Decorators構文 • 型付けによって
 変換時に誤指定が


    ないか検証 • IDEの支援が強い @Component({ selector: 'greet' }) @View({ template: 'Hello {{name}}!' }) class Greet { name: string; constructor() { this.name = 'World'; } } ※Babel, ES5でも記述できるように配慮されている
  4. Component • @Componentは
 1系でのDirective • 面倒なrestrictは
 廃止 • カスタム要素用の@componentと、
 カスタム属性用の@directiveで構築していく

    • すべてのDOMはShadow DOMとして生成される
 ViewEncapsulationで設定可 @Component({ selector: 'greet' }) @View({ template: 'Hello {{name}}!' })
  5. 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
  6. Template • {{}} はAngularJS 1.x系でおなじみになったもの • [] は属性値が 式として評価 される


    (逆に[]無しだと文字列) • () はイベントへのバインド
 (click)はonclickという意味 • [()] は2 way binding
 onchange + bind expr.とイメージすればよい
  7. 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>
  8. Template • ここへきて突如アンケートが開始 • [Angular 2 Developer Survey] [検索] •

    回答しよう! https://docs.google.com/forms/d/1BSHEMqR-1fkG0_edLiOQql7nbNT7Z8aHVxMJok1ljgo/viewform
  9. 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'
  10. 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>
  11. AngularJS 1.4 • ng-controllerは減らしていく • controller as構文は必須 • $scopeは、まだ使ってもよい
 ただし徐々にcontroller

    asやbindToControllerも 採用し、$scopeを減らしていく || 減らす意義を
 理解することがベター • ES2015, TypeScriptにすると、特に恩恵が大きい
  12. AngularJS 1.5 Plan • angular.module().component()
 が検討されている • 『AngularJSモダンプラクティス』で述べた手法の ラップに近い •

    Angularの父 Miško Hevery氏が
 Strategy Draftの作成に携わっているので、
 採用の可能性がある
  13. AngularJS 1.x Plan • AngularJS 1.xでもDecorators構文を使えるように
 というプランも実際Issuesで起こっていた • いまのところ採用は無さそうな印象
 (結局1

    to 2で書き直しが発生するのでメリットが少ない) • OSSでこれを頑張っているサードがいて
 公式が支援の意向を出しているので
 今後採用になるかも?
 (Routerでいう、ui-routerのようなサードの存在)
  14. Angular 2 ブラウザ • 下記のブラウザを対象にCIが回っている • Chrome (Desktop + Mobile)

    • Android 4.1.x • Safari (Desktop + Mobile) • Firefox • Edge • IE 11, 10, 9
  15. 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採用と今後が不安な方は
 ここにあるいくつかの資料を検討材料に使えます
  16. 正直なところ • AngularJS 1.xからAngular 2へは
 アップデートというより移植に近いです • Angular 2移行が今から本気なら、ロックインを
 意識して抽象レイヤーを育てておくとよさそう

    • 「だったら
 [ React | Riot | Mithril | Aurelia | Cycle ] 行くわ…」 • これもやむを得ない (Angular 2を気に入ってくれたら嬉しい)
  17. • Angular 2 Roadmap Update • by Igor Minar, Brad

    Green, Miško Hevery Highlight 2015.7 Angular U
  18. 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
  19. 事実を基にした推測と妄想 • AppleがOS Xでフレームワーク "Cocoa"を採用しているように
 「Googleのフレームワーク」 を意識しているのではないか • ngAnimateやMaterialとの親和性を重視している姿勢は
 Reactや他の有象無象フレームワークと視線が異なって見える

    • React Nativeとの協調や、Angular 2 for Dartの存在などから、
 Angularを単なる「JavaScriptフレームワーク」として
 位置付けていないのではないか • Chrome自体が一種のOSのように扱われ、その上の
 アプリケーションはAngularによって構築される未来…?