Isomorphic Survival Guide

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

Transcript

1. Isomorphic Survival Guide
   @koichik
   

   View Slide

2. 話さ ない こ と
   • Isomorphicなコ ー デ ィ ン グ ／テ ス ト
   • Isomorphicなビ ル ド ／ト ラ ン ス パ イ ル
   • Isomorphicなモ ジ ュ ー ル ／パ ッ ケ ー ジ ン グ
   • Isomorphicなネ イ テ ィ ブ ア プ リ
   

   View Slide

3. Agenda
   • What's Isomorphic？
   • Client/Server Survival Guide
   • Meet the Pioneers
   • from Rendr
   • to React
   

   View Slide

4. 語源
   ἴσος
   (isos)
   μορφή
   (morphe)
   equal form, shape
   同 形
   希
   英
   日
   +
   +
   +
   

   View Slide

5. X ＋ morphic
   同 一
   isomorphic
   多
   変
   metamorphic polymorphic
   

   View Slide

6. http://nodejs.connpass.com/event/13363/
   

   View Slide

7. Client ＋ Server
   Client
   JavaScript
   JavaScript
   Server
   Your
   Application API
   

   View Slide

8. Client ＋ Server
   Client
   JavaScript
   JavaScript
   Server
   Your
   Application
   Backend
   API
   

   View Slide

9. http://nodejs.connpass.com/event/13363/
   

   View Slide

10. Frontend ＋ Backend？
    Frontend
    JavaScript
    Your
    Application
    Backend
    JavaScript
    Isomorphic？
    

    View Slide

11. 2 x 2？
    Frontend Backend
    Client
    Server
    

    View Slide

12. ア プ リ ケ ー シ ョ ン の 論理的なレ イ ヤ
    本資料で の 定義
    人間向け に
    情報を 出し 入れ
    ス ト レ ー ジ 向け に
    情報を 出し 入れ
    ネ ッ ト ワ ー ク の
    こ ち ら (人間)側
    ネ ッ ト ワ ー ク の
    あ ち ら 側
    Client Server
    Frontend Backend
    Network
    コ ン ピ ュ ー タ の 物理的な位置
    

    View Slide

13. Agenda
    • What's Isomorphic？
    • Client/Server Survival Guide
    • Meet the Pioneers
    • From Rendr
    • To React
    

    View Slide

14. 60年代〜 メ イ ン フ レ ー ム の 時代
    Client
    (ダ ム 端末)
    Server
    (Host)
    Front
    end
    Back
    end
    (表示の み)
    IBM S/360〜390, z Systems
    富⼠通・ ⽇⽴ Mシ リ ー ズ
    NEC ACOS
    BUNCH
    IBM 3270, 5250
    (DEC VT100)
    

    View Slide

15. 90年頃〜 C/Sシ ス テ ム
    Client
    (Windows)
    Server
    Unix
    WindowsNT
    Oracle
    SQL-Server
    Front
    end
    Back
    end
    (RDBMSの み)
    Visual Basic
    Delphi
    

    View Slide

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
    

    View Slide

17. 90年代半ば〜 World Wide Web
    Client
    (ブ ラ ウ ザ )
    Server
    Front
    end
    Back
    end
    (表示の み)
    Perl (CGI)
    Java (Servlet/JSP)
    Netscape Navigator
    Internet Explorer
    

    View Slide

18. 00年頃〜 J2EE (Java2 Enterprise Edition)
    Client
    (ブ ラ ウ ザ )
    Server
    Back
    end
    (表示の み)
    Servlet + JSP
    Server
    Front
    end
    EJB
    RMI over IIOP
    

    View Slide

19. 00年代前半〜 Ajax
    Client
    (ブ ラ ウ ザ )
    Server
    Front
    end
    Back
    end
    JavaScript
    Dojo
    Prototype
    YUI
    jQuery
    …
    Front
    end
    PHP
    Python
    Ruby
    …
    

    View Slide

