The Future of Rails as a Full-stack Framework Powered by Hotwire @ Rails World 2023, Amsterdam

Hotwire has revolutionized the way we build interactive web applications using Ruby on Rails. Join us for an insightful session that explores the future of Hotwire and its role in shaping Ruby on Rails as a powerful Full-Stack framework.

We will take an in-depth look at the recent advancements in Hotwire and provide practical demonstrations, implementation insights, useful tools, and guidance on effectively utilizing Stimulus, Turbo and related frameworks.

Marco, the maintainer of Stimulus, StimulusReflex and CableReady, shares his passion for Hotwire and his vision for its advancement. Gain clarity on Hotwire’s purpose, its roadmap, and the exciting possibilities it presents for building advanced, reactive applications. Marco will discuss ideas and concepts, eliminating confusion and promoting cohesion within the Hotwire ecosystem.

Join us to embark on a journey toward a more powerful, unified Hotwire ecosystem, and learn how Ruby on Rails can flourish as a full-stack framework.

https://rubyonrails.org/world/agenda/day-1/6-marco-roth-session

Transcript

1. The Future of Rails as a Full-Stack
   Framework powered by
   Marco Roth
   Full-Stack Developer & Open Source Contributor
   

   View Slide

2. ! Marco Roth
   @marcoroth_
   @marcoroth@ruby.social marcoroth.dev
   @marcoroth
   Full-Stack Developer & Open Source Contributor
   

   View Slide

3. " How many of you have
   heard about Hotwire?
   

   View Slide

4. " How many of are using
   Hotwire in production?
   

   View Slide

5. I ❤ Ruby
   

   View Slide

6. Why stick with Ruby?
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson
    https://www.youtube.com/watch?v=SWEts0rlezA
    

    View Slide

14. View Slide

15. View Slide

16. Stimulus Use
    current.js
    Turbo Power
    StimulusReflex
    CableReady
    Stimulus
    Phlexing
    gem.sh
    Turbo
    Turbo Morph
    

    View Slide

17. View Slide

18. View Slide

19. 2012
    Turbolinks first released Rails 3.2
    

    View Slide

20. 2012
    Turbolinks first released Rails 3.2
    2013 Rails 4.0
    Turbolinks ships per default in Rails
    

    View Slide

21. 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
    

    View Slide

22. 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
    

    View Slide

23. 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
    

    View Slide

24. 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
    

    View Slide

25. 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
    

    View Slide

26. The Hotwire approach isn’t new
    Turbolinks + Stimulus in 2017
    

    View Slide

27. View Slide

28. We want to use the HTML and the
    business logic we already have on
    the backend without having to
    duplicate anything on the frontend.
    

    View Slide

29. Hotwire is not about getting rid of JavaScript.
    Hotwire is about reducing the amount of
    custom JavaScript you need
    to write for your application.
    

    View Slide

30. Ecosystem
    

    View Slide

31. Frameworks
    Tooling
    Community
    Documentation
    

    View Slide

32. Frameworks
    !
    

    View Slide

33. Turbo Stimulus Strada
    

    View Slide

34. View Transitions API + Morphing
    

    View Slide

35. View Slide

36. CableReady::Updatable
    

    View Slide

37. STIMULUS USE
    

    View Slide

38. STIMULUS USE
    Composable mixins to simply Stimulus controllers
    

    View Slide

39. STIMULUS USE
    Composable mixins to simply Stimulus controllers
    The "Standard Library" for Stimulus
    

    View Slide

40. 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)
    }
    }
    

    View Slide

41. 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)
    }
    }
    

    View Slide

42. 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)
    }
    }
    

    View Slide

43. 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)
    }
    }
    

    View Slide

44. View Slide

45. View Slide

46. It sparks joy to write
    unobtrusive JavaScript like this
    

    View Slide

47. useClickOutside useIntersection
    useHotkeys useHover useMatchMedia
    useMutation useResize useTargetMutation
    useVisibility useWindowFocus useMemo
    useWindowResize useDebounce useThrottle
    useIdle useMeta useTransition
    useApplication useDispatch
    

    View Slide

