Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React & Go Single Page Apps
Search
Tsuyoshi Higuchi
PRO
May 27, 2015
Programming
20
5.7k
React & Go Single Page Apps
なぜかUIデザイナーが語る、React.jsとGo言語を使ったGunosyのSPA例。
Tsuyoshi Higuchi
PRO
May 27, 2015
Tweet
Share
More Decks by Tsuyoshi Higuchi
See All by Tsuyoshi Higuchi
2024 Profile Slide - for フロントエンドのモデル駆動設計
tyshgc
PRO
0
150
開発現場でのサービスデザインとモデリング
tyshgc
PRO
7
3.1k
React Nativeで 位置情報アプリをつくった話
tyshgc
PRO
10
5.4k
Design For User #2 コンポーネント指向から考えるUIと設計・趣旨説明スライド / Design For User #2 Openning Slide
tyshgc
PRO
1
1.3k
メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design
tyshgc
PRO
11
5.4k
Designer meets Domain-Driven-Design
tyshgc
PRO
28
2.8k
ReactとLoopbackことはじめ / React.js meets Loopback
tyshgc
PRO
11
3.8k
UCDとDDD - ユースケースからユーザー中心について考える
tyshgc
PRO
21
4.1k
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
tyshgc
PRO
46
12k
Other Decks in Programming
See All in Programming
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
110
Develop Faster With FrankenPHP
dunglas
2
3k
技術選定を未来に繋いで活用していく
sakito
3
100
DataStoreをテストする
mkeeda
0
260
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.9k
Agentic Applications with Symfony
el_stoffel
2
190
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
300
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
1
400
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
4
290
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
630
AHC 044 混合整数計画ソルバー解法
kiri8128
0
320
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
180
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
500
Being A Developer After 40
akosma
90
590k
How STYLIGHT went responsive
nonsquared
99
5.4k
The Cult of Friendly URLs
andyhume
78
6.3k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Transcript
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言語の 標準テンプレートエンジンは つかいにくい
None
結果、こうなった
標準テンプレートエンジンを使って、 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 InfiniteScrollͳͲՃͰσʔλΛऔಘ͢Δࡍ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をバインディングしているようだ
最後に…
株式会社グノシーでは フロントエンドエンジニアを 絶賛募集中です!