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.8k
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
3.7k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.1k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
340
RailsエンジニアのためのNext.js入門
hokaccha
7
18k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.7k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
870
Web Frontend Improvement in Cookpad
hokaccha
1
970
Other Decks in Programming
See All in Programming
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
370
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
360
2024 컴포즈 정원사
jisungbin
0
140
暴走のウホーレン 〜想いってのはvimrcにしないと伝わらないんだぜ〜 / iosdc_japan_2024
uhooi
1
240
eBPF Japan Meetup のご紹介
kentatada
0
140
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
130
New Order in Cascade Sorting Order
mugi_uno
3
2.5k
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
93
5.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
34
1.9k
Debugging Ruby Performance
tmm1
72
12k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Statistics for Hackers
jakevdp
793
220k
Web Components: a chance to create the future
zenorocha
308
41k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
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