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