React & Go Single Page Apps

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

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

Gunosy Platformの紹介

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

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

Server/API Client アプリケーションはこれらで開発 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: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をレンダリングする

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

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

まとめ

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

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

ちなみに…

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

最後に…

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

React & Go Single Page Apps

React & Go Single Page Apps

Tsuyoshi Higuchi PRO

More Decks by Tsuyoshi Higuchi

Other Decks in Programming

Featured

Transcript