Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Isomorphic Survival Guide

Isomorphic Survival Guide

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

Koichi Kobayashi

April 30, 2015
Tweet

Other Decks in Programming

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