⚡️ Hotwire dev newsletter - September 2023 edition

Welcome back to the ⚡️ Hotwire dev newsletter!

Two very exciting announcements this month: Rails 7.1 beta and Strada are here. 🥳

Check out the announcements below along with the premiere of a Strada section of the newsletter. What do you think of the emoji? 🌉

I’ve spent most of the last month working on my Turbo Native talk at Rails World. I can’t believe I’m presenting next week! If you’re there come say hi – I’d love to meet you.

When I get back I’m thinking of doing another workshop, too. Something a bit more streamlined and affordable than before. Two hours of hands-on Turbo Native training for $99 covering a basic integration, authentication, and Strada.

Email me to let me know you’re interested! I’m figuring out dates soon.

📣 Announcements

Rails 7.1 beta

The first beta for Rails 7.1 is here with a lot of exciting features. I’m most excited about the new authentication-related additions which make it easier than ever to roll your own authentication. All without third-party libraries! 💪

Check out the full post for details on a default Dockerfile, async queries, and more.

Strada launch

After waiting for what feels like forever, I’m excited to finally explore the last missing piece of Hotwire. Strada is an optional add-on for Turbo Native apps that enables native components driven by the web. It unlocks progressive enhancement of individual controls without converting entire screens to native.

There’s so much Strada talk this month it gets its own section in the newsletter.

👩‍🏫 Tutorials

Turbo Forms & Drag and Drop in Ruby on Rails

by Avi Flombaum @aviflombaum

Avi breaks down how to build drag and drop in Hotwire without relying on any Javascript plugins and minimal custom JavaScript. The tutorial walks you through creating a new playlist with validation, and even sneaks in a bit of inline Javascript to finesse the UI. Avi promises more on drag and drop functionality in the next part of this series.

Build Drag and Drop with Rails Hotwire

by Maful @mafulprayoga

A different take on drag and drop, Maful uses Sortable to handle the core of the visual and front-end changes. He wraps the library in a Stimulus controller to hand off data to the backend and update the UI. I recommend taking a look at both approaches and see which one works better for you! 💭

Using Turbo Frames for Navigation

by Julian Rubisch @julian_rubisch

Turbo Frames for tabbed navigation seems like a good fit on paper. But there are a few gotchas you should know before diving in. Julian reviews each of them with a quick solution and working demo.

How to break out of a Turbo Frame and redirect?

by Sid Krishnan

Turbo Frames in Rails apps can make redirects tricky, especially after form submissions. Sid outlines three solutions: a meta tag approach that results in two GET requests, a JavaScript method that listens for a specific Turbo event but feels hacky, and a Rails-native method using Turbo Streams for custom actions.

🌉 Strada

Strada officially launched!

by Joe Masilotti @joemasilotti

A first look at Strada, the last missing piece of Hotwire. I explore how it unlocks native components driven by the web in Turbo Native apps. We walk through the demo code in the turbo-ios repo, covering each line of Strada code with examples and screenshots. 📱

Welcome Strada

by Tony Messias @tonysmdev

A quick overview of what Strada is and how it helps Turbo Native developers. There’s also a great annotated screenshot of an HTML-to-native upgraded screen powered by Strada.

Get Started with Strada! A First Look on iOS

by Miles Woodroffe @tapster

A deeper dive, Miles walks through building a native menu on iOS powered by HTML and Strada. He copies some of the example code and shows how to integrate it into a Rails backend, instead of the Express.js code used in the demo apps.

📱 Turbo Native

Turbo Native Directory

by Rob Zolkos @robzolkos

16 apps and counting! Rob put together an open source directory to list iOS and Android apps built with Turbo Native. As this grows I can see it being a great resource when trying to get buy-in for going hybrid. Make sure to add your app if you’ve built one.

turbo-native-initializer

by Lázaro Nixon @lazaronixon

A new command line tool to generate Turbo Native iOS and Android apps! It adds a bunch of new features on top of the demo apps, including SwiftUI + Jetpack Compose UI for native code, data-turbo-confirm handling, and additional navigation flows. 🤩

Password-less SwiftUI Native Auth with Turbo iOS

by Miles Woodroffe @tapster

The conclusion to password-less auth with Rails, Miles follows up with the Turbo Native code needed to get this working on iOS. You’ll build a native authentication screen written in SwiftUI. And since its native, you have full control to make authenticated network requests outside of the Turbo web lifecycle.

Turbo Native: When to upgrade screens to native?

by Joe Masilotti @joemasilotti

Using Turbo Native for hybrid apps doesn’t mean you have to use web views for every screen; sometimes you might need the higher fidelity of a native screen. There’s no one-size-fits-all approach, and adding native screens can increase complexity and maintenance. When building Turbo Native apps for clients, I use these rough guidelines to help decide whether a screen should be native or web-based.