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
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
Avatar for akase244 akase244
0
120
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
Avatar for Riku Sakamoto riku_sakamoto
0
270
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
190
AI駆動開発にグラフDBを重ねてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
770
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
540
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
120
MIZARU@SPAJAM2026 第二回予選
Avatar for drama 1901drama
0
110
[DroidKaigi 2026] Bring your own phones to Gradle Managed Devices
Avatar for Yury f2lk
0
110
GKE アップグレード前に知っておきたい Blue/Green と PDB の関係
Avatar for Sota Takaki stkk
0
160
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
3
510
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
120
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
5.7k

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
520
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.8k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
230
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.9k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
360
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k

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/