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
130
開発現場でのサービスデザインとモデリング
tyshgc
PRO
7
3k
React Nativeで 位置情報アプリをつくった話
tyshgc
PRO
10
5.3k
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.7k
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
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.5k
楽しく向き合う例外対応
okutsu
0
570
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
210
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
610
Unity Android XR入門
sakutama_11
0
170
React 19アップデートのために必要なこと
uhyo
5
1.1k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
190
ARA Ansible for the teams
kksat
0
170
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
210
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Code Review Best Practice
trishagee
67
18k
A Philosophy of Restraint
colly
203
16k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
A Modern Web Designer's Workflow
chriscoyier
693
190k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
It's Worth the Effort
3n
184
28k
The Cult of Friendly URLs
andyhume
78
6.2k
Music & Morning Musume
bryan
46
6.4k
Writing Fast Ruby
sferik
628
61k
Visualization
eitanlees
146
15k
Being A Developer After 40
akosma
89
590k
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をバインディングしているようだ
最後に…
株式会社グノシーでは フロントエンドエンジニアを 絶賛募集中です!