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