Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit

Hotwire has significantly altered the landscape of building interactive web applications with Ruby on Rails, marking a pivotal evolution toward seamless Full-Stack development.

With the release of Turbo 8, the ecosystem has gained new momentum, influencing how developers approach application design and interaction.

This session, led by Marco, a core maintainer of Stimulus, StimulusReflex, and CableReady, delves into capabilities introduced with Turbo 8, reevaluating its impact on the whole Rails and Hotwire ecosystem.

https://railsconf.org/schedule/

Transcript

2. Revisiting the Hotwire Landscape after Turbo 8 Marco Roth Full-Stack Developer & Open Source Contributor
3. ! Marco Roth @marcoroth_ @marcoroth@ruby.social marcoroth.dev @marcoroth Full-Stack Developer & Open Source Contributor
5. I ❤ Open Source
6. Open Source Journey
7. Started to actively contribute in 2019
8. Started to actively contribute in 2019 Went full-time on OSS in January 2022
9. Started to actively contribute in 2019 Went full-time on OSS in January 2022 Started contracting in July 2023
15. X
16. Superpower ⚡
17. The future of modern Rails apps
19. Rails Renaissance
22. $
23. %
24. I want to build modern frontend tools and tooling that are worthy of the Rails framework and it’s history.
26. And I think that changed the trajectory for the ecosystem quite a bit.
27. Timeline and History
29. HTML-over-the-wire
30. We want to use HTML as the format for our application.
31. The server is the single source of truth
32. We want to use the HTML and the business logic we already have on the backend without having to duplicate anything on the frontend.
33. Hotwire is not about getting rid of JavaScript. Hotwire is about reducing the amount of custom JavaScript you need to write for your application.
34. 2012 Turbolinks first released Rails 3.2 2013 Rails 4.0 Turbolinks ships per default in Rails
36. $ rails new —-skip-turbolinks
37. Turbolinks was a decade ahead of it’s time.
38. 2012 Turbolinks first released Rails 3.2 2013 Rails 4.0 Turbolinks ships per default in Rails 2014 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2
39. RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson https://www.youtube.com/watch?v=SWEts0rlezA
41. 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 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2
42. Stimulus CableReady
43. We were missing a way to reactively reflect updates in our Rails frontend.
44. We wanted to build more sophisticated Rails applications.
45. Reactive Real-time High fidelity Interactions
46. 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 2016 Turbolinks 5 released Rails 5.0 Rails 4.1 and Rails 4.2
47. StimulusReflex Phoenix LiveView
48. Build reactive applications with the Rails tooling you already know and love.
49. Stimulus Turbolinks Rails UJS CableReady 2018 ActionCable Rails
50. <button data-reflex="click"> <%= Time.current.to_i %> </button>
51. class CounterController < ApplicationController def show @count = session[:count] || 0 end end
52. <button data-reflex="click->Counter#increment">+</button> <button data-reflex="click->Counter#decrement">-</button> Count: <b><%= @count %></b>
53. class CounterReflex < ApplicationReflex def increment session[:count] += 1 end def decrement session[:count] -= 1 end end
54. &✨
55. 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 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
56. December 2020 Turbo Drive Turbo Frames Turbo Streams
57. 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 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
58. 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 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 2023 Rails 7.1 2024 Turbo 8 with Morphing released
59. February 2024 Turbo Page Refreshes Turbo Model Broadcasts
63. The paths are converging
64. They have the same goal
65. Hotwire is the default in Rails now
66. Build reactive applications with the Rails tooling you already know and love.
67. Should you start new apps with StimulusReflex?
68. Probably not.
69. Hotwire has come a long way over the years
70. Both projects have the same end goal
71. The projects are somewhat competing.
72. People are confused with the amount of projects and their boundaries
73. Simplifying the Hotwire ecosystem doesn’t hurt
74. StimulusReflex 3.5 CableReady 5.0
75. StimulusReflex 3.5 CableReady 5.0 Is out today!
76. In the making for over 3 years
78. The StimulusReflex Core team has decided that v3.5 is the last feature-release for now.
81. Instead, we want to focus and help on improving the greater Hotwire ecosystem.
82. Going forward we would love to help make Hotwire the best set of framework in this space.
83. Make it the best for Rails
84. StimulusReflex inspired
85. StimulusReflex pushed what is possible
86. Turbo Frames Turbo Streams Custom Turbo Stream Actions Turbo Broadcasts Turbo Page Refreshes Morphing
87. We were able to build these features early on, because we were pushing what’s possible with the HTML-over-the-wire approach
88. StimulusReflex has been innovative
89. StimulusReflex + CableReady Hotwire / Turbo Difference DOM Updates May 2017 CableReady Operations Dec 2020 Turbo Streams 3 yrs 7 mo Morphing as an individual concept Aug 2019 CR Morph Action + SR Morphs ? 4 yrs 9 mo+ Scoped Navigation Oct 2019 data-reflex-root Dec 2020 Turbo Frames 1 yrs 2 mo Custom Actions May 2020 Custom CableReady Operations Sep 2022 Custom Turbo Stream Actions 2 yrs 4 mo Reactive Page Refreshes May 2020* StimulusReflex Page Morph Feb 2024 Turbo Page Refreshes 3 yrs 9 mo Partial Page Refreshes May 2020 StimulusReflex Selector Morph ? 4 yrs+ Subscribe to Models Jan 2021 cable_ready_stream_from Dec 2020 turbo_stream_from -1 mo Modal Change Broadcasts Aug 2021 CableReady::Updatable Feb 2024 Turbo Model Broadcasts 2 yrs 6 mo
90. None of is to blame ⚠
91. What can we learn from it?
92. Missing a formal organizational structure
93. Tooling Education Marketing Documentation Addressing Issues Community Building Building new features Accelerating Adoption Framework integrations Answering Questions/Forums Guides/How tos/Best Practices Support Migrations/Transitions
94. There are a lot of open issues and unaddressed pull requests.
95. Stimulus and Turbo are now default in Rails 7.0
97. Who’s driving this?
98. There is no Hotwire "Core Team"
99. Rails is diverse
100. …and all the people that have contributed and pushed Rails over the years
101. Building a community around Hotwire
102. Can we have something similar for Hotwire?
103. Should we have something similar for Hotwire?
104. I think we should.
105. What can we take over from StimulusReflex?
106. DX Installer experience Partial page updates Morphing beyond Page Refreshes Optimistic UI Plugability
107. Bringing over as much as possible.
108. It would benefit everyone.
109. More diversity and advanced uses cases
110. The needs of those companies must be heard
111. Rails integration and documentation is key
112. So many companies use and rely on Hotwire
113. I want to keep building Full-stack apps with Rails
114. Hotwire should enables it
115. Ecosystem
116. Frameworks Tooling Community Documentation
117. Tools !
118. Developer Experience Improvements in Stimulus
119. app/javascript/controllers/user_profile_controller.js
120. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
121. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
122. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
123. <div data-controller="user_profile"> </div>
125. <div data-controller="user_profile"> </div>
126. <div data-controller="user-profile"> </div>
127. These mistakes happen so easily
128. Can we do better?
129. Available Now Stimulus LSP
136. app/javascript/controllers/new_controller_controller.js
145. New features
147. Parses JavaScript classes and traces imports and exports
148. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
149. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
150. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
151. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
152. import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
153. Registers and tracks identifiers
154. import { application } from "./application" import ClipboardController from "./clipboard_controller.js" application.register("clipboard", ClipboardController) import FileUploadController from "./file_upload_controller.js" application.register("file-upload", FileUploadController) app/javascript/controllers/index.js
155. import { application } from "./application" import ClipboardController from "./clipboard_controller.js" application.register("clipboard", ClipboardController) import FileUploadController from "./file_upload_controller.js" application.register("file-upload", FileUploadController) app/javascript/controllers/index.js
156. import { application } from "./application" import ClipboardController from "./clipboard_controller.js" application.register("clipboard", ClipboardController) import FileUploadController from "./file_upload_controller.js" application.register("file-upload", FileUploadController) app/javascript/controllers/index.js
160. import { application } from "./application" + import AlertController from "./alert_controller.js" + application.register("alert", AlertController) app/javascript/controllers/index.js
164. Download 1.0 Today
165. Stimulus LSP Next steps
166. <%= tag.div( data: { controller: "filter", filter_open_class: "border-white", filter_close_class: "hover:bg-gray-100 border-gray-300" } ) %> Full support for HTML+ERB and Rails-specific helpers Ruby LSP
167. # Pin npm packages by running ./bin/importmap pin "application", preload: true pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true pin "@hotwired/stimulus", to: "stimulus.js", preload: true pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true pin "@rails/request.js", to: "requestjs.js", preload: true pin_all_from "app/javascript/controllers", under: "controllers" pin_all_from "app/javascript/config", under: "config" Full support for importmap-rails
170. Coming Soon Stimulus Lint
171. Errors Diagnostics Best Practices Recommendations
172. $ stimulus-lint Stimulus Lint is inspecting 25 files ........................ 25 files inspected, 0 offenses detected, 0 offenses autocorrectable
173. Planned Turbo LSP
174. Planned Stimulus/Turbo Browser Extension
178. Developer Experience and Developer Ergonomics matter.
179. This is the kind of tooling Hotwire is currently missing.
180. It’s just there.
181. " Documentation
182. # Community " Documentation
183. What’s lacking in Hotwire? Framework-specific documentation In-depth guides Discoverability Navigating the ecosystem Presentation and marketing Staying up-to-date
184. ActionCable AnyCable 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 ….
186. .IO Community-maintained documentation and resource Hub
187. Frameworks Tooling Community Documentation
188. https://turbo-laravel.com/
189. https://ux.symfony.com/
190. https://github.com/rails-inspire-django
191. https://guides.micronaut.io/latest/tag-hotwire
192. https://www.bridgetownrb.com/docs/bundled-configurations
193. https://rubydoc.info/github/hotwired/turbo-rails/main
195. Helping you navigate and discover the ecosystem
196. Use-Cases and Best practices
197. Backed by community content
198. Backed by community content If you write a post, we want to feature it next to the relevant documentation section so it can also be discovered by the community.
199. We would love to see your contribution.
202. The framework is not worth anything if people do not know about it and can not learn about it.
203. WEEKLY
204. 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 • Been running since Oct 2023 • Over 1200+ subscribers and growing WEEKLY
206. Coming Soon Hotwire.io Improvements
209. esbuild, importmaps or something else?
211. Coming Soon Hotwire.io Rails Asset Setup Guide
215. Future and Vision
216. All these projects and efforts need to be seen by people in the community.
217. It is a loss if people don’t know these tools exist
218. My wish is that we as a community can continue pushing what’s possible with Hotwire.
219. Turbo 8 has been awesome and is going in right direction.
220. But we need more of it.
221. And that we have a more formal and "official" way of pushing things forward.
222. Optimistic UI Optimistic client-side rendering "Frameless"-Turbo Frames Partial Page Morph Updates Independent Morphing Plugins/Extensibility Web Components PWA Better React-compatibility
224. Keep Building
225. Keep Pushing
226. github.com/sponsors/marcoroth
227. @Hotwire_Weekly @Hotwire_Weekly@ruby.social Hotwire Weekly Sign up on hotwireweekly.com
228. Stickers
229. Thank you ) @marcoroth_ @marcoroth@ruby.social marcoroth.dev @marcoroth