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

1. AngularJS
の継続的なバージョンアップ
第1回ペパボテックカンファレンス
by tsuchikazu (nessy)

2. 自己紹介
● 土屋和良
● @tsuchikazu ( nessy )
● http://tsuchikazu.net
● PHP/rails/angular
● カラーミーショップ

4. 普段
Angular書いている人？
(仕事やそれ以外含む)

5. ですよね

6. Angularとは
● JavaScriptフレームワーク
● Googleが開発
● フロントエンドの生産性向上が目的
● フルスタック (MVW)

8. Release Plan
1.0
2012/06
1.2
2013/11
1.3
2014/10
1.4
2015/04
1.5
2015 ?
2.0
2016 ?

9. Version Upしますか？

10. 止まっているのは
それだけで
バグ生んでるのと一緒
http://portalshit.net/2015/04/07/staying-on-is-just-like-making-bug by

11. Angular1.4
• 最大30%のパフォーマンス向上
• 2〜4%のメモリ使用量軽減

12. Angular2.0

13. アウトライン
● 次期バージョンを見据えた実装
● テスト
● 他技術のキャッチアップ

14. アウトライン
● 次期バージョンを見据えた実装
● テスト
● 他技術のキャッチアップ

15. Angular1.4
● 1.3との互換性はほぼ保たれる
● サポートブラウザも同じ

16. Angular2

18. Angular2へ
● New Router
○ 1系と2系を
共存可能
(まだ試せてない)
● Migration 機能は
今後もリリースされる

19. Migration 機能を
取り入れよう

20. Tips

21. ● TypeScript
○ これから始める人
○ 恩恵を受けれそう
● ES6
○ ES5で書いている人
● CoffeeScript
○ (これ使ってるけど、正直失敗感）
Angular2へ

22. Angular1 & 2(service)

23. ● Serviceは単なるclassへ
○ なるべくserviceを使う
○ resourceを使うものは、serviceにし
にくい
●今のところfactory
Angular2へ

24. Angular1 & 2(service)

25. Angular1 & 2(directive)

26. ● scopeはなくなる
○ DirectiveでlinkではなくControllerを
○ controller as を使う
○ componentらしく
Angular2へ

27. before & after

28. Angular1 & 2(directive)

29. アウトライン
● 次期バージョンを見据えた実装
● テスト
● 他技術のキャッチアップ

30. テストに正解はない

31. ただの一例として紹介

32. Angular
構成(SPA)
Controller
Service
Template
Directive
API

33. どこを何のために
どうやって
テストするのか

34. Angular
Unit テスト
Controller
Service
Template
Directive
API
Mock

35. Unit テスト
• Controller / Service / Directive
• 自分の不安解消のため
– 細かな分岐/パターン網羅
• 自動テスト
– Jasmine & Karma & CI
• 構成が大きく変わった時は対応不可

36. Angular
E2Eテスト
Controller
Service
Template
Directive
API

37. • Angular + API + (他システム) 全て
• 期待した通りの動作をしているか
– UI&UXも含む
• 自動化するにはデータや環境準備など
コスト高
• 手動テストでカバー
E2Eテスト

38. Angular
Controller
Service
Template
Directive
API
Mock
E2E with API Mockテスト

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 テストをしよう
● 他技術のキャッチアップ
○ がんばろう

45. フロントエンドも
サーバサイドと
同じ

46. やっておいた方がいいこ
とをやって
不確かな未来へ