Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Introduction to Hotwire

Avatar for Onur Ozer Onur Ozer
October 11, 2023
Programming
93
0

Introduction to Hotwire

Avatar for Onur Ozer

Onur Ozer

October 11, 2023

More Decks by Onur Ozer

See All by Onur Ozer
Breaking Rules to Ship Products: A Beginner's Rails Journey
Avatar for Onur Ozer onurozer
0
64
From Ruby to Revenue: Mastering Marketing for Developers
Avatar for Onur Ozer onurozer
0
33
Foundations of Marketing
Avatar for Onur Ozer onurozer
0
37

Other Decks in Programming

See All in Programming
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
230
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
5.7k
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
3
490
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
0
360
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
Avatar for Shota Nemoto shorty5121
0
910
Claude Codeを組織的に動かして月400PRを実現した話
Avatar for happy_ryo happy_ryo
0
260
Swift愛好会と私（ウホーイ） / Swift Fan Club and Uhooi
Avatar for uhooi uhooi
0
150
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
520
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
3
280
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
150
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
160
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
7
2.7k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
520
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
400
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
800
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
240
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
360
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
300
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
460
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k

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/