This episode is for subscribers only.

By subscribing you will get access to all the videos and source code. You also support me to create more content.

Gem Hotwire Native Rails - convert your Rails app into Native VERY FAST | SupeRails #219

08/01/2025
Pro
bridge (Strada) hotwire native

Quick recap

Yaro discussed the use of Hotwire Native, a tool for wrapping web applications into mobile applications, and demonstrated how to use the Hotwire Native Rails gem to add helpers, routes, and controllers to a Rails application. He also explored the implementation of native tabs, user registration, path configuration, and the functionality of a mobile app. Lastly, Yaro showcased various features of a Rails application enhanced with the Turbo Native iOS gem, which enables creating mobile apps from web apps.

Next steps

Meeting attendees to try using Hotwire Native for converting their Rails applications into mobile apps.
Developers to explore the Hotwire Native Rails gem for additional helpers and components when building mobile-friendly Rails apps.
Developers to consider using Yaro's fork of the Hotwire Native iOS demo application for additional out-of-the-box behaviors.
Rails developers to implement proper navigation patterns, such as using turbo-action replace, when converting web apps to mobile.
Developers to utilize bridge components like Button, Form, and Overflow Menu for native-like interactions in mobile apps.
Rails developers to use the device format concern for rendering different templates for mobile and web versions of their apps.
Developers to explore and implement the Review Prompt controller for requesting app store reviews from users.

Summary

Exploring Hotwire Native for Rails

Yaro discussed the use of Hotwire Native, a tool for wrapping web applications into mobile applications. He shared his experience with the tool, including tips from various talks and articles. Yaro also introduced the Hotwire Native Rails gem, which adds helpers, routes, and controllers to a Rails application for easier conversion into a native application. He demonstrated how to use the gem by running a Rails application locally and rendering it in Hotwire Native. Yaro also mentioned the need for additional behaviors and improvements, such as tab navigation and handling links within the app. He ended the conversation by running the application on his branch, which included additional bridge components and tab navigation.

Implementing Native Tabs in iOS App

Yaro discussed the implementation of native tabs in an application. He explained that the tabs are defined in the iOS application's scene controller and can lead to different paths. He demonstrated how to update the paths of the tabs without repackaging the iOS application, allowing for changes to be made without going through review rules. Yaro also mentioned the ability to change the system name for icons using SF Symbols and the potential to open the app to find icons. He concluded by highlighting the advantage of having tabs with the context of the current user.

Mobile App User Registration and Path

Yaro discussed the functionality of a mobile app, focusing on user registration and path configuration. He demonstrated how to redirect users to edit user registration paths and how to handle confirmation models. Yaro also explained how to configure the app's path, including which behaviors should open as a model and which pages can be refreshed. He highlighted the importance of not stacking navigation from a signed-in page to another signed-in page, and demonstrated how to replace the default navigation with a custom one. Yaro also mentioned the need to generate device views for using device in Rails.

Hotwire Native Rails Implementation

Yaro discussed the implementation of hotwire native rails in their application. He explained how to replace turbo actions only on mobile and not on the web, using the'replace_if_native' helper provided by the hotwire native rails gem. Yaro also demonstrated how to hide certain views in mobile and have them visible in the web, using the 'turbo_native_app' helper. He emphasized the need for different UI elements on mobile compared to the web, such as the native tab bar and header. Yaro concluded by stating that the 'turbo_native_*' helpers would not be deprecated.

Setting Page Titles for Application

Yaro discussed the importance of having different page titles for various pages in their application. He explained that the page title should reflect the organization name, not the application name. Yaro demonstrated how to set the page title in the controller and in the view using content for hotwire native title. He also noted that the page title currently only works with the native app and suggested adding it to the web app as well. Yaro concluded by emphasizing the need to set titles for each view of the application.

Implementing New Feature and Components

Yaro discussed the implementation of a new feature in their system, focusing on the use of native components and the integration of Hotwire Native Rails. He explained how to add a new organization button to the native navigation bar, and how to hide certain elements on the web version but not on the mobile version. Yaro also demonstrated how to use the Bridge Form com