Navigating Turbo Native: where to start

People don’t like using web apps on a mobile browser. Installing a PWA can be unclear to an average user. Sometimes you just have to build a mobile app.

Turbo Native is the easiest way to turn your Rails app (that uses responsive CSS) into a mobile (iOS/Android) app.

Turbo Native is a framework for wrapping web apps that use Hotwire/Turbo Drive into mobile (iOS & Android) apps.

Strada is a tool to integrate native (iOS or Android) UI elements in your mobile app. It is just a UI improvement library within the Turbo Native ecosystem. You don’t have to integrate Strada to make your Turbo Native app work.

Resources #

You can browse existing Turbo Native apps in the Turbo Native Directory.

Top resources:

• Hotwire Native screencasts - learn step by step
• Hotwire Native text series - same as above, but in text
• Gem hotwire_native_rails - generate helpers to make your Rails app ready for Native

Conference talks worth watching:

• Intro to Hotwire Native - Rails World 2024, Yaroslav Shmarov
• Joe Masilotti - Just enough Turbo Native to be dangerous - Rails World 2023
• Jay Ohms - Strada: Bridging the web and native worlds - Rails World 2023
• RailsConf 2024 - Insights Gained from Developing a Hybrid Application Using Turbo Native by John Pollard

Blogs about Turbo Native:

• Joe Masilotti
• William Kennedy
• Miles Woodroffe

Youtube playlists:

• Joe Masilotti
• William Kennedy
• Indigo Tech

Templates/example apps:

• Official demo app
• Open source Daily Log
• Open source Northwind
• Paid Jumpstart Pro iOS - has bottom tab navigation, push notifications, native sign up screen, can integrate google oauth. This is not a Jumpstart endorsement.

Joe Masilotti Discord

Before you write any code #

1. Download Xcode - the app for developing iOS apps.
2. Clone hotwired/turbo-ios, run open Demo/Demo.xcodeproj/.
3. Play around with the example native app

Get started coding! #

1. Run your rails s on any Rails 7 app that has Turbo Drive enabled
2. Follow the Quick Start Guide
3. Or even better, use the Quick Start Guide from the Turbo Navigator branch. Hopefully this gets merged soon!
4. Set URL in SceneDelegate.swift to http://localhost:3000 and see how your app looks on mobile!

That’s a good start!