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.5k
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
30
開発現場でのサービスデザインとモデリング
tyshgc
PRO
7
2.6k
React Nativeで 位置情報アプリをつくった話
tyshgc
PRO
10
4.8k
Design For User #2 コンポーネント指向から考えるUIと設計・趣旨説明スライド / Design For User #2 Openning Slide
tyshgc
PRO
1
1.2k
メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design
tyshgc
PRO
11
4.9k
Designer meets Domain-Driven-Design
tyshgc
PRO
28
2.6k
ReactとLoopbackことはじめ / React.js meets Loopback
tyshgc
PRO
11
3.5k
UCDとDDD - ユースケースからユーザー中心について考える
tyshgc
PRO
21
3.9k
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
tyshgc
PRO
46
12k
Other Decks in Programming
See All in Programming
[スクリプト] Swiftの型推論を学ぼう
omochi
0
120
GitHub Copilot Tips and Tricks
yuichielectric
26
7.5k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
290
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Understanding Ast By Looking
inouehi
0
120
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
Creating Retro-Style Photos Using Swift
ski
1
370
incrementalモデルの理解を深める
ikkimiyazaki
2
640
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
820
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Debugging Ruby Performance
tmm1
68
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Statistics for Hackers
jakevdp
789
220k
Optimizing for Happiness
mojombo
369
69k
GraphQLとの向き合い方2022年版
quramy
28
12k
Web development in the modern age
philhawksworth
201
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Thoughts on Productivity
jonyablonski
57
3.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Designing the Hi-DPI Web
ddemaree
275
33k
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をバインディングしているようだ
最後に…
株式会社グノシーでは フロントエンドエンジニアを 絶賛募集中です!