48. Turbo Streams
    

    View Slide

49. append
    prepend
    replace
    update
    remove
    before
    after
    

    View Slide

50. Custom Turbo Stream Actions
    

    View Slide

51. View Slide

52. View Slide

53. 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
    

    View Slide

54. StimulusReflex
    CableReady
    

    View Slide

55. Build reactive applications with the
    Rails tooling you already know and
    love.
    

    View Slide

56. View Slide

57. StimulusReflex 3.5
    CableReady 5.0
    

    View Slide

58. Inspirations from
    Single-Page-Applications
    

    View Slide

59. Coming Soon
    

    View Slide

60. 
    
    
    
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. Validation API
    

    View Slide

65. SKELETONS
    Coming Soon
    

    View Slide

66. View Slide

67. OPTIMISTIC UI
    

    View Slide

68. Optimistic client-side rendering
    Advanced Loading Indicators
    Stashed Turbo Streams
    Pre-rendered Turbo Streams
    Optimistic Stream Updates
    

    View Slide

69. Tools
    "
    

    View Slide

70. Developer Experience
    Improvements in Stimulus
    

    View Slide

71. app/javascript/controllers/user_profile_controller.js
    

    View Slide

72. import { Controller } from "@hotwired/stimulus"
    export default class extends Controller {
    static targets = ["name"]
    connect() {
    console.log("User Profile connected")
    }
    }
    

    View Slide

73. import { Controller } from "@hotwired/stimulus"
    export default class extends Controller {
    static targets = ["name"]
    connect() {
    console.log("User Profile connected")
    }
    }
    

    View Slide

74. import { Controller } from "@hotwired/stimulus"
    export default class extends Controller {
    static targets = ["name"]
    connect() {
    console.log("User Profile connected")
    }
    }
    

    View Slide

75. 
    
    

    View Slide

76. 
    
    

    View Slide

77. 
    
    

    View Slide

78. View Slide

79. View Slide

80. Controllers
    Actions
    Targets
    Values
    Classes
    Outlets
    

    View Slide

81. 
    
    
    

    View Slide

82. 
    
    
    

    View Slide

83. 
    
    
    

    View Slide

84. Can we do better?
    

    View Slide

85. Beta
    Stimulus LSP
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. 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!
     

     View Slide

101. Download Beta Today
     

     View Slide

102. View Slide

103. Planned
     Turbo LSP
     

     View Slide

104. #
     Documentation
     

     View Slide

105. $
     Community
     #
     Documentation
     

     View Slide

106. What’s lacking in Hotwire?
     Framework-specific documentation
     In-depth guides
     Discoverability
     Navigating the ecosystem
     Presentation and marketing
     Staying up-to-date
     

     View Slide

107. 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 ….
     

     View Slide

108. View Slide

109. .IO
     

     View Slide

110. .IO
     Community-maintained documentation and resource Hub
     

     View Slide

111. Frameworks
     Tooling
     Community
     Documentation
     

     View Slide

112. View Slide

113. Helping you navigate and discover the ecosystem
     

     View Slide

114. Use-Cases and Best practices
     

     View Slide

115. Backed by community content
     

     View Slide

116. 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.
     

     View Slide

117. This is just the start.
     We would love to see your contribution.
     

     View Slide

118. View Slide

119. View Slide

120. Frameworks-specific Integrations and Documentation
     

     View Slide

121. WEEKLY
     

     View Slide

122. 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
     

     View Slide

123. @Hotwire_Weekly
     @Hotwire_Weekly@ruby.social
     Hotwire Weekly
     Sign up on hotwire.io/newsletter
     

     View Slide

124. View Slide

125. Future and Vision
     

     View Slide

126. github.com/sponsors/marcoroth
     

     View Slide

127. Appreciations
     Sam Stephenson Javan Makhmali
     

     View Slide

128. Stickers
     

     View Slide

129. Thank you $
     @marcoroth_
     @marcoroth@ruby.social
     marcoroth.dev
     @marcoroth
     

     View Slide