Hotwire Welcomes the New Face of Web Development with HTML Over the Wire

Recent years have witnessed many frameworks come and go. But the popularity of Rails has remained unshaken and, it deserves all the appreciation for that. One of the features behind this success is its ability to evolve and keep up with changing times.

With Hotwire, Rails has solved the age-old problem of the developers by providing them with an easy way to develop without using too much javascript. It lets you easily send HTML over the hotwire instead of JSON.

Further, it also gives you the freedom of using Hotwire as inspiration for your tooling. You can also use its exclusively designed frameworks by the Basecamp team and power HEY that complement each other in working.

This new framework by Basecamp consists of three major elements. These include:

Turbo

Turbo is the main feature of Hotwire. It dramatically decreases the time spent in writing custom Javascript. There are further sub-elements in it. These include:

  • Turbo Drive – It reduces the need for the full page reload by accelerating links and form submissions.
  • Turbo Frames – These work on decomposing pages into individual contexts to make working on navigation and page reloading easy.
  • Turbo Streams – They focus on delivering page changes over WebSocket and SSE. They also use HTML and a set of CRUD-like actions in response to the form submissions.
  • Turbo Native – It comes in handy to make the centre of the majestic monolith the centre of your native iOS and Android apps as well. It also lets you effortlessly toggle the native sections and the web.

Turbo Frames

Hotwire follows an entirely different approach and works by fully rendering HTML. Let us take up an example where we click the button and it goes off. Also, the page will reload with every click, this can be done in three easy steps:

One:

Two

Three:

Turbo frames take over the links or form submissions to the server although the server is not aware of the change as it will get the same request. So it sends a full HTML back. But now, the turbo frame comes into play and looks for a Turbo frame in the HTML. It then reloads only that instead of the entire page.

Additionally, you can easily render the frames by using turbo_frame_tag in views. It will make turning a page reload into a partial page update easier for you.

You can also keep a link to navigate out of the page by using target=”_top” 

Turbo Streams

Turbo streams are another prominent part of Turbo. They send payloads through WebSockets (ActionCable in Rails), even when the client call is not initiated.

Together with Turbo Frames and deep integration into ActiveRecord, they can improve the user experience. Therefore, they making them useful in initiating a fully rendered HTML partial reload to be sent down to a specific Turbo Frame on a page.

When you integrate the hotwire rails, some additions to ActiveRecord are also required. These enable you to send updates to the frontend when ActiveRecord (or ActiveModel) objects change.

Here is a quick example:

Stimulus:

Hotwire is building in a way that it will handle around 80% interactivity. But we can not overlook the situation where you might need JS code. In situations like these, stimulus comes in handy.

Uses

  • This makes it easier to load the first pages quickly, making the development easier and less time-consuming.
  • Hotwire is a powerful contender to get the status of a full-stack platform back to ROR as, before this, most of the developers were using it mostly for backend only.
  • It provides an easy way of development without compromising on quality or responsiveness.

We believe this will help you get the basics of Hotwire right. But if you want to know more, do not hesitate to reach out to us in the comments below.