Isomorphic Survival Guide

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. ご 清聴 あ り が と う ご ざ い

    ま し た