Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
The Future of Rails as a Full-Stack
Framework powered by
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
" How many of you have
heard about Hotwire?
Slide 5
Slide 5 text
" How many of are using
Hotwire in production?
Slide 6
Slide 6 text
I ❤ Ruby
Slide 7
Slide 7 text
Why stick with Ruby?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
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
RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson
https://www.youtube.com/watch?v=SWEts0rlezA
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Stimulus Use
current.js
Turbo Power
StimulusReflex
CableReady
Stimulus
Phlexing
gem.sh
Turbo
Turbo Morph
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
2012
Turbolinks first released Rails 3.2
Slide 21
Slide 21 text
2012
Turbolinks first released Rails 3.2
2013 Rails 4.0
Turbolinks ships per default in Rails
Slide 22
Slide 22 text
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
Slide 23
Slide 23 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
2015
2016
Turbolinks 5 released Rails 5.0
Rails 4.1 and Rails 4.2
Slide 24
Slide 24 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
2015
2016
Turbolinks 5 released Rails 5.0
Rails 4.1 and Rails 4.2
Slide 25
Slide 25 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
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
Slide 26
Slide 26 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
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
Slide 27
Slide 27 text
The Hotwire approach isn’t new
Turbolinks + Stimulus in 2017
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 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 30
Slide 30 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 31
Slide 31 text
Ecosystem
Slide 32
Slide 32 text
Frameworks
Tooling
Community
Documentation
Slide 33
Slide 33 text
Frameworks
!
Slide 34
Slide 34 text
Turbo Stimulus Strada
Slide 35
Slide 35 text
View Transitions API + Morphing
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
CableReady::Updatable
Slide 38
Slide 38 text
STIMULUS USE
Slide 39
Slide 39 text
STIMULUS USE
Composable mixins to simply Stimulus controllers
Slide 40
Slide 40 text
STIMULUS USE
Composable mixins to simply Stimulus controllers
The "Standard Library" for Stimulus
Slide 41
Slide 41 text
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)
}
}
Slide 42
Slide 42 text
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)
}
}
Slide 43
Slide 43 text
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)
}
}
Slide 44
Slide 44 text
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)
}
}
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
It sparks joy to write
unobtrusive JavaScript like this
Slide 48
Slide 48 text
useClickOutside useIntersection
useHotkeys useHover useMatchMedia
useMutation useResize useTargetMutation
useVisibility useWindowFocus useMemo
useWindowResize useDebounce useThrottle
useIdle useMeta useTransition
useApplication useDispatch
Slide 49
Slide 49 text
Turbo Streams
Slide 50
Slide 50 text
append
prepend
replace
update
remove
before
after
Slide 51
Slide 51 text
Custom Turbo Stream Actions
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
StimulusReflex
CableReady
Slide 56
Slide 56 text
Build reactive applications with the
Rails tooling you already know and
love.
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
StimulusReflex 3.5
CableReady 5.0
Slide 59
Slide 59 text
Inspirations from
Single-Page-Applications
Slide 60
Slide 60 text
Coming Soon
Slide 61
Slide 61 text
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Validation API
Slide 66
Slide 66 text
SKELETONS
Coming Soon
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
OPTIMISTIC UI
Slide 69
Slide 69 text
Optimistic client-side rendering
Advanced Loading Indicators
Stashed Turbo Streams
Pre-rendered Turbo Streams
Optimistic Stream Updates
Slide 70
Slide 70 text
Tools
"
Slide 71
Slide 71 text
Developer Experience
Improvements in Stimulus
Slide 72
Slide 72 text
app/javascript/controllers/user_profile_controller.js
Slide 73
Slide 73 text
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["name"]
connect() {
console.log("User Profile connected")
}
}
Slide 74
Slide 74 text
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["name"]
connect() {
console.log("User Profile connected")
}
}
Slide 75
Slide 75 text
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["name"]
connect() {
console.log("User Profile connected")
}
}
Slide 76
Slide 76 text
Slide 77
Slide 77 text
Slide 78
Slide 78 text
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Controllers
Actions
Targets
Values
Classes
Outlets
Slide 82
Slide 82 text
Slide 83
Slide 83 text
Slide 84
Slide 84 text
Slide 85
Slide 85 text
Can we do better?
Slide 86
Slide 86 text
Beta
Stimulus LSP
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
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!
Slide 102
Slide 102 text
Download Beta Today
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
Planned
Turbo LSP
Slide 105
Slide 105 text
#
Documentation
Slide 106
Slide 106 text
$
Community
#
Documentation
Slide 107
Slide 107 text
What’s lacking in Hotwire?
Framework-specific documentation
In-depth guides
Discoverability
Navigating the ecosystem
Presentation and marketing
Staying up-to-date
Slide 108
Slide 108 text
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 109
Slide 109 text
No content
Slide 110
Slide 110 text
.IO
Slide 111
Slide 111 text
.IO
Community-maintained documentation and resource Hub
Slide 112
Slide 112 text
Frameworks
Tooling
Community
Documentation
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
Helping you navigate and discover the ecosystem
Slide 115
Slide 115 text
Use-Cases and Best practices
Slide 116
Slide 116 text
Backed by community content
Slide 117
Slide 117 text
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.
Slide 118
Slide 118 text
This is just the start.
We would love to see your contribution.
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
Frameworks-specific Integrations and Documentation
Slide 122
Slide 122 text
WEEKLY
Slide 123
Slide 123 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
• Starting next week
WEEKLY
Slide 124
Slide 124 text
@Hotwire_Weekly
@[email protected]
Hotwire Weekly
Sign up on hotwire.io/newsletter
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
Future and Vision
Slide 127
Slide 127 text
github.com/sponsors/marcoroth
Slide 128
Slide 128 text
Appreciations
Sam Stephenson Javan Makhmali
Slide 129
Slide 129 text
Stickers