API スタブをえらんでみた

API Meetup Tokyo #5

自己紹介

2

@daylilyfield

はじめに

3

静的コンテンツ

アプリケーション構成

フロント API

4

バックエンド API

リバースプロキシ

静的コンテンツ

アプリケーション構成

フロント API

5

バックエンド API

リバースプロキシ

SPA

スタブ化

お伝えすること

6

$httpBackend きみにきめた！

API スタブの方式

7

API スタブの方式

8

リクエスト投げる派リクエスト投げない派

クライアント主導 API サーバ主導

dyson, stubby, stubcell apimock-middleware$httpBackend

$httpBackend

9

アプリ

リクエストを折り返す

$httpBackend

ブラウザ

API サーバ

＊ API サーバへのパススルーも可能です

dyson, stubby, stubcell

10

アプリ

ディスパッチ

ブラウザ

API サーバプロキシサーバ

＊ プロキシサーバとスタブサーバは gulp でローカルに起動しました

スタブサーバ(dyson etc…)

apimock-middleware

11

アプリ

ブラウザ

API サーバ

スタブ

アプリ

ルータ

(apimock-middleware)ディスパッチ

使いどころ

12

使いどころ

13

UI と API の並行開発をとことん追求したい

使いどころ

14

UI と API の並行開発をとことん追求したい

$httpBackend, dyson, stubby, stubcell

使いどころ

15

スタブのためのコードを最小化したい

使いどころ

16

スタブのためのコードを最小化したい

apimock-middleware

使いどころ

17

E2E テストでスタブを再利用したい

使いどころ

18

E2E テストでスタブを再利用したい

$httpBackend

＊本物の API サーバと統合した E2E テストもあわせて実施します

まとめ

19

まとめ

20

API スタブはケースバイケースで

リソース

21

• $httpBackend

– http://goo.gl/hYaABi

• dyson

– http://goo.gl/FbfrHk

• stubby

– http://goo.gl/ECkaq1

• stubcell

– http://goo.gl/jRTEXr

• apimock-middleware

– http://goo.gl/xUdiz4