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

The Future of Rails as a Full-stack Framework P...

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/2023/agenda/day-1/6-marco-roth-session

Marco Roth

October 05, 2023
Tweet

More Decks by Marco Roth

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
  2. RailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not

    Native! by Sam Stephenson https://www.youtube.com/watch?v=SWEts0rlezA
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. We want to use the HTML and the business logic

    we already have on the backend without having to duplicate anything on the frontend.
  9. Hotwire is not about getting rid of JavaScript. Hotwire is

    about reducing the amount of custom JavaScript you need to write for your application.
  10. 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) } }
  11. 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) } }
  12. 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) } }
  13. 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) } }
  14. useClickOutside useIntersection useHotkeys useHover useMatchMedia useMutation useResize useTargetMutation useVisibility useWindowFocus

    useMemo useWindowResize useDebounce useThrottle useIdle useMeta useTransition useApplication useDispatch
  15. 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
  16. import { Controller } from "@hotwired/stimulus" export default class extends

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

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

    Controller { static targets = ["name"] connect() { console.log("User Profile connected") } }
  19. 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!
  20. 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 ….
  21. .IO

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