60年代〜 メ イ ン フ レ ー ム の 時代 Client (ダ ム 端末) Server (Host) Front end Back end (表示の み) IBM S/360〜390, z Systems 富⼠通・ ⽇⽴ Mシ リ ー ズ NEC ACOS BUNCH IBM 3270, 5250 (DEC VT100)
Client Backboneの Isomorphic化 (Client-side) View Model S e r v e r (Re)Hydrate Handlebars B r o w s e r HTML JSON 画面と モ デ ル の 内容が 一致 イ ベ ン ト ハ ン ド ラ 登録 状態
Server (JS) Orchestration (API Gateway Pattern) Client Server (any) Back end Front end Server (any) Back end Server (any) Back end Front end Orche- stration Experienced-based API Resource-based API http://thenextweb.com/dd/2013/12/17/future-api-design-orchestration-layer/ http://microservices.io/patterns/apigateway.htm
Rendr的なIsomorphicの 可能性 Client Server (any) Back end Server (JS) Front end Front end ス テ ー ト レ ス 疎結合 セ ッ シ ョ ン 管理 API Gateway/ Orchestration Microservices
Client DOM更新 イ ベ ン ト 'pushstate' Flux的ア プ リ の 基本要素 (Client-side) Router React Views Store Dispatcher B r o w s e r B a c k e n d Action Creator Fetcher
Server GET /user/1 HTML Fluxibleの Fetchr (サ ー バ サ イ ド ) B r o w s e r B a c k e n d Service Server側の み (NOT Isomorphic) Serviceを 直接呼び 出す New! Router React Views Store Dispatchr Action Creator Fetchr
GET /api/users/2 Client DOM更新 /users/2 Fluxibleの Fetchr (ク ラ イ ア ン ト サ イ ド ) B r o w s e r S e r v e r フ ロ ン ト エ ン ド の APIを 呼び 出す Router React Views Store Dispatchr Action Creator Fetchr
Server Fluxibleの Fetchr (サ ー バ サ イ ド ) B r o w s e r B a c k e n d Action Creator Fetchr Service Expressの ミ ド ル ウ ェ ア を 提供 GET /api/users/2 Router React Views Store Dispatchr
Fluxibleの Fetchr (全体像) Router View Store Dispatchr B r o w s e r B a c k e n d Action Creator Fetchr Service Router View Store Dispatchr Action Creator Fetchr Client Server GET /users/1 HTML GET /api/users/2