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 on Rails workshop at Conferencia.ROR
Search
Prathamesh Sonpatki
October 13, 2016
0
120
React on Rails workshop at Conferencia.ROR
Prathamesh Sonpatki
October 13, 2016
Tweet
Share
More Decks by Prathamesh Sonpatki
See All by Prathamesh Sonpatki
Secrets to Monitor Kubernetes Workloads
prathamesh
1
65
The Complete Handbook to OpenTelemetry Metrics
prathamesh
1
51
Breaking down the Pillars of Observability: From data to outcomes
prathamesh
0
40
Monitoring vs. Debugging
prathamesh
0
95
Handling High Cardinality in Observability
prathamesh
1
71
Setting up Monitoring for Kubernetes
prathamesh
0
260
Monitoring vs. Debugging - SRE BLR Meetup
prathamesh
0
72
Monitoring vs. Debugging - IG Meetup 22nd July
prathamesh
2
87
Pune_User_Group.pdf
prathamesh
0
73
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Writing Fast Ruby
sferik
628
61k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Automating Front-end Workflow
addyosmani
1366
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Embracing the Ebb and Flow
colly
84
4.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Making the Leap to Tech Lead
cromwellryan
133
9k
Bash Introduction
62gerente
608
210k
4 Signs Your Business is Dying
shpigford
181
21k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
React on Rails workshop Prathamesh Sonpatki @_cha1tanya
None
Agenda
Why React?
Build UI
V in MVC
Declarative
if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader();
if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader(); if encodingCompleted <header>Encoding
Completed</header> else <div>Loading…</div>
Unconventional ideas
Components
None
<TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} />
Reusable
None
Composable
None
Separation of concerns
No templates
React === JavaScript #=> true
Managing Data
Data changing over time is root of evil Pete Hunt
Props
One way data flow
State
Responding to state changes
Refresh
Re-Rendering the component
Re-Rendering the component tree
Re-Rendering
Isn’t it too slow?
Virtual DOM
Diff
Minimal set of changes
Nothing is new!
Let’s begin!
React❤Rails
react-rails + CDN packages
react_on_rails https://github.com/shakacode/ react_on_rails
sprockets_comm oner https://github.com/Shopify/sprockets- commoner
Thanks! @_cha1tanya @BigBinary http://blog.bigbinary.com http://videos.bigbinary.com https://github.com/prathamesh-sonpatki/react-rails-examples