なぜかUIデザイナーが語る、React.jsとGo言語を使ったGunosyのSPA例。
React & GoSingle Page AppsReact.jsとGo言語を使ったGunosyのSPA例Copyright Tsuyoshi Higuchi 2015
View Slide
PROFILEUI Designer, Front-End Engineer, UX ArchitectTsuyoshi Higuchi @tyshgcFrom Gunosy.inc
Gunosy Platformの紹介
Gunosyでは、基幹となるiOS/Androidアプリ上にWebViewを設けて、その中で動作・提供されるマイクロサービスをPlatformコンテンツと呼んでいます。
旅行検索コンテンツやオペレーターとのチャットを使ったプランの相談などのサービス。そのほかに、今年中にいくつかのアプリケーションを提供開始する予定で開発中です。WebSocket + React + Goのチャットアプリケーション
Server/APIClientアプリケーションはこれらで開発React.js Go言語
なぜGo言語だったのか
•社内のシステムが既にほぼGo言語になっていた•Go言語はAPI設計を行う上で非常に実装が行いやすい•シンプルに設計ができる•並列処理により処理速度が速い社内のシステムの多くがGo言語を採用
なぜReactだったのか
•Component設計を行う上で非常に実装が行いやすい•一方向のデータフローはGUIの流用が行いやすい•シンプルに設計ができる•学習コストが低いのですぐに開発に参加できるぶっちゃけ使ってみたかった感
連携して見えた懸念点
APIとJavascriptによるレンダリングは初期表示に弱い
パフォーマンスを考えるとサーバサイドによるレンダリングが必要
しかし、Go言語の標準テンプレートエンジンはつかいにくい
結果、こうなった
標準テンプレートエンジンを使って、windowオブジェクトにPRELOAD_DATAを置くようにしたReact.jsのgetInitialStateでstateに、window.PRELOAD_DATAを渡した生DOMをマークアップすることなく、JSX以外のDOMを触れずに実装できた
Html:jadedoctype htmlhtmlheadmeta(charset="utf-8")link(type="text/css", rel="stylesheet", media="all", href="/view.css")script.window.PRELOAD_DATA = {{.PreloadData}} ;titleblock html_title| #{page.siteName}body(role="document")#content.wrapscript(type="text/javascript", src="/client.js")Goがjsonをレンダリングする
Javascript:Reactvar Component = React.createClass({getInitialState : function(){var data = window.PRELOAD_DATA.hoge;return {hogeTitle : data.title,hogeDescription : data.description}};});Goがレンダリングしたjsonを受け取る
WebAPIPRELOADDATAServerSideRenderViewGet JSONAction DispatcherStoreViewIntaractionActionAjaxInfiniteScrollͳͲՃͰσʔλΛऔಘ͢ΔࡍAction͔ΒAjaxͰऔಘ… Golang… React.js… Flux
まとめ
WebViewアプリケーションで、SEOを考えなくても良いのでIsomorphicである必要はなかったReact.js自体のファイルサイズの問題はあるが、大きなサービスでないのでそれほどパフォーマンスは損なわなかったレンダリングのタイミングを気をつければ、非同期時のパフォーマンスも決して悪くない
React-Routerを採用してpushStateを行っているのでサーバサイド側の再描画は必要ないチームメンバーがJavascriptを書けることもネックになるが、React(JSX)の学習コストは低いので問題なしGunosyPlatformは対応範囲がiOS 7以上, Android4以上なので気になるバグはなかった。
ちなみに…
Go言語 + React.jsでIsomorphicを実現している例があった。https://github.com/olebedev/go-react-examplego-duktapeを使ってJavascriptをバインディングしているようだ
最後に…
株式会社グノシーではフロントエンドエンジニアを絶賛募集中です!