Isomorphic Survival Guide

Isomorphic Survival Guide

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

6b516c58f43b491fc6441d19acfe4386?s=128

Koichi Kobayashi

April 30, 2015
Tweet

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の 波に 乗れ!
  88. None
  89. ご 清聴 あ り が と う ご ざ い

    ま し た