20. 00年代半は〜 RIA (Rich Internet Application)
    Client
    (ブ ラ ウ ザ +プ ラ グ イ ン )
    Server
    Back
    end
    Flash/Flex
    Silverlight
    Curl
    Front
    end
    

    View Slide

21. 00年代末〜 ス マ ホ
    Client Server
    Back
    end
    iOS
    Android
    Front
    end
    

    View Slide

22. 10年代前半〜 SPA (Single Page Application)
    Client
    (ブ ラ ウ ザ )
    Server
    Back
    end
    Backbone
    Ember
    Angular
    React
    Front
    end
    

    View Slide

23. Back, Back Forth and Forth
    Client Server
    Back
    end
    Front
    end
    Client Server
    Back
    end
    Front
    end
    Client Server
    Back
    end
    Front
    end
    

    View Slide

24. Agenda
    • What's Isomorphic？
    • Client/Server Survival Guide
    • Meet the Pioneers
    • From Rendr
    • To React
    

    View Slide

25. Flatiron (Nodejitsu)
    • 2011/11/09 公開
    • "Isomorphic"生みの 親
    • 小さ なIsomorphicラ イ ブ ラ リ の 集合
    – テ ン プ レ ー ト (Plates)
    – デ ー タ ア ク セ ス (Resourceful)
    • CouchDB Client
    – ル ー タ (Director)
    – バ リ デ ー タ (Revalidator)
    http://flatironjs.org/
    

    View Slide

26. Flatironの Isomorphic
    Client
    Back
    end
    Front
    end
    Client Server
    Back
    end
    Front
    end
    Isomorphic
    

    View Slide

27. Mojito (Yahoo)
    • 2012/04/01 公開
    • YUI3ベ ー ス の MVWフ レ ー ム ワ ー ク
    – フ ロ ン ト エ ン ド を C/Sで Isomorphic
    • 課題
    – 多様なデ バ イ ス 対応
    https://developer.yahoo.com/cocktails/mojito/
    

    View Slide

28. 課題
    Client Server (PHP)
    Back
    end
    Front
    end
    Client Server (PHP)
    Back
    end
    Front
    end
    JS有効
    辛い …
    JS無効
    

    View Slide

29. Mojitoの Isomorphic
    Client Server (PHP)
    Back
    end
    Client Server (PHP)
    Back
    end
    Front
    end
    Server (JS)
    Front
    end
    JS有効
    JS無効
    Isomorphic！
    

    View Slide

30. Meteor
    • 2012/04/11 公開
    • Real time & Reactiveなプ ラ ッ ト フ ォ ー ム
    • Minimongo
    – MongoDBラ イ ク なイ ン メ モ リ DB
    – バ ッ ク エ ン ド を C/Sで Isomorphic
    • サ ー バ サ イ ド レ ン ダ リ ン グ はPhantomJS
    – SEO対策
    – フ ロ ン ト エ ン ド はIsomorphicで はない
    • Reactへ 変更す る Issueあ り
    https://www.meteor.com/
    

    View Slide

31. Meteorの Isomorphic
    MongoDB
    Client
    Server
    Back
    end
    Front
    end
    Back
    end
    Minimongo
    Client
    Front
    end
    Back
    end
    Minimongo
    Isomorphic！
    

    View Slide

32. Mojitoと Meteorの Isomorphic
    Client
    Server
    Frontend
    Back
    end
    Front
    end
    Client
    Server
    Backend
    Mojito Meteor
    

    View Slide

33. 真の Isomorphic？
    Frontend
    on Client
    Frontend
    on Server
    Backend
    on Client
    Backend
    on Server
    Truly
    Isomorphic
    ？
    

    View Slide

34. こ れも Isomorphic？
    Frontend Isomorphic? Backend
    

    View Slide

35. C/Sで 分断さ れない なら …
    Client Server
    (RDBMSの み)
    Front
    end
    C/Sシ ス テ ム
    Client Server
    ク ラ シ ッ ク なWeb
    Back
    end
    Front
    end
    Back
    end
    

    View Slide

