The Future of Rails as a Full-stack Framework Powered by Hotwire @ Rails World 2023, Amsterdam

Hotwire has revolutionized the way we build interactive web applications using Ruby on Rails. Join us for an insightful session that explores the future of Hotwire and its role in shaping Ruby on Rails as a powerful Full-Stack framework.

We will take an in-depth look at the recent advancements in Hotwire and provide practical demonstrations, implementation insights, useful tools, and guidance on effectively utilizing Stimulus, Turbo and related frameworks.

Marco, the maintainer of Stimulus, StimulusReflex and CableReady, shares his passion for Hotwire and his vision for its advancement. Gain clarity on Hotwire’s purpose, its roadmap, and the exciting possibilities it presents for building advanced, reactive applications. Marco will discuss ideas and concepts, eliminating confusion and promoting cohesion within the Hotwire ecosystem.

Join us to embark on a journey toward a more powerful, unified Hotwire ecosystem, and learn how Ruby on Rails can flourish as a full-stack framework.

https://rubyonrails.org/world/2023/agenda/day-1/6-marco-roth-session

Transcript

2. The Future of Rails as a Full-Stack Framework powered by Marco Roth Full-Stack Developer & Open Source Contributor
3. ! Marco Roth @marcoroth_ @marcoroth@ruby.social marcoroth.dev @marcoroth Full-Stack Developer & Open Source Contributor
4. " How many of you have heard about Hotwire?
5. " How many of are using Hotwire in production?
6. I ❤ Ruby
7. Why stick with Ruby?
14. RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson https://www.youtube.com/watch?v=SWEts0rlezA
17. Stimulus Use current.js Turbo Power StimulusReflex CableReady Stimulus Phlexing gem.sh Turbo Turbo Morph
20. 2012 Turbolinks first released Rails 3.2
21. 2012 Turbolinks first released Rails 3.2 2013 Rails 4.0 Turbolinks ships per default in Rails
22. 2012 Turbolinks first released Rails 3.2 2013 Rails 4.0 Turbolinks ships per default in Rails 2014 2015 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2
23. 2012 Turbolinks first released Rails 3.2 2017 Stimulus and CableReady released Rails 5.1 2013 Rails 4.0 Turbolinks ships per default in Rails 2014 2015 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2
24. 2012 Turbolinks first released Rails 3.2 2017 Stimulus and CableReady released Rails 5.1 2018 Phoenix LiveView and StimulusReflex released Rails 5.2 2013 Rails 4.0 Turbolinks ships per default in Rails 2014 2015 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2
25. 2012 Turbolinks first released Rails 3.2 2017 Stimulus and CableReady released Rails 5.1 2018 Phoenix LiveView and StimulusReflex released Rails 5.2 2013 Rails 4.0 Turbolinks ships per default in Rails 2014 2015 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2 2019 2020 Hotwire umbrella and Turbo released Rails 6.1 Rails 6.0
26. 2012 Turbolinks first released Rails 3.2 2017 Stimulus and CableReady released Rails 5.1 2018 Phoenix LiveView and StimulusReflex released Rails 5.2 2021 Rails 7.0 Hotwire ships per default in Rails 2013 Rails 4.0 Turbolinks ships per default in Rails 2014 2015 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2 2019 2020 Hotwire umbrella and Turbo released Rails 6.1 Rails 6.0
27. The Hotwire approach isn’t new Turbolinks + Stimulus in 2017
29. We want to use the HTML and the business logic we already have on the backend without having to duplicate anything on the frontend.
30. Hotwire is not about getting rid of JavaScript. Hotwire is about reducing the amount of custom JavaScript you need to write for your application.
31. Ecosystem
32. Frameworks Tooling Community Documentation
33. Frameworks !
34. Turbo Stimulus Strada
35. View Transitions API + Morphing
37. CableReady::Updatable
38. STIMULUS USE
39. STIMULUS USE Composable mixins to simply Stimulus controllers
40. STIMULUS USE Composable mixins to simply Stimulus controllers The "Standard Library" for Stimulus
41. import { Controller } from "@hotwired/stimulus" import { useWindowResize } from "stimulus-use" export default class extends Controller { connect() { useWindowResize(this) } windowResize({ width, height }) { console.log(width, height) } }
42. import { Controller } from "@hotwired/stimulus" import { useWindowResize } from "stimulus-use" export default class extends Controller { connect() { useWindowResize(this) } windowResize({ width, height }) { console.log(width, height) } }
43. import { Controller } from "@hotwired/stimulus" import { useWindowResize } from "stimulus-use" export default class extends Controller { connect() { useWindowResize(this) } windowResize({ width, height }) { console.log(width, height) } }
44. import { Controller } from "@hotwired/stimulus" import { useWindowResize } from "stimulus-use" export default class extends Controller { connect() { useWindowResize(this) } windowResize({ width, height }) { console.log(width, height) } }
47. It sparks joy to write unobtrusive JavaScript like this
48. useClickOutside useIntersection useHotkeys useHover useMatchMedia useMutation useResize useTargetMutation useVisibility useWindowFocus useMemo useWindowResize useDebounce useThrottle useIdle useMeta useTransition useApplication useDispatch
49. Turbo Streams
50. append prepend replace update remove before after
51. Custom Turbo Stream Actions
54. add_css_class clear_local_storage clear_session_storage clear_storage console_log console_table dispatch_event graft history_back history_forward history_go inner_html insert_adjacent_html insert_adjacent_text morph notification outer_html push_state redirect_to reload remove_attribute remove_css_class remove_local_storage_item remove_session_storage_item remove_storage_item replace_state reset_form scroll_into_view set_attribute set_cookie set_cookie_item set_dataset_attribute set_focus set_local_storage_item set_meta set_property set_session_storage_item set_storage_item set_style set_styles set_title set_value text_content toggle_css_class turbo_clear_cache turbo_frame_reload turbo_frame_set_src turbo_progress_bar_hide turbo_progress_bar_set_value turbo_progress_bar_show
55. StimulusReflex CableReady
56. Build reactive applications with the Rails tooling you already know and love.
58. StimulusReflex 3.5 CableReady 5.0
59. Inspirations from Single-Page-Applications
60. Coming Soon
61. <form> <input type="number" min="5" max="10" required> <input type="submit"> </form>
65. Validation API
66. SKELETONS Coming Soon
68. OPTIMISTIC UI
69. Optimistic client-side rendering Advanced Loading Indicators Stashed Turbo Streams Pre-rendered Turbo Streams Optimistic Stream Updates
70. Tools "
71. Developer Experience Improvements in Stimulus
72. app/javascript/controllers/user_profile_controller.js
73. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
74. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
75. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
76. <div data-controller="user_profile"> </div>
77. <div data-controller="user_profile"> </div>
78. <div data-controller="user-profile"> </div>
81. Controllers Actions Targets Values Classes Outlets
82. <div data-controller="user-profile"> <div data-user-target="name"></div> </div>
83. <div data-controller="user-profile"> <div data-user-target="name"></div> </div>
84. <div data-controller="user-profile"> <div data-user-profile-target="nam"></div> </div>
85. Can we do better?
86. Beta Stimulus LSP
101. Stimulus LSP • There’s a lot more we can do, for example to offer autocomplete in controllers files • Doesn’t work with Rails helpers like content_tag or tag.div yet • Waiting for the Ruby LSP to get proper ERB-support • Bug reports and feedback welcome!
102. Download Beta Today
104. Planned Turbo LSP
105. # Documentation
106. $ Community # Documentation
107. What’s lacking in Hotwire? Framework-specific documentation In-depth guides Discoverability Navigating the ecosystem Presentation and marketing Staying up-to-date
108. CableReady Cubism current.js Debounced Formulus Futurism Hotwire Kredis Local Time Rails Request.js Skeletons Stimulus Stimulus Intellisense Stimulus LSP Stimulus Parser Stimulus Rails Stimulus Use StimulusReflex Strada Strada Android Strada Web Strada iOS tippy.js Tom Select Turbo Turbo Boost Turbo Boost Commands Turbo Boost Dev Tools Turbo Boost Elements Turbo Boost Streams Turbo LSP Turbo LSP Turbo Morph Turbo Native Turbo Native Android Turbo Native iOS Turbo Power Turbo Power Rails Turbo Rails View Components ….
110. .IO
111. .IO Community-maintained documentation and resource Hub
112. Frameworks Tooling Community Documentation
114. Helping you navigate and discover the ecosystem
115. Use-Cases and Best practices
116. Backed by community content
117. Backed by community content If you write a blog post about a topic, we want to feature it next to the relevant documentation section so it can also be discovered by the community.
118. This is just the start. We would love to see your contribution.
121. Frameworks-specific Integrations and Documentation
122. WEEKLY
123. Hotwire Weekly • A new Hotwire-focused newsletter • Delivered Weekly • Explore what’s happening in the world of Hotwire • Progress and updates while we are building out hotwire.io • Starting next week WEEKLY
124. @Hotwire_Weekly @Hotwire_Weekly@ruby.social Hotwire Weekly Sign up on hotwire.io/newsletter
126. Future and Vision
127. github.com/sponsors/marcoroth
128. Appreciations Sam Stephenson Javan Makhmali
129. Stickers
130. Thank you $ @marcoroth_ @marcoroth@ruby.social marcoroth.dev @marcoroth