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 full-size slide

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

    View full-size slide

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

    View full-size slide

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



    +
    +
    +

    View full-size slide

  5. X + morphic
    同 一
    isomorphic


    metamorphic polymorphic

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Frontend + Backend?
    Frontend
    JavaScript
    Your
    Application
    Backend
    JavaScript
    Isomorphic?

    View full-size slide

  11. 2 x 2?
    Frontend Backend
    Client
    Server

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Front
    end
    PHP
    Python
    Ruby

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. こ れも Isomorphic?
    Frontend Isomorphic? Backend

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    レ ン ダ リ ン グ
    操作

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. Virtual DOM


    ...
    ...

    ...

    Client Server
    Application
    DOM Text
    Virtual DOM

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide