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 テストをしよう

● 他技術のキャッチアップ

○ がんばろう

フロントエンドもサーバサイドと

同じ

やっておいた方がいいことをやって

不確かな未来へ