Angular jsの継続的なバージョンアップ
12 likes•13,514 views
第1回ペパボテックカンファレンス http://pepabo.connpass.com/event/13208/ #pbtech AngularJSの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
- 2. 自己紹介 ● 土屋和良 ● @tsuchikazu ( nessy ) ● http://tsuchikazu.net ● PHP/rails/angular ● カラーミーショップ
- 5. ですよね
- 6. Angularとは ● JavaScriptフレームワーク ● Googleが開発 ● フロントエンドの生産性向上が目的 ● フルスタック (MVW)
- 10. 止まっているのは それだけで バグ生んでるのと一緒 http://portalshit.net/2015/04/07/staying-on-is-just-like-making-bug by
- 12. Angular2.0
- 13. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
- 14. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
- 16. Angular2
- 18. Angular2へ ● New Router ○ 1系と2系を 共存可能 (まだ試せてない) ● Migration 機能は 今後もリリースされる
- 20. Tips
- 21. ● TypeScript ○ これから始める人 ○ 恩恵を受けれそう ● ES6 ○ ES5で書いている人 ● CoffeeScript ○ (これ使ってるけど、正直失敗感） Angular2へ
- 23. ● Serviceは単なるclassへ ○ なるべくserviceを使う ○ resourceを使うものは、serviceにし にくい ●今のところfactory Angular2へ
- 26. ● scopeはなくなる ○ DirectiveでlinkではなくControllerを ○ controller as を使う ○ componentらしく Angular2へ
- 27. before & after
- 29. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
- 30. テストに正解はない
- 31. ただの一例として紹介
- 35. Unit テスト • Controller / Service / Directive • 自分の不安解消のため – 細かな分岐/パターン網羅 • 自動テスト – Jasmine & Karma & CI • 構成が大きく変わった時は対応不可
- 37. • Angular + API + (他システム) 全て • 期待した通りの動作をしているか – UI&UXも含む • 自動化するにはデータや環境準備など コスト高 • 手動テストでカバー E2Eテスト
- 39. • フロントエンドのみ （APIはMock） • 内部実装に依存せずに、フロントエンド 全体が期待通りに動作しているか • 自動テスト – Protractor & ngMockE2E & CI E2E with API Mockテスト
- 40. • 課題 – APIのMockがズレるリスク – テストは通るのに、動かない – レスポンスの項目が増えた減った • Mock自体のテスト? E2E with API Mockテスト
- 41. E2E with API Mock テストを書こう
- 42. アウトライン ● 次期バージョンを見据えた実装 ● テスト ● 他技術のキャッチアップ
- 43. 他技術のキャッチアップ • Angular2 – ES6 module – Shadow DOM – HTML5 template tag
- 44. まとめ ● 次期バージョンを見据えた実装 ○ Migration機能を取り入れよう ● テスト ○ E2E with API Mock テストをしよう ● 他技術のキャッチアップ ○ がんばろう