Hotwire
To gain a clearer understanding and a broader perspective on Hotwire Native, let’s start by discussing Hotwire, the libraries it comprises, and the role each plays in building modern applications using Ruby on Rails.
What is Hotwire?
Hotwire (HTML Over The Wire) is a framework proposed by the Basecamp team to simplify how we create web applications. It enables the development of modern, fast, and interactive interfaces without writing large amounts of JavaScript or relying on frameworks like React, Vue, or Angular.
The core idea of Hotwire is to send HTML directly from the server to the user interface, reducing unnecessary processing in the browser. This is achieved through its two main libraries:
1 - Turbo
Turbo is the heart of Hotwire. It optimizes user experience by enabling faster page loads and efficiently updating parts of the interface. Turbo is divided into three key components:
Turbo Drive: Simplifies navigation by preventing full-page reloads. It intercepts links and form submissions, loading HTML in the background and updating only the necessary parts of the page.
Turbo Frames: Allows specific sections of a page to be updated without reloading the entire layout. It works as “windows” in the interface that receive HTML fragments from the server.
Turbo Streams: Enables real-time updates to the interface using WebSockets or HTTP requests. Turbo Streams are perfect for dynamically adding, removing, or updating elements on the page.
With Turbo, the experience becomes faster and smoother, while the backend remains responsible for generating the HTML.
2 - Stimulus
Stimulus is a lightweight JavaScript framework that allows you to add interactive behaviors in a simple and organized way. It doesn’t compete with Turbo but complements it, enabling you to add "layers" of interactivity where needed.
3 - Hotwire Native: Bringing Hotwire to Native Apps
Hotwire Native extends Hotwire to mobile applications, enabling the integration of a Rails application with native apps (iOS and Android).
Instead of rebuilding the entire logic for a native app, Hotwire Native leverages Turbo to deliver HTML directly to the app using WebViews (a browser embedded within the app). This allows Rails to remain the core of the application, while the mobile app simply renders and supplements it with native functionalities.
How does Hotwire Native work?
The process is straightforward: Rails continues to handle requests and send HTML, just like in web applications.
The mobile app (iOS or Android) uses Turbo Native to display the HTML within a WebView.
Native functionalities (e.g., modals, buttons, or animations) are implemented directly in the native app and can be triggered as needed.
Why use Hotwire Native?
Reuses Rails Logic: Keeps all server-side logic in Rails, avoiding code duplication.
Reduced Complexity: Eliminates the need for a separate backend or complex REST/GraphQL APIs.
Good Hybrid Experience: Provides apps that feel native with good performance for most use cases.
Faster Development: A Rails codebase can serve both web and mobile applications.
In Summary
Hotwire is a framework that replaces JavaScript/JSON with HTML to streamline and speed up web applications.
Turbo, part of Hotwire, delivers HTML fragments from the server to the interface.
Hotwire Native bridges Hotwire to mobile apps, using WebViews and native functionalities to deliver a powerful hybrid experience.