Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React on Rails workshop at Conferencia.ROR

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Prathamesh Sonpatki Prathamesh Sonpatki
October 13, 2016
160
0

React on Rails workshop at Conferencia.ROR

Avatar for Prathamesh Sonpatki

Prathamesh Sonpatki

October 13, 2016

More Decks by Prathamesh Sonpatki

See All by Prathamesh Sonpatki
Secrets to Monitor Kubernetes Workloads
Avatar for Prathamesh Sonpatki prathamesh
1
110
The Complete Handbook to OpenTelemetry Metrics
Avatar for Prathamesh Sonpatki prathamesh
1
85
Breaking down the Pillars of Observability: From data to outcomes
Avatar for Prathamesh Sonpatki prathamesh
0
100
Monitoring vs. Debugging
Avatar for Prathamesh Sonpatki prathamesh
0
170
Handling High Cardinality in Observability
Avatar for Prathamesh Sonpatki prathamesh
1
110
Setting up Monitoring for Kubernetes
Avatar for Prathamesh Sonpatki prathamesh
0
310
Monitoring vs. Debugging - SRE BLR Meetup
Avatar for Prathamesh Sonpatki prathamesh
0
100
Monitoring vs. Debugging - IG Meetup 22nd July
Avatar for Prathamesh Sonpatki prathamesh
2
120
Pune_User_Group.pdf
Avatar for Prathamesh Sonpatki prathamesh
0
110

Featured

See All Featured
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
190
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
370
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
180
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.4k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
270

Transcript

  1. React on Rails workshop Prathamesh Sonpatki @_cha1tanya

  2. None

  3. Agenda

  4. Why React?

  5. Build UI

  6. V in MVC

  7. Declarative

  8. if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader();

  9. if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader(); if encodingCompleted <header>Encoding

    Completed</header> else <div>Loading…</div>

  10. Unconventional ideas

  11. Components

  12. None

  13. <TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} />

  14. Reusable

  15. None

  16. Composable

  17. None

  18. Separation of concerns

  19. No templates

  20. React === JavaScript #=> true

  21. Managing Data

  22. Data changing over time is root of evil Pete Hunt

  23. Props

  24. One way data flow

  25. State

  26. Responding to state changes

  27. Refresh

  28. Re-Rendering the component

  29. Re-Rendering the component tree

  30. Re-Rendering

  31. Isn’t it too slow?

  32. Virtual DOM

  33. Diff

  34. Minimal set of changes

  35. Nothing is new!

  36. Let’s begin!

  37. React❤Rails

  38. react-rails + CDN packages

  39. react_on_rails https://github.com/shakacode/ react_on_rails

  40. sprockets_comm oner https://github.com/Shopify/sprockets- commoner

  41. Thanks! @_cha1tanya @BigBinary http://blog.bigbinary.com http://videos.bigbinary.com https://github.com/prathamesh-sonpatki/react-rails-examples