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