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.7k
react-rails
Kazuhito Hokamura
April 24, 2015
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
2.7k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
300
RailsエンジニアのためのNext.js入門
hokaccha
7
17k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.9k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.5k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
820
Web Frontend Improvement in Cookpad
hokaccha
1
890
cookpad summer internship 2018 - Git
hokaccha
1
9.4k
Other Decks in Programming
See All in Programming
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Semantic search with Django and pgvector
pauloxnet
0
240
エンターテイメント業界で利用されるAWS
demuyan
0
210
Hanami and htmx
bkuhlmann
0
200
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
What We Can Learn From OSS
inouehi
0
420
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
Git Rebase
bkuhlmann
11
1.6k
2 週間で Twitter Bot を作ってみた
contour_gara
0
160
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
雑に思考を整理する技術と効能
konifar
58
29k
Featured
See All Featured
Done Done
chrislema
178
15k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Building an army of robots
kneath
300
41k
We Have a Design System, Now What?
morganepeng
43
6.7k
Gamification - CAS2011
davidbonilla
76
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Raft: Consensus for Rubyists
vanstee
132
6.3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Designing the Hi-DPI Web
ddemaree
276
33k
Practical Orchestrator
shlominoach
182
9.7k
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