Isomorphic Survival Guide

isomorphic tokyo meetup
http://nodejs.connpass.com/event/13363/

Transcript

1. Isomorphic Survival Guide @koichik
2. 話さ ない こ と • Isomorphicなコ ー デ ィ ン グ ／テ ス ト • Isomorphicなビ ル ド ／ト ラ ン ス パ イ ル • Isomorphicなモ ジ ュ ー ル ／パ ッ ケ ー ジ ン グ • Isomorphicなネ イ テ ィ ブ ア プ リ
3. Agenda • What's Isomorphic？ • Client/Server Survival Guide • Meet the Pioneers • from Rendr • to React
4. 語源 ἴσος (isos) μορφή (morphe) equal form, shape 同 形 希 英 日 + + +
5. X ＋ morphic 同 一 isomorphic 多 変 metamorphic polymorphic
6. http://nodejs.connpass.com/event/13363/
7. Client ＋ Server Client JavaScript JavaScript Server Your Application API
8. Client ＋ Server Client JavaScript JavaScript Server Your Application Backend API
9. http://nodejs.connpass.com/event/13363/
10. Frontend ＋ Backend？ Frontend JavaScript Your Application Backend JavaScript Isomorphic？
11. 2 x 2？ Frontend Backend Client Server
12. ア プ リ ケ ー シ ョ ン の 論理的なレ イ ヤ 本資料で の 定義 人間向け に 情報を 出し 入れ ス ト レ ー ジ 向け に 情報を 出し 入れ ネ ッ ト ワ ー ク の こ ち ら (人間)側 ネ ッ ト ワ ー ク の あ ち ら 側 Client Server Frontend Backend Network コ ン ピ ュ ー タ の 物理的な位置
13. Agenda • What's Isomorphic？ • Client/Server Survival Guide • Meet the Pioneers • From Rendr • To React
14. 60年代〜 メ イ ン フ レ ー ム の 時代 Client (ダ ム 端末) Server (Host) Front end Back end (表示の み) IBM S/360〜390, z Systems 富⼠通・ ⽇⽴ Mシ リ ー ズ NEC ACOS BUNCH IBM 3270, 5250 (DEC VT100)
15. 90年頃〜 C/Sシ ス テ ム Client (Windows) Server Unix WindowsNT Oracle SQL-Server Front end Back end (RDBMSの み) Visual Basic Delphi
16. 90年代前半〜 3層C/Sシ ス テ ム Client (Windows) Server (UNIX) TPモ ニ タ TUXEDO Encina CICS OpenTP1 Front end Back end Visual Basic Delphi CORBA Orbix VisiBroker M3 (WLE) TPBroker
17. 90年代半ば〜 World Wide Web Client (ブ ラ ウ ザ ) Server Front end Back end (表示の み) Perl (CGI) Java (Servlet/JSP) Netscape Navigator Internet Explorer
18. 00年頃〜 J2EE (Java2 Enterprise Edition) Client (ブ ラ ウ ザ ) Server Back end (表示の み) Servlet + JSP Server Front end EJB RMI over IIOP
19. 00年代前半〜 Ajax Client (ブ ラ ウ ザ ) Server Front end Back end JavaScript Dojo Prototype YUI jQuery … Front end PHP Python Ruby …
20. 00年代半は〜 RIA (Rich Internet Application) Client (ブ ラ ウ ザ +プ ラ グ イ ン ) Server Back end Flash/Flex Silverlight Curl Front end
21. 00年代末〜 ス マ ホ Client Server Back end iOS Android Front end
22. 10年代前半〜 SPA (Single Page Application) Client (ブ ラ ウ ザ ) Server Back end Backbone Ember Angular React Front end
23. Back, Back Forth and Forth Client Server Back end Front end Client Server Back end Front end Client Server Back end Front end
24. Agenda • What's Isomorphic？ • Client/Server Survival Guide • Meet the Pioneers • From Rendr • To React
25. Flatiron (Nodejitsu) • 2011/11/09 公開 • "Isomorphic"生みの 親 • 小さ なIsomorphicラ イ ブ ラ リ の 集合 – テ ン プ レ ー ト (Plates) – デ ー タ ア ク セ ス (Resourceful) • CouchDB Client – ル ー タ (Director) – バ リ デ ー タ (Revalidator) http://flatironjs.org/
26. Flatironの Isomorphic Client Back end Front end Client Server Back end Front end Isomorphic
27. Mojito (Yahoo) • 2012/04/01 公開 • YUI3ベ ー ス の MVWフ レ ー ム ワ ー ク – フ ロ ン ト エ ン ド を C/Sで Isomorphic • 課題 – 多様なデ バ イ ス 対応 https://developer.yahoo.com/cocktails/mojito/
28. 課題 Client Server (PHP) Back end Front end Client Server (PHP) Back end Front end JS有効 辛い … JS無効
29. Mojitoの Isomorphic Client Server (PHP) Back end Client Server (PHP) Back end Front end Server (JS) Front end JS有効 JS無効 Isomorphic！
30. Meteor • 2012/04/11 公開 • Real time & Reactiveなプ ラ ッ ト フ ォ ー ム • Minimongo – MongoDBラ イ ク なイ ン メ モ リ DB – バ ッ ク エ ン ド を C/Sで Isomorphic • サ ー バ サ イ ド レ ン ダ リ ン グ はPhantomJS – SEO対策 – フ ロ ン ト エ ン ド はIsomorphicで はない • Reactへ 変更す る Issueあ り https://www.meteor.com/
31. Meteorの Isomorphic MongoDB Client Server Back end Front end Back end Minimongo Client Front end Back end Minimongo Isomorphic！
32. Mojitoと Meteorの Isomorphic Client Server Frontend Back end Front end Client Server Backend Mojito Meteor
33. 真の Isomorphic？ Frontend on Client Frontend on Server Backend on Client Backend on Server Truly Isomorphic ？
34. こ れも Isomorphic？ Frontend Isomorphic? Backend
35. C/Sで 分断さ れない なら … Client Server (RDBMSの み) Front end C/Sシ ス テ ム Client Server ク ラ シ ッ ク なWeb Back end Front end Back end
36. こ れなら Isomorphic Frontend on Client Backend on Server Isomorphic
37. 課題重要 • Flatiron – 課題が 不明瞭 (利⽤者が 考え ろ ) • Mojito – JSの 有効・ 無効 – 課題が ニ ッ チ • Meteor – リ ア ル タ イ ム 、 リ ア ク テ ィ ブ – 人類に は早す ぎ
38. Agenda • What's Isomorphic？ • Client/Server Survival Guide • Meet the Pioneers • From Rendr • To React
39. Rendr (Airbnb) • 2013/04/10 公開 – Airbnbの モ バ イ ル サ イ ト 向け に 開発 • Backboneベ ー ス の フ レ ー ム ワ ー ク – フ ロ ン ト エ ン ド の Isomorphic • 課題 – SPAの 初期表示 – SPAの SEO https://github.com/rendrjs/rendr
40. SPAの 課題1－初期表示 Client Server 空の HTML JSの 実⾏開始 レ ン ダ リ ン グ GET /index.html GET /js/main.js GET /api/foo index.html main.js JSON 遅 延 ※2012〜13年頃の 話で す
41. SPAの 課題2－SEO Crawler Server 空の HTML GET /index.html index.html ク ロ ー ル 不可 ※2012〜13年頃の 話で す
42. サ ー バ サ イ ド レ ン ダ リ ン グ と SPA 優れた Web サ イ ト 初期レ ス ポ ン ス SEO サ ー バ サ イ ド レ ン ダ リ ン グ マ イ ク ロ イ ン タ ラ ク シ ョ ン シ ン グ ル ペ ー ジ ア プ リ ケ ー シ ョ ン http://rauchg.com/2014/7-principles-of-rich-web-applications/ 対⽴で はなく 両⽴す べ き ！
43. 対⽴ 優れた Web サ イ ト 初期レ ス ポ ン ス SEO サ ー バ サ イ ド レ ン ダ リ ン グ マ イ ク ロ イ ン タ ラ ク シ ョ ン シ ン グ ル ペ ー ジ ア プ リ ケ ー シ ョ ン Ruby on Rails JavaScript 異なる ⾔語・ 実装で は 無駄が 大き い
44. 解消 優れた Web サ イ ト 初期レ ス ポ ン ス SEO サ ー バ サ イ ド レ ン ダ リ ン グ マ イ ク ロ イ ン タ ラ ク シ ョ ン シ ン グ ル ペ ー ジ ア プ リ ケ ー シ ョ ン JavaScript JavaScript Isomorphic！
45. Rendr Client Server (RoR) Back end Server (JS) Front end 初回表示 Server (RoR) Back end そ の 後 Server (JS) Front end
46. 初期表示の 改善 Client Server HTML JSの 実⾏開始 レ ン ダ リ ン グ GET /index.html GET /js/main.js GET /api/bar index.html main.js JSON 遅 延 レ ン ダ リ ン グ 操作
47. SEOの 改善 Crawler Server HTML GET /index.html index.html ク ロ ー ル 可能 レ ン ダ リ ン グ
48. Browser DOM操作 イ ベ ン ト 'pushstate' Backboneの 基本要素 Router View Model Sync B r o w s e r B a c k e n d
49. Server GET /users/1 Backboneの Isomorphic化 Router Model Sync B r o w s e r B a c k e n d HTML View Controller Handlebars New!
50. 不⼀致 Client Backboneの Isomorphic化 (Client-side) View Model S e r v e r モ デ ル が 空 B r o w s e r HTML Handlebars
51. Server Backboneの Isomorphic化 (Server-side) View Model B r o w s e r Handlebars HTML JSON モ デ ル の 状態を シ リ ア ラ イ ズ し て HTMLに 埋め 込む Dehydrate 状態
52. 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 画面と モ デ ル の 内容が 一致 イ ベ ン ト ハ ン ド ラ 登録 状態
53. MVWの Isomorphic化 4大エ リ ア Rendering Routing Fetching Hydrating
54. 何サ ー バ ？ Client Server (any) Back end Server (JS) Front end Front end こ れ フ ロ ン ト エ ン ド サ ー バ 不評
55. 何サ ー バ ？ Client Server (any) Back end Server (JS) Front end Front end レ ン ダ リ ン グ サ ー バ バ ッ ク エ ン ド (の ) フ ロ ン ト エ ン ド
56. 何サ ー バ ？ Client Server (any) Back end Server (JS) Front end Front end レ ン ダ リ ン グ サ ー バ バ ッ ク エ ン ド (の ) フ ロ ン ト エ ン ド プ ロ キ シ サ ー バ オ ー ケ ス ト レ ー シ ョ ン サ ー バ ？ ！？
57. レ ン ダ リ ン グ サ ー バ ？ Client Server (any) Back end Server (JS) Front end Front end レ ン ダ リ ン グ の み ク ラ イ ア ン ト が 直接バ ッ ク エ ン ド に ア ク セ ス す る なら … こ れはRendr で はあ り ま せ ん
58. Rendrの 場合 Client Server (any) Back end Server (JS) Front end Front end Proxy ク ラ イ ア ン ト は バ ッ ク エ ン ド に 直接ア ク セ ス し ない ！ レ ン ダ リ ン グ だ け じ ゃ ない ！ Proxyの た め の Expressミ ド ル ウ ェ ア を 提供
59. フ ロ ン ト エ ン ド で セ ッ シ ョ ン 管理 Client Server (any) Back end Server (JS) Front end Front end Proxy HTTP Session ス テ ー ト レ ス ！
60. ldjson csv APIの 変換 Client Server (any) Back end Server (JS) Front end Front end Gate- way External Systems ldjson CSV デ ー タ 形式を 変換 file upload
61. 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
62. Rendr的なIsomorphicの 可能性 Client Server (any) Back end Server (JS) Front end Front end ス テ ー ト レ ス 疎結合 セ ッ シ ョ ン 管理 API Gateway/ Orchestration Microservices
63. タ イ ミ ン グ 重要 Rendr公開
64. Agenda • What's Isomorphic？ • Client/Server Survival Guide • Meet the Pioneers • From Rendr • To React
65. React (Facebook) • ビ ュ ー に 特化し た ラ イ ブ ラ リ • Virtual DOM – Isomorphic！ https://facebook.github.io/react/
66. Virtual DOM <div> <ul> <li>...</li> <li>...</li> </ul> ... </div> Client Server Application DOM Text Virtual DOM
67. Flux • Facebookに よ る MVWなア ー キ テ ク チ ャ – 公式な実装は一部品(Dispatcher)の み • オ レ オ レ 実装乱⽴ https://facebook.github.io/flux/
68. 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
69. MVWの Isomorphic化 4大エ リ ア Rendering Routing Fetching Hydrating Reactが 対応済み
70. Fluxの Isomorphic化 4大エ リ ア Singleton free Routing Fetching Hydrating New!
71. 脱シ ン グ ル ト ン • Facebookの Fluxサ ン プ ル ・ ド キ ュ メ ン ト – Store・ Dispatcherはシ ン グ ル ト ン • ク ラ イ ア ン ト で はOK • サ ー バ で はNG – リ ク エ ス ト 毎に 異なる ユ ー ザ • Flux実装の 多く はコ ン テ キ ス ト を 導入 – コ ン テ キ ス ト 内で はStore・ Dispatcherは シ ン グ ル ト ン
72. Client Server Context 脱シ ン グ ル ト ン Dispatcher Context Dispatcher XxxStore XxxStore XxxStore Context Dispatcher XxxStore XxxStore XxxStore Context Dispatcher Req1 Req2 Req3 XxxStore XxxStore
73. Fluxの Isomorphic化 4大エ リ ア Singleton free Routing Fetching Hydrating
74. Isomorphicなラ イ ブ ラ リ • Routing – React Router • https://github.com/rackt/react-router – Flatiron Director • https://github.com/flatiron/director • Fetching – Super Agent • https://github.com/visionmedia/superagent – Isomorphic Fetch • https://github.com/matthew-andrews/isomorphic-fetch
75. Fluxの Isomorphic化 4大エ リ ア Singleton free Routing Fetching Hydrating
76. Flummox • シ ン プ ル なFlux実装 • Hydratingサ ポ ー ト – Serialize/Deserialize • Isomorphicサ ン プ ル – https://github.com/acdlite/flummox-isomorphic- demo – Routing • Flux Router – Fetching • Super Agent http://acdlite.github.io/flummox/
77. IsomorphicなFetcher Client Server (any) Back end Server (JS) Fetcher Fetcher ク ラ イ ア ン ト は バ ッ ク エ ン ド に 直接ア ク セ ス 同じ Fetcherを 同じ 設定で 使う と
78. Fluxible (Yahoo) • Isomorphic & PluggableなFlux実装 • Hydratingサ ポ ー ト • ⽐較的重量級 – ボ イ ラ ー プ レ ー ト 削減に は関心薄そ う • 絶賛開発中 – Yahoo内部で も ま だ 本格的に 使っ て ない http://fluxible.io/
79. React Router Pluggable Fluxible Fluxible Router Fetchr Plugin for Fluxible Routr Fetchr
80. 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
81. 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
82. 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
83. 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
84. Fluxibleの Service Rendr的な構成 Serviceか ら バ ッ ク エ ン ド APIを 呼び 出す Client Server (any) Back end Server (JS) Front end Front end Service Fetchr Back end
85. Fluxibleの Service Client Server (JS) Back end Front end Front end Service Fetchr Serviceに ロ ジ ッ ク ／デ ー タ ア ク セ ス を 実装 シ ン プ ル な構成
86. 乗る し か ない こ の ビ ッ グ ウ ェ ー ブ に ト レ ン ド 重要
87. ま と め • フ ロ ン ト エ ン ド ／バ ッ ク エ ン ド は C/S間を ⾏っ た り 来た り – フ ロ ン ト エ ン ド はク ラ イ ア ン ト に 限ら ない – バ ッ ク エ ン ド はサ ー バ に 限ら ない • フ ロ ン ト エ ン ド ／バ ッ ク エ ン ド を C/S両方で 動か し て ブ レ ー ク ス ル ー – 単なる コ ー ド の 共通化で はない • フ ロ ン ト エ ン ド の Isomorphic – 単なる サ ー バ サ イ ド レ ン ダ リ ン グ じ ゃ ない – マ イ ク ロ サ ー ビ ス と の 融合 • Reactの 波に 乗れ！
89. ご 清聴 あ り が と う ご ざ い ま し た