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
5.9k
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.1k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.4k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.4k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
370
RailsエンジニアのためのNext.js入門
hokaccha
7
19k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.1k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.8k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
920
Web Frontend Improvement in Cookpad
hokaccha
1
1k
Other Decks in Programming
See All in Programming
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
440
ドメインイベント増えすぎ問題
h0r15h0
2
560
テストコード書いてみませんか?
onopon
2
330
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
2
2.5k
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
290
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
370
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
Alba: Why, How and What's So Interesting
okuramasafumi
0
200
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
170
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Language of Interfaces
destraynor
155
24k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Six Lessons from altMBA
skipperchong
27
3.6k
Making the Leap to Tech Lead
cromwellryan
133
9k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
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