Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

React on Rails workshop at Conferencia.ROR

Avatar for Prathamesh Sonpatki Prathamesh Sonpatki
October 13, 2016
170
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
120
The Complete Handbook to OpenTelemetry Metrics
Avatar for Prathamesh Sonpatki prathamesh
1
100
Breaking down the Pillars of Observability: From data to outcomes
Avatar for Prathamesh Sonpatki prathamesh
0
120
Monitoring vs. Debugging
Avatar for Prathamesh Sonpatki prathamesh
0
200
Handling High Cardinality in Observability
Avatar for Prathamesh Sonpatki prathamesh
1
120
Setting up Monitoring for Kubernetes
Avatar for Prathamesh Sonpatki prathamesh
0
320
Monitoring vs. Debugging - SRE BLR Meetup
Avatar for Prathamesh Sonpatki prathamesh
0
110
Monitoring vs. Debugging - IG Meetup 22nd July
Avatar for Prathamesh Sonpatki prathamesh
2
130
Pune_User_Group.pdf
Avatar for Prathamesh Sonpatki prathamesh
0
130

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
470
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5M
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
710
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
850
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.9k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
720
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k

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