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

React & Go Single Page Apps

React & Go Single Page Apps

なぜかUIデザイナーが語る、React.jsとGo言語を使ったGunosyのSPA例。

Tsuyoshi Higuchi
PRO

May 27, 2015
Tweet

More Decks by Tsuyoshi Higuchi

Other Decks in Programming

Transcript

  1. React & Go
    Single Page Apps
    React.jsとGo言語を使ったGunosyのSPA例
    Copyright Tsuyoshi Higuchi 2015

    View Slide

  2. PROFILE
    UI Designer, Front-End Engineer, UX Architect
    Tsuyoshi Higuchi @tyshgc
    From Gunosy.inc

    View Slide

  3. Gunosy Platformの紹介

    View Slide

  4. Gunosyでは、基幹となるiOS/Androidアプリ上
    にWebViewを設けて、
    その中で動作・提供されるマイクロサービスを
    Platformコンテンツと呼んでいます。

    View Slide

  5. 旅行検索コンテンツやオペレーター
    とのチャットを使ったプランの相談
    などのサービス。
    そのほかに、今年中にいくつかの
    アプリケーションを提供開始する
    予定で開発中です。
    WebSocket + React + Goの
    チャットアプリケーション

    View Slide

  6. Server/API
    Client
    アプリケーションはこれらで開発
    React.js Go言語

    View Slide

  7. なぜGo言語だったのか

    View Slide

  8. •社内のシステムが既にほぼGo言語になっていた
    •Go言語はAPI設計を行う上で非常に実装が行いやすい
    •シンプルに設計ができる
    •並列処理により処理速度が速い
    社内のシステムの多くがGo言語を採用

    View Slide

  9. なぜReactだったのか

    View Slide

  10. •Component設計を行う上で非常に実装が行いやすい
    •一方向のデータフローはGUIの流用が行いやすい
    •シンプルに設計ができる
    •学習コストが低いのですぐに開発に参加できる
    ぶっちゃけ使ってみたかった感

    View Slide

  11. 連携して見えた懸念点

    View Slide

  12. APIとJavascriptによるレンダリングは
    初期表示に弱い

    View Slide

  13. パフォーマンスを考えるとサーバサイド
    によるレンダリングが必要

    View Slide

  14. しかし、Go言語の
    標準テンプレートエンジンは
    つかいにくい

    View Slide

  15. View Slide

  16. 結果、こうなった

    View Slide

  17. 標準テンプレートエンジンを使って、
    windowオブジェクトにPRELOAD_DATAを置くようにした
    React.jsのgetInitialStateでstateに、
    window.PRELOAD_DATAを渡した
    生DOMをマークアップすることなく、JSX以外のDOMを
    触れずに実装できた

    View Slide

  18. Html:jade
    doctype html
    html
    head
    meta(charset="utf-8")
    link(type="text/css", rel="stylesheet", media="all", href="/view.css")
    script.
    window.PRELOAD_DATA = {{.PreloadData}} ;
    title
    block html_title
    | #{page.siteName}
    body(role="document")
    #content.wrap
    script(type="text/javascript", src="/client.js")
    Goがjsonをレンダリングする

    View Slide

  19. Javascript:React
    var Component = React.createClass({
    getInitialState : function(){
    var data = window.PRELOAD_DATA.hoge;
    return {
    hogeTitle : data.title,
    hogeDescription : data.description
    }
    };
    });
    Goがレンダリングしたjsonを受け取る

    View Slide

  20. WebAPI
    PRELOAD
    DATA
    ServerSideRender
    View
    Get JSON
    Action Dispatcher
    Store
    View
    Intaraction
    Action
    Ajax
    InfiniteScrollͳͲ௥ՃͰσʔλΛऔಘ͢Δࡍ͸Action͔ΒAjaxͰऔಘ
    … Golang
    … React.js
    … Flux

    View Slide

  21. まとめ

    View Slide

  22. WebViewアプリケーションで、SEOを考えなくても
    良いのでIsomorphicである必要はなかった
    React.js自体のファイルサイズの問題はあるが、
    大きなサービスでないのでそれほどパフォーマンス
    は損なわなかった
    レンダリングのタイミングを気をつければ、
    非同期時のパフォーマンスも決して悪くない

    View Slide

  23. React-Routerを採用してpushStateを行っているの
    でサーバサイド側の再描画は必要ない
    チームメンバーがJavascriptを書けることもネック
    になるが、React(JSX)の学習コストは低いので
    問題なし
    GunosyPlatformは対応範囲がiOS 7以上, Android
    4以上なので気になるバグはなかった。

    View Slide

  24. ちなみに…

    View Slide

  25. Go言語 + React.jsでIsomorphicを
    実現している例があった。
    https://github.com/olebedev/go-react-example
    go-duktapeを使ってJavascriptをバインディングしているようだ

    View Slide

  26. 最後に…

    View Slide

  27. 株式会社グノシーでは
    フロントエンドエンジニアを
    絶賛募集中です!

    View Slide