36. こ れなら Isomorphic
    Frontend
    on Client
    Backend
    on Server
    Isomorphic
    

    View Slide

37. 課題重要
    • Flatiron
    – 課題が 不明瞭 (利⽤者が 考え ろ )
    • Mojito
    – JSの 有効・ 無効
    – 課題が ニ ッ チ
    • Meteor
    – リ ア ル タ イ ム 、 リ ア ク テ ィ ブ
    – 人類に は早す ぎ
    

    View Slide

38. Agenda
    • What's Isomorphic？
    • Client/Server Survival Guide
    • Meet the Pioneers
    • From Rendr
    • To React
    

    View Slide

39. Rendr (Airbnb)
    • 2013/04/10 公開
    – Airbnbの モ バ イ ル サ イ ト 向け に 開発
    • Backboneベ ー ス の フ レ ー ム ワ ー ク
    – フ ロ ン ト エ ン ド の Isomorphic
    • 課題
    – SPAの 初期表示
    – SPAの SEO
    https://github.com/rendrjs/rendr
    

    View Slide

40. SPAの 課題1－初期表示
    Client Server
    空の HTML
    JSの
    実⾏開始
    レ ン ダ リ ン グ
    GET /index.html
    GET /js/main.js
    GET /api/foo
    index.html
    main.js
    JSON
    遅
    延
    ※2012〜13年頃の 話で す
    

    View Slide

41. SPAの 課題2－SEO
    Crawler Server
    空の HTML
    GET /index.html
    index.html
    ク ロ ー ル
    不可
    ※2012〜13年頃の 話で す
    

    View Slide

42. サ ー バ サ イ ド レ ン ダ リ ン グ と SPA
    優れた
    Web
    サ イ ト
    初期レ ス ポ ン ス
    SEO
    サ ー バ サ イ ド
    レ ン ダ リ ン グ
    マ イ ク ロ
    イ ン タ ラ ク シ ョ ン
    シ ン グ ル ペ ー ジ
    ア プ リ ケ ー シ ョ ン
    http://rauchg.com/2014/7-principles-of-rich-web-applications/
    対⽴で はなく
    両⽴す べ き ！
    

    View Slide

43. 対⽴
    優れた
    Web
    サ イ ト
    初期レ ス ポ ン ス
    SEO
    サ ー バ サ イ ド
    レ ン ダ リ ン グ
    マ イ ク ロ
    イ ン タ ラ ク シ ョ ン
    シ ン グ ル ペ ー ジ
    ア プ リ ケ ー シ ョ ン
    Ruby on
    Rails
    JavaScript
    異なる ⾔語・ 実装で は
    無駄が 大き い
    

    View Slide

44. 解消
    優れた
    Web
    サ イ ト
    初期レ ス ポ ン ス
    SEO
    サ ー バ サ イ ド
    レ ン ダ リ ン グ
    マ イ ク ロ
    イ ン タ ラ ク シ ョ ン
    シ ン グ ル ペ ー ジ
    ア プ リ ケ ー シ ョ ン
    JavaScript
    JavaScript
    Isomorphic！
    

    View Slide

45. Rendr
    Client Server (RoR)
    Back
    end
    Server (JS)
    Front
    end
    初回表示
    Server (RoR)
    Back
    end
    そ の 後
    Server (JS)
    Front
    end
    

    View Slide

46. 初期表示の 改善
    Client Server
    HTML
    JSの
    実⾏開始
    レ ン ダ リ ン グ
    GET /index.html
    GET /js/main.js
    GET /api/bar
    index.html
    main.js
    JSON
    遅
    延
    レ ン ダ リ ン グ
    操作
    

    View Slide

47. SEOの 改善
    Crawler Server
    HTML
    GET /index.html
    index.html
    ク ロ ー ル
    可能
    レ ン ダ リ ン グ
    

    View Slide

48. Browser
    DOM操作
    イ ベ ン ト
    'pushstate'
    Backboneの 基本要素
    Router
    View Model Sync
    B
    r
    o
    w
    s
    e
    r
    B
    a
    c
    k
    e
    n
    d
    

    View Slide

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!
    

    View Slide

