The Hotwire Landscape After Turbo 8 @ Helvetic Ruby 2024, Zurich

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://helvetic-ruby.ch/talks/#marco-roth-revisiting-the-hotwire-landscape-after-turbo-8

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
4. CableReady Core Team Maintainer
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 to support working on OSS 50% of my time
14. X
15. Superpower ⚡
16. The future of modern Rails apps
18. Rails Renaissance
21. $
22. %
23. I want to build modern frontend tools and tooling
24. …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. What is
28. HTML-over-the-wire
29. We want to use HTML as the format for our application.
30. The server is the single source of truth
31. We want to use the HTML and the business logic we already have on the backend
32. Without having to duplicate any logic on the frontend
33. Hotwire is not about getting rid of JavaScript. Hotwire is about reducing the amount of application-specific JavaScript
34. Timeline and History
35. 2012 Turbolinks first released Rails 3.2 2013 Rails 4.0 Turbolinks ships per default in Rails
37. $ rails new —-skip-turbolinks
38. Turbolinks was a decade ahead of it’s time.
39. 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
40. RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson https://www.youtube.com/watch?v=SWEts0rlezA
42. 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
43. Stimulus CableReady
44. We were missing a way to reactively reflect updates in our Rails frontend.
45. We wanted to build more sophisticated Rails applications.
46. Reactive Real-time High fidelity Applications
47. 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
48. StimulusReflex Phoenix LiveView
49. Build reactive applications with the Rails tooling you already know and love.
50. Stimulus Turbolinks Rails UJS CableReady 2018 ActionCable Rails
51. <button data-reflex="click"> <%= Time.current.to_i %> </button>
52. class CounterController < ApplicationController def show @count = session[:count] || 0 end end
53. <button data-reflex="click->Counter#increment">+</button> <button data-reflex="click->Counter#decrement">-</button> Count: <b><%= @count %></b>
54. class CounterReflex < ApplicationReflex def increment session[:count] += 1 end def decrement session[:count] -= 1 end end
55. &✨
56. 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
57. December 2020 Turbo Drive Turbo Frames Turbo Streams
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
59. 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
60. February 2024 Turbo Page Refreshes Turbo Model Broadcasts
66. The paths are converging
67. They have the same goal
68. Hotwire is the default in Rails now
69. Build reactive applications with the Rails tooling you already know and love.
70. Should you start new apps with StimulusReflex?
71. Probably not.
72. Hotwire has come a long way over the years
73. Both projects have the same end goal
74. The projects are somewhat competing.
75. People are confused with the amount of projects and their boundaries
76. Simplifying the Hotwire ecosystem doesn’t hurt
77. StimulusReflex 3.5 CableReady 5.0
78. StimulusReflex 3.5 CableReady 5.0 Is out now!
79. In the making for over 3+ years
80. The StimulusReflex Core team has decided that v3.5 is the last feature-release for now.
83. Instead, we want to focus and help on improving the greater Hotwire ecosystem.
84. Going forward we would love to help make Hotwire the best framework in this space.
85. Make it the best for Rails
86. StimulusReflex inspired
87. StimulusReflex pushed what is possible
88. Turbo Frames Turbo Streams Custom Turbo Stream Actions Turbo Broadcasts Turbo Page Refreshes Morphing
89. We were pushing what’s possible with the HTML-over- the-wire approach
90. Before the Hotwire umbrella was even a thing
91. StimulusReflex has been innovative
92. 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
93. None of is to blame ⚠
94. What can we learn from it?
95. Missing a formal organizational structure to push things
96. 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
97. There are a lot of open issues and unaddressed pull requests.
98. Stimulus and Turbo are now default in Rails 7.0
99. Who’s driving this?
100. There is no Hotwire "Core Team"
101. Rails is diverse
102. …and all the people that have contributed and pushed Rails over the years
103. Building a community around Hotwire
104. To push things forward
106. Can we have something similar for Hotwire?
107. Should we have something similar for Hotwire?
108. I think we should.
109. What can we take over from StimulusReflex?
110. DX Installer experience Partial page updates Morphing beyond Page Refreshes Optimistic UI Plugability
111. Bringing over as much as possible.
112. It would benefit everyone.
113. More diversity and advanced uses cases
114. The needs of those companies must be heard
115. Rails integration and documentation is key
116. So many companies use and rely on Hotwire
117. I want to keep building Full-stack apps with Rails
118. Hotwire should enables it
119. Ecosystem
120. Frameworks Tooling Community Documentation
121. Tools !
122. Developer Experience Improvements in Stimulus
123. app/javascript/controllers/user_profile_controller.js
124. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
125. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
126. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
127. <div data-controller="user_profile"> </div>
129. <div data-controller="user_profile"> </div>
130. <div data-controller="user-profile"> </div>
131. These mistakes happen so easily
132. Can we do better?
133. Available Now Stimulus LSP
139. app/javascript/controllers/new_controller_controller.js
145. New features
147. Parses JavaScript classes and traces imports and exports
148. Registers and tracks identifiers
155. Stimulus LSP Next steps
156. <%= 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
157. # 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
160. Coming Soon Stimulus Lint
161. Errors Diagnostics Best Practices Recommendations
162. $ stimulus-lint Stimulus Lint is inspecting 25 files ........................ 25 files inspected, 0 offenses detected, 0 offenses autocorrectable
163. Planned Turbo LSP
164. Planned Stimulus/Turbo Browser Extension
168. Developer Experience and Developer Ergonomics matter.
169. This is the kind of tooling Hotwire is currently missing.
170. " Documentation
171. # Community " Documentation
172. What’s lacking in Hotwire? Framework-specific documentation In-depth guides Discoverability Navigating the ecosystem Presentation and marketing Staying up-to-date
173. 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 Morph Turbo Native Turbo Native Android Turbo Native iOS Turbo Power Turbo Power Rails Turbo Rails View Components ….
174. .IO Community-maintained documentation and resource Hub
175. Frameworks Tooling Community Documentation
177. https://turbo-laravel.com/
178. https://ux.symfony.com/
179. https://rubydoc.info/github/hotwired/turbo-rails/main
181. Helping you navigate and discover the ecosystem
182. Use-Cases and Best practices
183. Backed by community content
184. 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.
185. We would love to see your contribution.
188. The framework is not worth anything if people do not know about it and can not learn about it.
189. WEEKLY
190. 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
192. Coming Soon Hotwire.io Improvements
195. esbuild, importmaps or something else?
197. Coming Soon Hotwire.io Rails Asset Setup Guide
201. Future and Vision
202. All these projects and efforts need to be seen by the people in the community.
203. It is a loss if people don’t know these tools exist
204. My wish is that we as a community can continue pushing what’s possible with Hotwire.
205. Turbo 8 has been awesome and is going in right direction.
206. But we need more of it.
207. ..and that we have a more formal and "official" way of pushing things forward.
208. Optimistic UI Optimistic client-side rendering "Frameless"-Turbo Frames Partial Page Morph Updates Independent Morphing Plugins/Extensibility Web Components PWA Better React-compatibility
210. A more unified Hotwire ecosystem
211. Keep Building
212. Keep Pushing
213. Build reactive applications with the Rails tooling you already know and love.
214. @Hotwire_Weekly @Hotwire_Weekly@ruby.social Hotwire Weekly Sign up on hotwireweekly.com
215. Stickers
216. Thank you ) @marcoroth_ @marcoroth@ruby.social marcoroth.dev @marcoroth