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

11,107 views

Published on

第1回ペパボテックカンファレンス
http://pepabo.connpass.com/event/13208/
#pbtech
AngularJSの継続的なバージョンアップ

Published in: Engineering
  • Be the first to comment

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

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

×