Rails Hotwire, Turbo & Stimulus: Best Webpacker Alternatives

The popular web framework Ruby on Rails gives programmers a robust collection of tools for creating web apps.

However, when it comes to handling client-side code, such as JavaScript, developers often counter many difficulties while working with Rails. 

When it comes to maintaining client-side code in a Rails application in the past, Webpacker has been the most widely used option. However, Rails 7 no longer ships with Webpacker.

In our previous article, we talked about a couple of ways you can migrate away from Webpacker when you upgrade to Rails 7.

Fortunately, there are now a number of Webpacker substitutes that offer a more streamlined and effective method of managing client-side code in a Rails application.

Hotwire, Turbo, and Stimulus are three popular substitutes.

Let’s go through the three technologies in detail and see how they are an alternative to Webpacker.

For a quick intro to Rails, Turbo, and Stimulus, watch the following video by Mix & Go.

First of all, what is Webpacker?

Webpacker is a gem that makes it simpler to use contemporary JavaScript syntax and libraries like React or Vue.js.

It does this by integrating the Webpack module bundler with a Ruby on Rails application.

Install the webpacker gem and set up your Rails project to utilize Webpacker as the default JavaScript compiler before you can begin using Webpacker.

Here is an example of how to use Webpacker to create a new React component:

rails webpacker:react MyComponent

A new React component will be created and stored in the app/javascript/packs/my component.jsx file. Next, you can call the component in Rails views by using the javascript pack tag helper:

<%= javascript_pack_tag 'my_component' %>

The JavaScript code for your React component will then be compiled by Webpacker and included in the output HTML that is generated.

Nevertheless, installing Webpacker can be a little challenging and time-consuming, and it occasionally needs extra dependencies and configuration.

Because of this, it is vital to carefully assess whether Webpacker is the best choice for your unique requirements because Webpacker can increase the size and complexity of your application.

What is Hotwire?

Hotwire is a new set of tools that makes it possible to create cutting-edge web applications without using traditional JavaScript frameworks.

It has received a lot of attention in the field of web development due to its usefulness and simplicity. Basecamp, the company that created Ruby on Rails, created it.

JavaScript sprinkles and HTML rendered by a server form the basis of Hotwire. Instead of using client-side JavaScript to change the user interface, server-rendered HTML is HTML that is generated on the server and delivered to the client as a complete page.

Then, rather than a full-fledged JavaScript framework, JavaScript sprinkles are used to augment the website with interactivity and dynamic behavior.

Hotwire, which is based on Rails, provides a simple and approachable way to develop cutting-edge, dynamic Internet applications.

Here's an example of how to make a simple form with Hotwire:

<%= form_with model: @user, local: true do |form| %>

  <div class="field">

    <%= form.label :email %>

    <%= form.email_field :email %>

  </div>

  <div class="field">

    <%= form.label :password %>

    <%= form.password_field :password %>

  </div>

  <div class="actions">

    <%= form.submit 'Sign up', data: { turbo: 'false' } %>

  </div>

<% end %>

This example creates a form for a user object using a form with, and we also give the submit button a turbo: false data property. This feature instructs Turbo to turn off Turbo Drive, a Hotwire component that enables smooth page switching in web applications.

If this property is set to false, an ordinary full-page refresh will be used to submit the form rather than an AJAX call powered by Hotwire.

What is Turbo?

Turbo is a standalone library that was created by Basecamp as part of the Hotwire suite of tools. It offers a quick and easy approach to adding client-side modifications to a web application without the use of a complex JavaScript framework.

Without the requirement for a complete page reload, Turbo can be used to add interactivity and dynamic behavior to a page. It is meant to integrate smoothly with server-rendered HTML.

Turbo Drive, one of the main components of Turbo, enables web applications to provide continuous page navigation without the need to completely refresh the page. Here's a code example of how to construct a link in Turbo Drive that loads a new page without a full refresh:

<%= link_to 'Click me', posts_path, data: { turbo: true } %>

In this example, we're using link_to to generate a link to the posts_path, and we're also adding a turbo: true data attribute to the link. This attribute tells Turbo to handle the link click via an AJAX request and to replace the current page content with the content from the new page.

What is Stimulus?

Stimulus is a lightweight JavaScript framework that was created by Basecamp as part of the Hotwire suite of tools.

It offers a straightforward and understandable method for including dynamic behavior and interactivity on a web page without the requirement for a full-fledged JavaScript framework.

Stimulus can be used to improve the functionality of a web application with little additional code and work because it is made to integrate perfectly with server-rendered HTML.

Stimulus' emphasis on using HTML properties to bind behavior to page elements is one of its standout characteristics. Here's an example of how to make a straightforward tooltip using Stimulus:

<button data-controller="tooltip" data-tooltip-content="Hello, world!">Hover over me</button>

<div data-tooltip-target="tooltip"></div>

In this example, we're instructing Stimulus to create a new controller for the button element and to specify the tooltip content by using the data-controller and data-tooltip-content properties.

We're also using the data-tooltip-target attribute to tell Stimulus where to insert the tooltip element.

Hotwire, Turbo, and Stimulus—are these good alternatives to Webpacker?

While Webpacker is a more traditional approach to building JavaScript applications, Hotwire, Turbo, and Stimulus offer a more lightweight and streamlined approach to achieving similar functionality.

These tools concentrate on server-side rendering, which is one of the key distinctions between them and Webpacker. Hotwire, Turbo, and Stimulus are made to interact with server-rendered HTML, whereas Webpacker is primarily made to compile and bundle client-side JavaScript code.

This means that these tools may be used to develop incredibly interactive and dynamic online apps while still reaping the benefits of server-side rendering's improved performance and SEO.

Turbo and Stimulus are part of Hotwire, which also has a selection of pre-made UI components and server-side rendering capability. Client-side rendering and a collection of utilities for controlling client-side state are both offered by the independent library Turbo.

Stimulus is a compact JavaScript framework that focuses on exploiting HTML characteristics to give web pages interactivity and dynamic behavior.

Hotwire, Turbo, and Stimulus provide an alternative to the conventional Webpacker approach that can make it simpler and more effective to build highly interactive and dynamic web applications in a Rails environment by utilizing the power of server-side rendering and a more streamlined method of creating JavaScript-driven web applications.

In conclusion

While Webpacker remains a popular tool for building JavaScript-driven web applications in a Rails environment, Hotwire, Turbo & Stimulus offer viable alternatives that are well worth considering.

These tools can offer a variety of advantages that can help you build better web apps more quickly and effectively, whether you're seeking increased performance or a more effective development workflow.

About Learn Enough

Our meticulously crafted course at Learn Enough will take you from a beginner to a professional-level developer.

The Ruby on Rails Tutorial, the premier introduction to web development with Rails for more than ten years, is a part of every Learn Enough All Access subscription.

If you are a manager of a development team, Learn Enough for Teams will improve the abilities of your junior developers and swiftly catch your senior engineers up with the most recent Ruby on Rails features.

Start your free 7-day trial for all-access right away!