Build Blazing-Fast Websites with Hotwire: Say Goodbye to Page Reloads

Table of contents

Hotwire https://hotwired.dev/ streamlines web development by sending small HTML updates for blazing-fast page loads and a smooth user experience. This three-part framework (Turbo, Stimulus, Strada) offers faster websites, lower data usage, and an app-like feel, making it ideal for social media, e-commerce, and any site needing real-time updates.

What is Hotwire?

Hotwire is a cool new way to build websites that makes them feel faster and smoother. It stands for "HTML Over The Wire" and it's all about sending small bits of HTML from the server to your web browser instead of whole pages.
Here's how it works:

• You click a button or link on a website.
• Instead of loading a whole new page, only the part that needs to change gets updated.
• This happens super fast, making the website feel more like a mobile app.

Hotwire has three main parts

Turbo

Speeds up page loads and form submissions.

Example: Imagine clicking a "Like" button on a blog post.
Without Turbo:

• Entire page reloads
• Slow, uses more data

With Turbo:

• Only the like count updates
• Fast, uses less data

Ruby code (Rails controller):

def like
  @post = Post.find(params[:id])
  @post.increment!(:likes_count)
  
  respond_to do |format|
    format.turbo_stream { render turbo_stream: turbo_stream.update("likes_count", @post.likes_count) }
  end
end

Stimulus

Adds interactivity to your HTML with a bit of JavaScript.

Example: A dropdown menu that shows/hides when clicked.

HTML:

<div data-controller="dropdown">
  <button data-action="click->dropdown#toggle">Menu</button>
  <div data-dropdown-target="menu" class="hidden">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

JavaScript (Stimulus controller):

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "menu" ]

  toggle() {
    this.menuTarget.classList.toggle("hidden")
  }
}

Strada

Helps web apps work better with mobile apps.

Example: Sharing content from your web app to social media.

• Web: Uses standard share dialog
• Mobile app: Uses native sharing features

Key benefits

• Faster websites: Pages update instantly
• Less data usage: Only sends necessary HTML
• A smoother experience: Feels like a native app
• Easier development: Simpler code, faster iterations

Why use Hotwire instead of AJAX?

Hotwire simplifies development by reducing JavaScript code, ensuring better performance, and providing a seamless user experience with fewer complexities compared to AJAX.

While Ajax can indeed achieve similar functionality, Hotwire offers some distinct advantages:

Simplicity

• Hotwire requires less JavaScript code than Ajax.
• It works directly with server-rendered HTML, reducing complexity.

Performance

• Hotwire is optimized for sending HTML fragments, potentially reducing payload size.
• It includes automatic page caching and prefetching.

Progressive enhancement

• Hotwire works without JavaScript enabled, improving accessibility.
• Sites degrade gracefully on older browsers.

Native-like experience

• Provides smoother transitions between states.
• Offers a more app-like feel without building a full single-page application (SPA).

Developer productivity

• Allows backend developers to create interactive experiences without extensive JavaScript knowledge.
• Integrates seamlessly with server-side frameworks like Ruby on Rails.

Reduced server load

• Partial page updates can be less taxing on servers compared to full page reloads.

Built-in best practices

• Includes patterns for handling form submissions, redirects, and page updates out of the box.

While Ajax is powerful, Hotwire aims to simplify the development process and improve performance by default. It's particularly beneficial in ecosystems like Ruby on Rails, where it's deeply integrated.

However, the choice between Hotwire and Ajax depends on your specific project needs, team expertise, and existing technology stack.

Hotwire is ideal for

• Social media platforms. Example: Instagram-like photo-sharing app
  • When a user likes a photo, the like count updates instantly without reloading the page.
  • Comments appear in real time as users post them.
  • The feed refreshes with new posts without interrupting the user's scrolling.
• E-commerce sites. Example: Online clothing store
  • Product availability updates in real-time as items sell out.
  • Adding items to the cart doesn't require a page reload.
  • Price and total calculations update instantly when changing quantities.
• Content management systems. Example: News website
  • Article views and share counts update live.
  • Related articles section refreshes based on the user's reading history without page reloads.
  • Comment sections update in real time as new comments are posted.
• Any site needing real-time updates. Example: Live sports score tracker
  • Game scores update instantly as they change.
  • Player statistics refresh in real time during the game.
  • Live commentary feed updates without requiring manual page refreshes.

Getting started with Hotwire in any framework https://hotwire.io/frameworks

By embracing Hotwire, developers can build modern websites that feel responsive and engaging, ultimately leading to happier users and a more successful online presence.