50. 不⼀致
    Client
    Backboneの Isomorphic化 (Client-side)
    View Model
    S
    e
    r
    v
    e
    r
    モ デ ル が 空
    B
    r
    o
    w
    s
    e
    r
    HTML
    Handlebars
    

    View Slide

51. Server
    Backboneの Isomorphic化 (Server-side)
    View Model
    B
    r
    o
    w
    s
    e
    r
    Handlebars
    HTML
    JSON
    モ デ ル の 状態を
    シ リ ア ラ イ ズ し て
    HTMLに 埋め 込む Dehydrate
    状態
    

    View Slide

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
    画面と モ デ ル の
    内容が 一致
    イ ベ ン ト
    ハ ン ド ラ
    登録
    状態
    

    View Slide

53. MVWの Isomorphic化 4大エ リ ア
    Rendering
    Routing Fetching
    Hydrating
    

    View Slide

54. 何サ ー バ ？
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    こ れ
    フ ロ ン ト エ ン ド
    サ ー バ
    不評
    

    View Slide

55. 何サ ー バ ？
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    レ ン ダ リ ン グ
    サ ー バ
    バ ッ ク エ ン ド (の )
    フ ロ ン ト エ ン ド
    

    View Slide

56. 何サ ー バ ？
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    レ ン ダ リ ン グ
    サ ー バ
    バ ッ ク エ ン ド (の )
    フ ロ ン ト エ ン ド
    プ ロ キ シ
    サ ー バ
    オ ー ケ ス ト レ ー シ ョ ン
    サ ー バ
    ？ ！？
    

    View Slide

57. レ ン ダ リ ン グ サ ー バ ？
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    レ ン ダ リ ン グ の み
    ク ラ イ ア ン ト が
    直接バ ッ ク エ ン ド に
    ア ク セ ス す る なら …
    こ れはRendr
    で はあ り ま せ ん
    

    View Slide

58. Rendrの 場合
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    Proxy
    ク ラ イ ア ン ト は
    バ ッ ク エ ン ド に
    直接ア ク セ ス し ない ！
    レ ン ダ リ ン グ だ け じ ゃ ない ！
    Proxyの た め の
    Expressミ ド ル ウ ェ ア を
    提供
    

    View Slide

59. フ ロ ン ト エ ン ド で セ ッ シ ョ ン 管理
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    Proxy
    HTTP
    Session
    ス テ ー ト レ ス ！
    

    View Slide

60. ldjson
    csv
    APIの 変換
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    Gate-
    way
    External
    Systems
    ldjson
    CSV
    デ ー タ 形式を 変換
    file
    upload
    

    View Slide

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
    

    View Slide

62. Rendr的なIsomorphicの 可能性
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    ス テ ー ト レ ス
    疎結合
    セ ッ シ ョ ン
    管理
    API Gateway/
    Orchestration
    Microservices
    

    View Slide

63. タ イ ミ ン グ 重要
    Rendr公開
    

    View Slide

64. Agenda
    • What's Isomorphic？
    • Client/Server Survival Guide
    • Meet the Pioneers
    • From Rendr
    • To React
    

    View Slide

65. React (Facebook)
    • ビ ュ ー に 特化し た ラ イ ブ ラ リ
    • Virtual DOM
    – Isomorphic！
    https://facebook.github.io/react/
    

    View Slide

66. Virtual DOM
    
    
    ...
    ...
    
    ...
    
    Client Server
    Application
    DOM Text
    Virtual DOM
    

    View Slide

67. Flux
    • Facebookに よ る MVWなア ー キ テ ク チ ャ
    – 公式な実装は一部品(Dispatcher)の み
    • オ レ オ レ 実装乱⽴
    https://facebook.github.io/flux/
    

    View Slide

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
    

    View Slide

69. MVWの Isomorphic化 4大エ リ ア
    Rendering
    Routing Fetching
    Hydrating
    Reactが 対応済み
    

    View Slide

