Working the hotrails.dev tutorial - Chapter 0

All software engineers have limitations and one of my primary limitations is – and always has been – front end stuff. The latest innovation in the Rails world for front end stuff is Turbo and Hotwire which give you the advantages of a reactive, SPA like application without:

• React
• Vue
• Crazy amounts of JavaScript

If you’ve ever looked at Basecamp and wondered how the (comparatively) tiny BaseCamp team can deliver such great performance coupled with the ability to deliver BaseCamp onto multiple mobile devices, well, the answer is HotWire and Turbo (tacked onto the underlying overwhelming advantages of Rails).

I’ve been casting about for some time for a way to grok HotWire and Turbo and my buddy Nick Janetakis pointed me at HotRails.dev which is an ASTONISHINGLY GOOD, FANTASTIC, WONDERFUL tutorial. Seriously. Go there NOW and stop reading this.

This series of blog posts – one per chapter in the tutorial – is my attempt to take notes and better understand his already good writing.

About the Tutorial and My Incarnation of It

The HotRails.dev tutorial is around building a “quote editor” i.e. a tool for preparing a master / detail record system. My version of this is centered around meal planning but it is the same kind of master / detail plan.

Notes on Chapter 0 - Turbo Rails Introduction

Here are my take aways from Chapter 0:

• Links and form submissions are now AJAX requests which become fast from Turbo Drive; This is a zero cost benefit from just having to import the library
• Pages are sliced into different pieces via Turbo Frames. Unlike traditional HTML frames, Turbo Frames have few if any of the limitations of HTML frames and actually support bookmarks. Controllers work in their traditional fashion and with minor changes you can independently load parts of the page.
• Turbo streams allow you to add real time features like notifications or dynamic lists (think bug monitoring)

See also:

• Turbo Drive – improve performance via AJAX loading
• Turbo Frames – slice pages into regions
• Turbo Streams – real time features

Steps:

Create application:

rails new quote-editor --css=sass --javascript=esbuild --database=postgresql

Update Gemfile:

gem "turbo-rails", "~> 1.0"

bin/setup

bin/dev

And with that you should have a stock, vanilla Rails app ready for building with HotWire!

And, as noted above, these are my learning notes – run, don’t walk – over to HotRails.dev and read the actual tutorial.