If you’ve been working with Rails, you’ve probably noticed how things are shifting toward a more modern way of building web applications Right?

One of the key players in this change is Hotwire. But what exactly is Hotwire? And why is it such a game-changer for Rails developers?

Let's learn it step by step, in simple terms.

Hotwire is a New Way to Building Web Apps

Hotwire stands for HTML Over The Wire. It’s a framework designed to make web applications feel fast and responsive, much like a single-page application.

However, unlike SPAs that rely heavily on JavaScript frameworks like React or Vue, Hotwire minimizes the need for writing a lot of JavaScript.

Instead, Hotwire focuses on sending HTML (instead of JSON) from the server to update parts of the page.

This approach allows developers to build modern, dynamic applications with less complexity and without the need for a separate front-end framework.

Hotwire simplifies this by reducing the need for client-side logic. It offers the best of both worlds:

  • Speed and interactivity of a single-page app.
  • Simplicity and maintainability of a server-rendered app.

Hotwire Components

Hotwire is made up of three main parts, each with a specific job to do, Let’s understand what they are.:

i) Turbo

Turbo is the main part of Hotwire and takes care of how pages update and how users navigate through the app, making everything feel smooth and fast.

  • Turbo Drive
    It upgrades regular links and forms so that the page updates without fully reloading. It feels like using a single-page app, but you don’t need to write any extra JavaScript.

  • Turbo Frames
    This lets you refresh just small sections of the page instead of the entire thing. It’s like using AJAX but much simpler, and you can do it without touching JavaScript.

  • Turbo Streams
    This feature is all about real-time updates. It uses WebSockets to instantly show changes on the page, making your app feel dynamic and interactive, just like a live chat or a live data feed.

ii) Stimulus

Sometimes, you need a bit of JavaScript to handle user interactions. That’s where Stimulus comes in. It’s a lightweight JavaScript framework designed to work seamlessly with Turbo.

Instead of writing a lot of custom JavaScript, you can use Stimulus to add behavior to your HTML elements in a simple and organized way.

iii) Strada

Strada is still under development, but it’s expected to handle native app features for mobile applications. It aims to bridge the gap between web and native experiences.

How Hotwire Works in a Rails App

Let’s break it down with a simple example:

1. A user submits a form (for example adding a new comment).
2. The form is sent to the server, and Rails processes the request.
3. Instead of returning JSON, Rails responds with a small piece of HTML containing the new comment.
4. Turbo automatically updates the comments section on the page without a full reload.

All of this happens without you writing any JavaScript.

Using Hotwire is a great choice?

Hotwire is a great choice if:

  • You’re building a new Rails app and want modern, interactive features.
  • You want to avoid the complexity of managing a separate front-end framework.
  • You need real-time updates but don’t want to deal with complex WebSocket setups.

However, if your app requires heavy front-end interactions or needs a lot of custom JavaScript, you might still need a traditional JavaScript framework like React or Vue.

Hotwire in Rails

To start using Hotwire in your Rails app, you can install it by running:

bash
bin/rails hotwire:install

This command sets up Turbo and Stimulus in your project, and you can start adding dynamic features right away.

Instead of relying heavily on JavaScript, it sends HTML directly from the server to the browser. This approach reduces complexity and helps you create dynamic, interactive apps without the need for multiple frameworks.

I hope you've learned something. Let me know the feedback in comments below. Thanks

For more information, you can explore the official Hotwire documentation and the Rails Guides.

Comments(0)