70. Fluxの Isomorphic化 4大エ リ ア
    Singleton
    free
    Routing Fetching
    Hydrating
    New!
    

    View Slide

71. 脱シ ン グ ル ト ン
    • Facebookの Fluxサ ン プ ル ・ ド キ ュ メ ン ト
    – Store・ Dispatcherはシ ン グ ル ト ン
    • ク ラ イ ア ン ト で はOK
    • サ ー バ で はNG
    – リ ク エ ス ト 毎に 異なる ユ ー ザ
    • Flux実装の 多く はコ ン テ キ ス ト を 導入
    – コ ン テ キ ス ト 内で はStore・ Dispatcherは
    シ ン グ ル ト ン
    

    View Slide

72. Client Server
    Context
    脱シ ン グ ル ト ン
    Dispatcher
    Context
    Dispatcher
    XxxStore
    XxxStore
    XxxStore
    Context
    Dispatcher
    XxxStore
    XxxStore
    XxxStore
    Context
    Dispatcher
    Req1
    Req2
    Req3
    XxxStore
    XxxStore
    

    View Slide

73. Fluxの Isomorphic化 4大エ リ ア
    Singleton
    free
    Routing Fetching
    Hydrating
    

    View Slide

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
    

    View Slide

75. Fluxの Isomorphic化 4大エ リ ア
    Singleton
    free
    Routing Fetching
    Hydrating
    

    View Slide

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/
    

    View Slide

77. IsomorphicなFetcher
    Client Server (any)
    Back
    end
    Server (JS)
    Fetcher
    Fetcher
    ク ラ イ ア ン ト は
    バ ッ ク エ ン ド に
    直接ア ク セ ス
    同じ Fetcherを
    同じ 設定で 使う と
    

    View Slide

78. Fluxible (Yahoo)
    • Isomorphic & PluggableなFlux実装
    • Hydratingサ ポ ー ト
    • ⽐較的重量級
    – ボ イ ラ ー プ レ ー ト 削減に は関心薄そ う
    • 絶賛開発中
    – Yahoo内部で も ま だ 本格的に 使っ て ない
    http://fluxible.io/
    

    View Slide

79. React Router
    Pluggable
    Fluxible
    Fluxible Router Fetchr Plugin
    for Fluxible
    Routr Fetchr
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

84. Fluxibleの Service
    Rendr的な構成
    Serviceか ら バ ッ ク エ ン ド APIを 呼び 出す
    Client Server (any)
    Back
    end
    Server (JS)
    Front
    end
    Front
    end
    Service
    Fetchr
    Back
    end
    

    View Slide

85. Fluxibleの Service
    Client Server (JS)
    Back
    end
    Front
    end
    Front
    end
    Service
    Fetchr
    Serviceに ロ ジ ッ ク ／デ ー タ ア ク セ ス を 実装
    シ ン プ ル な構成
    

    View Slide

86. 乗る し か ない
    こ の ビ ッ グ ウ ェ ー ブ に
    ト レ ン ド 重要
    

    View Slide

87. ま と め
    • フ ロ ン ト エ ン ド ／バ ッ ク エ ン ド は
    C/S間を ⾏っ た り 来た り
    – フ ロ ン ト エ ン ド はク ラ イ ア ン ト に 限ら ない
    – バ ッ ク エ ン ド はサ ー バ に 限ら ない
    • フ ロ ン ト エ ン ド ／バ ッ ク エ ン ド を
    C/S両方で 動か し て ブ レ ー ク ス ル ー
    – 単なる コ ー ド の 共通化で はない
    • フ ロ ン ト エ ン ド の Isomorphic
    – 単なる サ ー バ サ イ ド レ ン ダ リ ン グ じ ゃ ない
    – マ イ ク ロ サ ー ビ ス と の 融合
    • Reactの 波に 乗れ！
    

    View Slide

88. View Slide

89. ご 清聴
    あ り が と う ご ざ い ま し た
    

    View Slide