Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
react-rails
Kazuhito Hokamura
April 24, 2015
Programming
12
5.4k
react-rails
Kazuhito Hokamura
April 24, 2015
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
ユビーのアーキテクチャに対する取り組み
hokaccha
1
160
RailsエンジニアのためのNext.js入門
hokaccha
7
13k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.5k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.3k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
690
Web Frontend Improvement in Cookpad
hokaccha
1
700
cookpad summer internship 2018 - Git
hokaccha
1
9.3k
cookpad summer internship 2018 - JavaScript
hokaccha
0
9.1k
エンジニアのアウトプットと採用 / Engineer's output and recruiting
hokaccha
0
1.4k
Other Decks in Programming
See All in Programming
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
150
AWSにおける標的型Bot対策
hacomono
0
440
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
640
低レイヤーから始める GUI
fadis
18
9.4k
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
Gradle build: The time is now
nonews
1
500
Next.js 13 Layout / Streaming SSR 仕組み解説
sumiren
0
160
Git Rebase
bkuhlmann
10
1.2k
TokyoR#103_DataProcessing
kilometer
0
550
tidy_rpart
bk_18
0
610
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Six Lessons from altMBA
skipperchong
15
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Designing the Hi-DPI Web
ddemaree
273
32k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
We Have a Design System, Now What?
morganepeng
37
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
10k
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