Introduction to Hotwire

Onur Ozer Founder, Simple Matters Introduction to Hotwire ⚡ Ruby
Singapore Meetup, Sep 2023

My modern web development journey

(╯°□°）╯︵ ┻━┻

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

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

Traditional Web Apps Rails application HTTP Request HTML Response

JS Component Approach JS component AJAX Request JSON Response Rails
application

Single Page Applications (SPAs) Rails   JSON API AJAX Request
JSON Response

H T M L O V E R T H
E W I R E

Philosophy • Responsiveness of an SPA without the complexity of
an SPA • Reuse partials • Sending HTML instead of JSON

Ingredients • Turbo • Turbo Drives • Turbo Frames •
Turbo Streams • Stimulus • Strada

Turbo Drive Accelerate navigation without full page reload <body> Rails
application AJAX GET/POST (Fetch) HTML Response <head>

Turbo Frames Partial page updates scoped to individual contexts Rails
application AJAX GET/POST HTML Partial (Turbo Frame) Turbo Frame <turbo frame id=“8”>

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”>

Turbo Streams Update multiple parts of a page in response
to a request Rails application (Action Cable) WebSocket Connection WebSocket Connection

Stimulus Organise Javascript with controllers and actions HTML Element HTML
Element Stimulus Controller Stimulus Controller

Demo: Todo App https://github.com/onurozer/hotwire-introduction

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 

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/

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/

Introduction to Hotwire

Introduction to Hotwire

Onur Ozer

More Decks by Onur Ozer

Other Decks in Programming

Featured

Transcript

Onur Ozer Founder, Simple Matters Introduction to Hotwire ⚡ Ruby

My modern web development journey

(╯°□°）╯︵ ┻━┻

Rails and Javascript Prototype.js  Script.aculo.us    Rails 1 2005 jQuery

How do you build modern web apps? • That are

Traditional Web Apps Rails application HTTP Request HTML Response

JS Component Approach JS component AJAX Request JSON Response Rails

Single Page Applications (SPAs) Rails   JSON API AJAX Request

H T M L O V E R T H

Philosophy • Responsiveness of an SPA without the complexity of

Ingredients • Turbo • Turbo Drives • Turbo Frames •

Turbo Drive Accelerate navigation without full page reload <body> Rails

Turbo Frames Partial page updates scoped to individual contexts Rails

Turbo Streams Update multiple parts of a page in response

Turbo Streams Update multiple parts of a page in response

Stimulus Organise Javascript with controllers and actions HTML Element HTML

Demo: Todo App https://github.com/onurozer/hotwire-introduction

Getting Started • Rails 7 - comes by default •

Resources • Hotwire for Rails Developers Course  https://pragmaticstudio.com/hotwire-rails • Turbo

Thank You • Connect on LinkedIn  https://www.linkedin.com/in/onurozer/ • Connect on