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
160
開発現場でのサービスデザインとモデリング
tyshgc
PRO
8
3.2k
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.5k
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.2k
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
tyshgc
PRO
46
12k
Other Decks in Programming
See All in Programming
Is Xcode slowly dying out in 2025?
uetyo
1
280
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
19k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
150
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
930
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Automating Front-end Workflow
addyosmani
1370
200k
We Have a Design System, Now What?
morganepeng
53
7.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Fireside Chat
paigeccino
37
3.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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をバインディングしているようだ
最後に…
株式会社グノシーでは フロントエンドエンジニアを 絶賛募集中です!