React & Go Single Page Apps

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

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