⚡️ Hotwire dev newsletter - March 2023 edition

Welcome back to the ⚡️ Hotwire dev newsletter!

This month we have an update from The Rails Foundation, a new open-source project that simplifies navigation flows in Turbo Native apps, and the launch of The Rails Changelog podcast. Also, a bunch of tutorials and videos to keep you up to date with the latest in Rails and Hotwire development.

My favorites this month include Andrea’s 30 Days of Hotwire tips with a ton of practical use cases, Akshay’s walk through progressively enhancing a Rails app using Hotwire, and a new way to do nested forms from Deanin.

Also, if you’re looking for some help with Turbo Native I’m running office hours today! Drop by with your questions – I’d love to help. 10am PT / 1pm ET for about an hour - register here.

📣 Announcements

What to expect from the Rails Foundation

by Amanda Brooke Perino @AmandaBPerino

The executive director of The Rails Foundation gave a lightning talk covering what’s coming in the next year. Documentation is going to include more beginner tutorials and will start to explore other mediums like video, a Rails user conference is being planned in Europe, and solidifying ideas to bring standard Ruby/Rails curriculum to bootcamps and higher education.

Amanda also mentioned that her inbox is open and she is eager for feedback. If you have suggestions then send her an email!

Introducing Turbo Navigator

by Joe Masilotti @joemasilotti

I launched a new open source project that handles common navigation flows in Turbo Native apps. 📱 It consolidates a lot of boilerplate I’ve built up over the years into a single, drop-in class.

I demoed how to integrate it into a new Xcode project on a recent livestream. I’m still looking for help battle testing this in real-world apps - if you give it a try let me know!

The Rails Changelog podcast

by Emmanuel Hayford @siaw23

Emmanuel, the co-editor of the This Week in Rails newsletter, launched a new podcast for recent changes to the Rails framework. This pilot episode covers the motivation for the podcast and how the name came about. Also, 2 full minutes of horns in the outro tune! 🎺

👩‍🎓 Tutorials

30 Days of Hotwire tips

by Andrea @ilrock__

This thread from Andrea is a goldmine of Hotwire tips! Modals without JavaScript, multi select input fields, infinite scrolling, dynamic nested forms… even real-time chat! Check this out if you want to be inspired on how to integrate Hotwire into your Rails app.

Progressive Application Development with Hotwire

by Akshay Khot

A monster 4000+ word article to get you to fall in love with Hotwire. If for some reason you hadn’t already! 😆

Akshay walks through how to add dynamic Hotwire features to a simple counter. It starts off with a full page reload and slowly gets progressively enhanced with Turbo Drive, Frames, and then Streams.

I think the mindset of this article is the most important take-away: “How can we start from the absolute baseline? and then progressively enhance your application one step at a time.”

Search and Select Multiple with Rails and Hotwire

by Phil Reynolds @PurpleRiver_Dev

pg_search + pagy + a Turbo Frame + Stimulus = ❤️

Phil walks through building a form where folks can search for and select multiple users. Search and pagination are outsourced to pg_search and pagy and the UI is powered by a single Turbo Frame.

There is a fair amount of Stimulus code to get the stylings working. I wonder if this could be improved with a second Turbo Frame? 🤔 Let Phil know if you have any ideas!

Using ViewComponents with Turbo

by Jason York

If your View Component has a turbo_frame how can you update it with new data from the server? Jason answers this question with tag.turbo_frame to get around a known issue and a bit of boilerplate in the model to broadcast the stream correctly.

🎥 Videos

Stimulus Nested Forms

by Deanin @Deaniocom

I usually reach for cocoon when I need nested forms in Rails but I think this video has convinced me otherwise! With a Stimulus Component we can remove our dependency on jQuery and build something that feels a bit more at home in a Hotwire app. 💪

Auto-submitting Forms & Custom Turbo Stream Actions

by Chris Oliver @excid3

In the latest free video from GoRails, Chris builds a form that automatically submits when a select box is changed… with inline JavaScript! 😱 I like the pragmatism of this approach. Why bring in an entire Stimulus controller if we already have the hook we need from barebones HTML?

The form is then enhanced with a flash success message that hides after 2 seconds - powered by a custom Turbo Stream.

Kredis Live counter, HTTP vs Websocket Turbo Broadcasts

by Yaroslav Shmarov @yarotheslav

Kredis abstract lower level Redis commands with more a Ruby-like syntax and API. Here, Yaroslav uses a counter to manipulate an integer persisted to Redis. The video walks through how to install and manipulate Kredis before displaying it in the UI. Finally, everything is wrapped up with a Turbo Broadcast for real-time updates.