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-rails
Search
Kazuhito Hokamura
April 24, 2015
Programming
12
6k
react-rails
Kazuhito Hokamura
April 24, 2015
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
4.6k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
420
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
990
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
Other Decks in Programming
See All in Programming
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
560
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
型で語るカタ
irof
0
530
ニーリーにおけるプロダクトエンジニア
nealle
0
890
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
170
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
650
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
VS Code Update for GitHub Copilot
74th
2
670
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
NEWT Backend Evolution
xpromx
1
110
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
How to train your dragon (web standard)
notwaldorf
96
6.1k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Optimizing for Happiness
mojombo
379
70k
Statistics for Hackers
jakevdp
799
220k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
BBQ
matthewcrist
89
9.7k
Designing for humans not robots
tammielis
253
25k
KATA
mclloyd
30
14k
Transcript
react-rails React.js meetup #1
@hokaccha
None
None
Key Features • JSX compilation in the Rails asset pipeline
• React component mounting with a view helper & UJS • Server-side rendering
Mounting with view helper & UJS
class MyComponent extends React.Component { render() { return <div>Name: {this.props.name}</div>;
} } MyComponent.jsx
<%= react_component('MyComponent', name: 'hokaccha') %> # => <div data-react-class="MyComponent" data-react-props='{"name":"hokaccha"}'>
</div> view helper
// ※ ίʔυΠϝʔδ findAll('[data-react-class]').forEach((el) => { var reactClass = el.dataset.reactClass;
var reactProps = el.dataset.reactProps; var component = window[reactClass]; var props = JSON.parse(reactProps); var reactElement = React.createElement(component, props); React.render(reactElement, el); }); react_ujs
• Ϛϯτ͢ΔίʔυΛॻ͔ͳ͍͍ͯ͘ • APIϦΫΤετ͠ͳ͍ߴ
Server Side Rendering
<%= react_component('MyComponent', { name: 'hokaccha' }, { prerender: true })
%> # => <div data-react-class="MyComponent" data-react-props='{"name":"hokaccha"}'> <div data-react-checksum="xxx">Name: hokaccha</div> </div>
• ExecJSͰJSΛ࣮ߦ • therubyracerʢV8ʣਪ
DEMO
Performance
JT 4MJN &3# SFBDU )BNM
• ଞͷςϯϓϨʔτΤϯδϯͱࠞͥͯ͏ͷͰ ୯७ͳൺֱ͋·Γҙຯ͕ແ͍ • ࢮ͵΄Ͳ͍Θ͚Ͱͳͦ͞͏ͱ͍͏ͷ͕ Θ͔ΔͨΊͷϕϯνϚʔΫ • Railsͩͱଞͷ෦͕͍ͷͰશମͷ ύϑΥʔϚϯεͱͷׂ߹͕ॏཁ
Using with Turbolinks
<%= react_component('MyComponent', { name: 'hokaccha' }, { prerender: !turbolinks_request? })
%>
• αʔόʔαΠυϨϯμϦϯά͕࠷ॳͷ ϦΫΤετ͚࣌ͩʹͳΔ • ΫϥΠΞϯταΠυͰͷϧʔςΟϯά͕ෆཁ • UJS͕Mount/Unmountͷ໘Λݟͯ͘ΕΔ
DEMO
• વAPIϕʔεͷ΄͏͕Cool͍ͩ͠ • ࡉ͔͍ભҠͷ੍ޚͰ͖ͳ͍ʢͨͿΜʣ • Ϩʔϧʹ͔ͬΔ͜ͱͰ؆୯ʹͰ͖Δ Α͏ʹͳΔͱ͍͏ͷ͕ॏཁ
αʔόʔαΠυίϯςΩετ ڞ༗ʢ͕࣌ؒ͋Εʣ
·ͱΊ
• άϦϯάϦϯಈ͘SPAͱ͔ʹͨͿΜ͔ͳ͍ • ෦తʹಈతͳίϯςϯπ͕͋ΔΑ͏ͳ ΞϓϦέʔγϣϯͩͱ͍Ͳ͜Ζ͋Δ͔ • Turbolinksʹϫϯνϟϯ͋ΔՄೳੑ
Thanks