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.2k
react-rails
Kazuhito Hokamura
April 24, 2015
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
RailsエンジニアのためのNext.js入門
hokaccha
6
9.3k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.1k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
640
Web Frontend Improvement in Cookpad
hokaccha
1
630
cookpad summer internship 2018 - Git
hokaccha
1
9.2k
cookpad summer internship 2018 - JavaScript
hokaccha
0
9k
エンジニアのアウトプットと採用 / Engineer's output and recruiting
hokaccha
0
1.4k
ログを活用したサービス開発
hokaccha
2
6.5k
Other Decks in Programming
See All in Programming
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
530
GitHubのユーザー名を変更した後のあれこれ
tahia910
0
120
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
110
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
230
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
190
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
390
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
240
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
700
Make the most of Django - PyCon Italia 2022
pauloxnet
0
110
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
Seleniumでイキってたらサーバを絞め落としかけてた話
kenfujita
0
360
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
KATA
mclloyd
7
8.7k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
4 Signs Your Business is Dying
shpigford
169
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Web development in the modern age
philhawksworth
197
9.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
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