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