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
180
開発現場でのサービスデザインとモデリング
tyshgc
PRO
8
3.3k
React Nativeで 位置情報アプリをつくった話
tyshgc
PRO
10
5.5k
Design For User #2 コンポーネント指向から考えるUIと設計・趣旨説明スライド / Design For User #2 Openning Slide
tyshgc
PRO
1
1.3k
メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design
tyshgc
PRO
11
5.6k
Designer meets Domain-Driven-Design
tyshgc
PRO
28
2.8k
ReactとLoopbackことはじめ / React.js meets Loopback
tyshgc
PRO
11
3.9k
UCDとDDD - ユースケースからユーザー中心について考える
tyshgc
PRO
21
4.2k
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
tyshgc
PRO
46
12k
Other Decks in Programming
See All in Programming
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
860
開発生産性を上げるための生成AI活用術
starfish719
1
170
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
Serena MCPのすすめ
wadakatu
4
900
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
dynamic!
moro
9
6.5k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
CSC509 Lecture 03
javiergs
PRO
0
330
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
480
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
Bash Introduction
62gerente
615
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Embracing the Ebb and Flow
colly
88
4.8k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Speed Design
sergeychernyshev
32
1.1k
KATA
mclloyd
32
15k
The Invisible Side of Design
smashingmag
301
51k
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をバインディングしているようだ
最後に…
株式会社グノシーでは フロントエンドエンジニアを 絶賛募集中です!