Hotwire Native for Rails Developers

Build Native Mobile Apps Using Your Server

by Joe Masilotti

Create intuitive and maintainable mobile apps powered by the technology you already know, Ruby on Rails. Add Hotwire Native to your new or existing Rails app and start creating native iOS and Android applications. You’ll learn how to enhance your apps, progressively adding native components and screens. Bring your existing or new web apps to a much wider mobile audience, and make the app look and feel native to their platform.

You know how to create a great web app using Rails. But how do you also create native apps for iOS and Android when you don’t want to reimplement everything in Swift and Kotlin? Fully native iOS and Android apps are expensive to build and even more expensive to maintain. And, of course, you have to deal with the app stores.

Hotwire Native builds hybrid mobile apps by rendering HTML directly from your Rails server. Build your screens once and deploy across web, iOS, and Android simultaneously. No repackaging apps or resubmitting to app stores.

You’ll build a hiking tracker app on iOS and Android. Start by creating a bare-bones app and build new features into it with each new chapter. Set up remote path configuration to navigate gracefully and route forms efficiently. Determine when it makes sense to upgrade your screens to native. Build native components and screens to enhance the apps progressively, with full access to iOS and Android SDKs and APIs, such as push notifications and native maps. And deploy to physical devices for beta testing.

You’ll drive the content and behavior of your apps directly from the server, without changing any native code. And you’ll keep your business logic in one place, making your apps more resilient to future changes and easier to maintain. Along the way, you’ll learn just enough Swift and Kotlin to confidently build functional, user-friendly mobile apps.

• macOS with Ruby 3.2.2, SQLite, Xcode 16, and Android Studio Ladybug.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• B1.0 2025/01/07

Note: Contents and extracts of beta books will change as the book is developed.

• Preface
  • The Problem With Native Apps
  • The Hybrid Solution
  • Prerequisites
  • How This Book is Structured
  • Need Help?
• Build Your First Hotwire Native Apps excerpt
  • Build a Hotwire Native iOS App
  • Build a Hotwire Native Android App
  • What’s Next?
• Control Your Apps with Rails excerpt
  • Dynamically Set a Native Title via HTML
  • Hide the Navigation Bar with Conditional Ruby
  • Hide the Navigation Bar with CSS
  • Add Back in Missing Elements
  • Keep Users Signed in Between App Launches
  • Access the User’s Camera and Photos on iOS
  • Access the User’s Camera and Photos on Android
  • What’s Next?
• Navigate Gracefully with Path Configuration
  • Routing Modals
  • Set Up iOS Path Configuration
  • Wire Up the iOS Client
  • Set Up Android Path Configuration
  • Wire up the Android client
  • What’s Next?
• Add a Native Tab Bar
  • Clean Up the iOS Directories
  • Configure Tabs on iOS
  • Clean Up the Android Packages
  • Configure Tabs on Android
  • What’s Next?
• Render Native Screens with SwiftUI excerpt
  • When to Go Native
  • Build a Native Screen with SwiftUI
  • Render a Map with a SwiftUI View
  • Connect the View to Hotwire Native with a View Controller
  • Route the URL via Path Configuration
  • Expose a JSON Endpoint for Structured Hike Data
  • Fetch and Parse the JSON with a Model and View Model
  • What’s Next?
• Render Native Screens with Jetpack Compose
  • Integrating Jetpack Compose with Hotwire Native
  • Build a Jetpack Compose Screen
  • Route the URL via Path Configuration
  • Configure Google Maps with an API Key
  • Add a Map to the View
  • Fetch and Parse the JSON with a Model and View Model
  • What’s Next?
• Build iOS Bridge Components with Swift
  • Install the Hotwire Native Bridge
  • Write the HTML Markup
  • Create a Stimulus Controller
  • Create a Native Component
  • Respond to Button Taps
  • Make the Button Text Dynamic
  • Hide the HTML Button
  • Add a Dynamic Image
  • What’s Next?
• Build Android Bridge Components with Kotlin
  • Create a Native Component
  • Respond to Button Taps
  • Make the Button Text Dynamic
  • Clean Up Button
  • Add a Dynamic Image
• Send Push Notifications with APNS and FCM
  • Notes:
• Deploy to Physical Devices with TestFlight and Internal Testing