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

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

Marco Roth
October 05, 2023

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

Marco Roth

October 05, 2023
Tweet

Other Decks in Programming

Transcript

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

    View full-size slide

  2. ! Marco Roth
    @marcoroth_
    @[email protected] marcoroth.dev
    @marcoroth
    Full-Stack Developer & Open Source Contributor

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Why stick with Ruby?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 2012
    Turbolinks first released Rails 3.2

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  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
    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 full-size slide

  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
    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 full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. Frameworks
    Tooling
    Community
    Documentation

    View full-size slide

  19. Turbo Stimulus Strada

    View full-size slide

  20. View Transitions API + Morphing

    View full-size slide

  21. CableReady::Updatable

    View full-size slide

  22. STIMULUS USE

    View full-size slide

  23. STIMULUS USE
    Composable mixins to simply Stimulus controllers

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. It sparks joy to write
    unobtrusive JavaScript like this

    View full-size slide

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

    View full-size slide

  31. Turbo Streams

    View full-size slide

  32. append
    prepend
    replace
    update
    remove
    before
    after

    View full-size slide

  33. Custom Turbo Stream Actions

    View full-size slide

  34. 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 full-size slide

  35. StimulusReflex
    CableReady

    View full-size slide

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

    View full-size slide

  37. StimulusReflex 3.5
    CableReady 5.0

    View full-size slide

  38. Inspirations from
    Single-Page-Applications

    View full-size slide

  39. Validation API

    View full-size slide

  40. SKELETONS
    Coming Soon

    View full-size slide

  41. OPTIMISTIC UI

    View full-size slide

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

    View full-size slide

  43. Developer Experience
    Improvements in Stimulus

    View full-size slide

  44. app/javascript/controllers/user_profile_controller.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Controllers
    Actions
    Targets
    Values
    Classes
    Outlets

    View full-size slide

  49. Can we do better?

    View full-size slide

  50. Beta
    Stimulus LSP

    View full-size slide

  51. 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 full-size slide

  52. Download Beta Today

    View full-size slide

  53. Planned
    Turbo LSP

    View full-size slide

  54. #
    Documentation

    View full-size slide

  55. $
    Community
    #
    Documentation

    View full-size slide

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

    View full-size slide

  57. 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 full-size slide

  58. .IO
    Community-maintained documentation and resource Hub

    View full-size slide

  59. Frameworks
    Tooling
    Community
    Documentation

    View full-size slide

  60. Helping you navigate and discover the ecosystem

    View full-size slide

  61. Use-Cases and Best practices

    View full-size slide

  62. Backed by community content

    View full-size slide

  63. 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 full-size slide

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

    View full-size slide

  65. Frameworks-specific Integrations and Documentation

    View full-size slide

  66. 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 full-size slide

  67. @Hotwire_Weekly
    @[email protected]
    Hotwire Weekly
    Sign up on hotwire.io/newsletter

    View full-size slide

  68. Future and Vision

    View full-size slide

  69. github.com/sponsors/marcoroth

    View full-size slide

  70. Appreciations
    Sam Stephenson Javan Makhmali

    View full-size slide

  71. Thank you $
    @marcoroth_
    @[email protected]
    marcoroth.dev
    @marcoroth

    View full-size slide