Introduction to Hotwire

Transcript

1. Onur Ozer Founder, Simple Matters Introduction to Hotwire ⚡ Ruby Singapore Meetup, Sep 2023
2. My modern web development journey
3. (╯°□°）╯︵ ┻━┻
4. Rails and Javascript Prototype.js
 Script.aculo.us
 
 Rails 1 2005 jQuery
 Co ff eescript
 
 Rails 3 2010 Webpacker
 
 Rails 6 2019 importmaps
 
 Rails 7 2021 Turbolinks 2015 ActionCable 2016 Stimulus.js 2018
5. How do you build modern web apps? • That are fast and responsive • With a simple, productive work fl ow • While keeping template rendering on the server • Without introducing additional complexity
6. Traditional Web Apps Rails application HTTP Request HTML Response
7. JS Component Approach JS component AJAX Request JSON Response Rails application
8. Single Page Applications (SPAs) Rails 
 JSON API AJAX Request JSON Response
9. H T M L O V E R T H E W I R E
10. Philosophy • Responsiveness of an SPA without the complexity of an SPA • Reuse partials • Sending HTML instead of JSON
11. Ingredients • Turbo • Turbo Drives • Turbo Frames • Turbo Streams • Stimulus • Strada
12. Turbo Drive Accelerate navigation without full page reload <body> Rails application AJAX GET/POST (Fetch) HTML Response <head>
13. Turbo Frames Partial page updates scoped to individual contexts Rails application AJAX GET/POST HTML Partial (Turbo Frame) Turbo Frame <turbo frame id=“8”>
14. Turbo Streams Update multiple parts of a page in response to a request Rails application AJAX GET/POST HTML Partial (Turbo Streams) Turbo Stream <turbo stream 
 action=“replace” target=“content"> Turbo Stream 
 <turbo stream action=“replace” target=“header”>
15. Turbo Streams Update multiple parts of a page in response to a request Rails application (Action Cable) WebSocket Connection WebSocket Connection
16. Stimulus Organise Javascript with controllers and actions HTML Element HTML Element Stimulus Controller Stimulus Controller
17. Demo: Todo App https://github.com/onurozer/hotwire-introduction
18. Getting Started • Rails 7 - comes by default • Rails 6 - install turbo-rails and stimulus-rails gems
 https://github.com/hotwired/turbo-rails#installation 
 https://github.com/hotwired/stimulus-rails#installing-with-installer • Others - install turbo and stimulus npm packages
 https://www.npmjs.com/package/@hotwired/turbo
 https://www.npmjs.com/package/stimulus

19. Resources • Hotwire for Rails Developers Course
 https://pragmaticstudio.com/hotwire-rails • Turbo Rails Tutorial
 https://www.hotrails.dev/ • Hotwire Devs Newsletter
 https://masilotti.com/hotwire/ • Rails + Hotwire Jobs
 https://railshotwirejobs.com/
20. Thank You • Connect on LinkedIn
 https://www.linkedin.com/in/onurozer/ • Connect on Mastodon
 https://ruby.social/@onurozer • My personal website
 https://onurozer.me/ • My company
 https://simplematters.co/