Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Marco Roth

May 17, 2024
Tweet

More Decks by Marco Roth

Other Decks in Programming

Transcript

  1. 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
  2. X

  3. $

  4. %

  5. We want to use the HTML and the business logic

    we already have on the backend
  6. Hotwire is not about getting rid of JavaScript. Hotwire is

    about reducing the amount of application-specific JavaScript
  7. 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
  8. RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not

    Native! by Sam Stephenson https://www.youtube.com/watch?v=SWEts0rlezA
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. import { Controller } from "@hotwired/stimulus" export default class extends

    Controller { connect() { console.log("User Profile connected") } }
  17. import { Controller } from "@hotwired/stimulus" export default class extends

    Controller { connect() { console.log("User Profile connected") } }
  18. import { Controller } from "@hotwired/stimulus" export default class extends

    Controller { connect() { console.log("User Profile connected") } }
  19. <%= 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
  20. # 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
  21. $ stimulus-lint Stimulus Lint is inspecting 25 files ........................ 25

    files inspected, 0 offenses detected, 0 offenses autocorrectable
  22. 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 ….
  23. 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.
  24. The framework is not worth anything if people do not

    know about it and can not learn about it.
  25. 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
  26. My wish is that we as a community can continue

    pushing what’s possible with Hotwire.
  27. Optimistic UI Optimistic client-side rendering "Frameless"-Turbo Frames Partial Page Morph

    Updates Independent Morphing Plugins/Extensibility Web Components PWA Better React-compatibility