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

1. The Future of Rails as a Full-Stack Framework powered by Marco Roth Full-Stack Developer & Open Source Contributor
2. ! Marco Roth @marcoroth_ @marcoroth@ruby.social marcoroth.dev @marcoroth Full-Stack Developer & Open Source Contributor
3. " How many of you have heard about Hotwire?
4. " How many of are using Hotwire in production?
5. I ❤ Ruby
6. Why stick with Ruby?
13. RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson https://www.youtube.com/watch?v=SWEts0rlezA
16. Stimulus Use current.js Turbo Power StimulusReflex CableReady Stimulus Phlexing gem.sh Turbo Turbo Morph
19. 2012 Turbolinks first released Rails 3.2
20. 2012 Turbolinks first released Rails 3.2 2013 Rails 4.0 Turbolinks ships per default in Rails
21. 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
22. 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
23. 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
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 2019 2020 Hotwire umbrella and Turbo released Rails 6.1 Rails 6.0
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 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
26. The Hotwire approach isn’t new Turbolinks + Stimulus in 2017
28. We want to use the HTML and the business logic we already have on the backend without having to duplicate anything on the frontend.
29. Hotwire is not about getting rid of JavaScript. Hotwire is about reducing the amount of custom JavaScript you need to write for your application.
30. Ecosystem
31. Frameworks Tooling Community Documentation
32. Frameworks !
33. Turbo Stimulus Strada
34. View Transitions API + Morphing
36. CableReady::Updatable
37. STIMULUS USE
38. STIMULUS USE Composable mixins to simply Stimulus controllers
39. STIMULUS USE Composable mixins to simply Stimulus controllers The "Standard Library" for Stimulus
40. 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) } }
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) } }
46. It sparks joy to write unobtrusive JavaScript like this
47. useClickOutside useIntersection useHotkeys useHover useMatchMedia useMutation useResize useTargetMutation useVisibility useWindowFocus useMemo useWindowResize useDebounce useThrottle useIdle useMeta useTransition useApplication useDispatch
48. Turbo Streams
49. append prepend replace update remove before after
50. Custom Turbo Stream Actions
53. 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
54. StimulusReflex CableReady
55. Build reactive applications with the Rails tooling you already know and love.
57. StimulusReflex 3.5 CableReady 5.0
58. Inspirations from Single-Page-Applications
59. Coming Soon
60. <form> <input type="number" min="5" max="10" required> <input type="submit"> </form>
64. Validation API
65. SKELETONS Coming Soon
67. OPTIMISTIC UI
68. Optimistic client-side rendering Advanced Loading Indicators Stashed Turbo Streams Pre-rendered Turbo Streams Optimistic Stream Updates
69. Tools "
70. Developer Experience Improvements in Stimulus
71. app/javascript/controllers/user_profile_controller.js
72. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
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. <div data-controller="user_profile"> </div>
76. <div data-controller="user_profile"> </div>
77. <div data-controller="user-profile"> </div>
80. Controllers Actions Targets Values Classes Outlets
81. <div data-controller="user-profile"> <div data-user-target="name"></div> </div>
82. <div data-controller="user-profile"> <div data-user-target="name"></div> </div>
83. <div data-controller="user-profile"> <div data-user-profile-target="nam"></div> </div>
84. Can we do better?
85. Beta Stimulus LSP
100. 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!
101. Download Beta Today
103. Planned Turbo LSP
104. # Documentation
105. $ Community # Documentation
106. What’s lacking in Hotwire? Framework-specific documentation In-depth guides Discoverability Navigating the ecosystem Presentation and marketing Staying up-to-date
107. 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 ….
109. .IO
110. .IO Community-maintained documentation and resource Hub
111. Frameworks Tooling Community Documentation
113. Helping you navigate and discover the ecosystem
114. Use-Cases and Best practices
115. Backed by community content
116. 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.
117. This is just the start. We would love to see your contribution.
120. Frameworks-specific Integrations and Documentation
121. WEEKLY
122. 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
123. @Hotwire_Weekly @Hotwire_Weekly@ruby.social Hotwire Weekly Sign up on hotwire.io/newsletter
125. Future and Vision
126. github.com/sponsors/marcoroth
127. Appreciations Sam Stephenson Javan Makhmali
128. Stickers
129. Thank you $ @marcoroth_ @marcoroth@ruby.social marcoroth.dev @marcoroth