React & Go Single Page Apps

Transcript

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

   2015

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

   From Gunosy.inc

3. Gunosy Platformの紹介

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

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

   Goの チャットアプリケーション

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

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

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

9. なぜReactだったのか

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

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

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

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

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

15. None

16. 結果、こうなった

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

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をレンダリングする

19. Javascript:React var Component = React.createClass({ getInitialState : function(){ var data

    = window.PRELOAD_DATA.hoge; return { hogeTitle : data.title, hogeDescription : data.description } }; }); Goがレンダリングしたjsonを受け取る

20. WebAPI PRELOAD DATA ServerSideRender View Get JSON Action Dispatcher Store

    View Intaraction Action Ajax InfiniteScrollͳͲ௥ՃͰσʔλΛऔಘ͢Δࡍ͸Action͔ΒAjaxͰऔಘ … Golang … React.js … Flux

21. まとめ

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

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

24. ちなみに…

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

26. 最後に…

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