⚡️ Hotwire dev newsletter - June 2023 edition

Welcome back to the ⚡️ Hotwire dev newsletter! Wild to think I’ve been running this for over two years now. The first edition feels like just yesterday. 🥲

Last week, tickets to Rails World were released and all 650 sold out in 45 minutes. I’m still waiting to hear if my talk was accepted so I didn’t try to get a ticket yet. But congratulations to everyone who managed to snag one – hopefully I will see you in October.

What gets me most excited about Rails World is that Jay Ohms is finally presenting Strada! This framework promises to bridge the gap to Turbo Native apps. And I can’t wait to see what the team has been cooking up for the past few years.

And if you want to learn about Turbo Native before October I’ve got you covered. I’m running another workshop on July 18! Learn how to bring your Ruby on Rails app to iOS in this 3-hour interactive workshop on Turbo Native. Tickets are limited to 20 attendees and went on sale this morning. Buy your ticket here.

Turbo Frames and Streams

Learn Hotwire by building the simplest possible Hotwire and Ruby on Rails app — a beginners guide

by Harrison Broadbent @hrrsnbbnt

We’re going back to basics with this tutorial. This is a great place to start if you are still wrapping your head around what exactly Hotwire is. Harrison walks through everything you need to get a new Rails app working with a live-updating Turbo Stream.

There’s also a section at the bottom for more advanced streaming: sending updates only to a specific user.

Hotwire use case with sample code

by Moses Gathuku @Gathukumose

Blog posts are great but you usually need to build the entire thing yourself before you can play with it. This new site from Moses flips that - giving you a demo to play with first. And the code second.

There are already Hotwire examples for inline editing, modals, typeahead search, and lazy loading. And more are expected to launch soon.

Maintaining State with Turbo Frames in Ruby on Rails 7

by Deanin @Deaniocom

To persist elements between page loads you can add data-turbo-permanent. For example, to maintain the number of items a user has added to their shopping cart even when they navigate back.

But I’ll admit, I’ve always struggled to use this attribute. And now I know why. Turns out there are a ton of gotchas you need to be aware of! Lucky for us, this video covers them all.

Pagy Gem with Turbo for Easy Infinite Scrolling

by Deanin @Deaniocom

This isn’t the first time I’ve linked to a pagination tutorial but it does feel like the most straightforward. The “magic” is telling Pagy to load the next page via a Turbo Stream, not HTML. With a stream we can leverage the power of Turbo without writing any additional infrastructure or JavaScript.

Stimulus

Practical Stimulus: Capture User Input

by Akshay Khot

The first article in a new series on Stimulus, this one starts with the basics. If you’ve never worked with the framework before this is a great place to start. You build out the functionality with vanilla JavaScript before replacing it with a Stimulus controller, giving you a great side-by-side comparison of the two approaches.

Practical Stimulus: How to Toggle CSS Classes

by Akshay Khot

The first article in this series (linked above) covered the basic building blocks of Stimulus, targets and actions. This one goes a step farther and dives into the classes API. Which is useful for keeping CSS class names out of your JavaScript by only referencing them in your HTML.

Reactive Stimulus Values in Ruby on Rails 7

by Deanin @Deaniocom

Continuing the trend of walking through the Stimulus API, this video covers values. Values read, write, and observe data attributes on a controller’s element. They are useful for passing information from the DOM to JavaScript.

Turbo Native

Turbo Native in 15 minutes

by Joe Masilotti @joemasilotti

Learn how to get up and running with Turbo Native on iOS in 15 minutes. All you need to get started is a free copy of Xcode downloaded from the App Store.

I walk through adding the Swift package, wiring up a navigation controller, and handling link clicks. I also show how you can make your web content feel a little more at home on iOS.

3 Useful Tricks When Working With Turbo Android

by William Kennedy @_williamkennedy

William wraps up his 3-part series on Turbo Android with some tips on being a more effective native developer. He covers how to debug the web view, where to keep your business logic, and a clever trick to render Android-specific HTML from your server.

motion-turbo-ios

by Petrik de Heus @four54

RubyMotion enables cross-platform native apps for iOS, Android and OS X, written in Ruby. And now you can leverage the power of Turbo Native to help render your Rails HTML content on iOS with motion-turbo-ios.

Disclaimer: I’ve never used RubyMotion myself but it sounds promising!

JavaScript alerts in Turbo Native

by Joe Masilotti @joemasilotti

Last week my client ran into an issue with their Turbo Native app. They couldn’t figure out why their Turbo confirmation dialog worked on mobile web but not in the app.

This quick tutorial explains how to handle data-turbo-confirm in your iOS app so you can render native Swift alerts directly from your Rails code.