Angular jsの継続的なバージョンアップ

Transcript

• 1. AngularJS の継続的なバージョンアップ 第1回ペパボテックカンファレンス by tsuchikazu (nessy)
• 2. 自己紹介 ● 土屋和良 ● @tsuchikazu ( nessy ) ● http://tsuchikazu.net ● PHP/rails/angular ● カラーミーショップ
• 3. 普段 Angular書いている人？ (仕事やそれ以外含む)
• 4. ですよね
• 5. Angularとは ● JavaScriptフレームワーク ● Googleが開発 ● フロントエンドの生産性向上が目的 ● フルスタック (MVW)
• 6. Release Plan 1.0 2012/06 1.2 2013/11 1.3 2014/10 1.4 2015/04 1.5 2015 ? 2.0 2016 ?
• 7. Version Upしますか？
• 8. 止まっているのは それだけで バグ生んでるのと一緒 http://portalshit.net/2015/04/07/staying-on-is-just-like-making-bug by
• 9. Angular1.4 • 最大30%のパフォーマンス向上 • 2〜4%のメモリ使用量軽減
• 10. Angular2.0
• 11. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
• 12. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
• 13. Angular1.4 ● 1.3との互換性はほぼ保たれる ● サポートブラウザも同じ
• 14. Angular2
• 15. Angular2へ ● New Router ○ 1系と2系を 　　共存可能 　(まだ試せてない) ● Migration 機能は 今後もリリースされる
• 16. Migration 機能を 取り入れよう
• 17. Tips
• 18. ● TypeScript ○ これから始める人 ○ 恩恵を受けれそう ● ES6 ○ ES5で書いている人 ● CoffeeScript ○ (これ使ってるけど、正直失敗感） Angular2へ
• 19. Angular1 & 2(service)
• 20. ● Serviceは単なるclassへ ○ なるべくserviceを使う ○ resourceを使うものは、serviceにし にくい ●今のところfactory Angular2へ
• 21. Angular1 & 2(service)
• 22. Angular1 & 2(directive)
• 23. ● scopeはなくなる ○ DirectiveでlinkではなくControllerを ○ controller as を使う ○ componentらしく Angular2へ
• 24. before & after
• 25. Angular1 & 2(directive)
• 26. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
• 27. テストに正解はない
• 28. ただの一例として紹介
• 29. Angular 構成(SPA) Controller Service Template Directive API
• 30. どこを何のために どうやって テストするのか
• 31. Angular Unit テスト Controller Service Template Directive API Mock
• 32. Unit テスト • Controller / Service / Directive • 自分の不安解消のため – 細かな分岐/パターン網羅 • 自動テスト – Jasmine & Karma & CI • 構成が大きく変わった時は対応不可
• 33. Angular E2Eテスト Controller Service Template Directive API
• 34. • Angular + API + (他システム) 全て • 期待した通りの動作をしているか – UI&UXも含む • 自動化するにはデータや環境準備など コスト高 • 手動テストでカバー E2Eテスト
• 35. Angular Controller Service Template Directive API Mock E2E with API Mockテスト
• 36. • フロントエンドのみ （APIはMock） • 内部実装に依存せずに、フロントエンド 全体が期待通りに動作しているか • 自動テスト – Protractor & ngMockE2E & CI E2E with API Mockテスト
• 37. • 課題 – APIのMockがズレるリスク – テストは通るのに、動かない – レスポンスの項目が増えた減った • Mock自体のテスト? E2E with API Mockテスト
• 38. E2E with API Mock テストを書こう
• 39. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
• 40. 他技術のキャッチアップ • Angular2 – ES6 module – Shadow DOM – HTML5 template tag
• 41. まとめ ● 次期バージョンを見据えた実装 ○ Migration機能を取り入れよう ● テスト ○ E2E with API Mock テストをしよう ● 他技術のキャッチアップ ○ がんばろう
• 42. フロントエンドも サーバサイドと 同じ
• 43. やっておいた方がいいこ とをやって 不確かな未来へ