Image Description
Italo Brandão
  • Apr 14
  • 2.6 min read

Sending HTML over the Wire with Hotwire

Hi, I'm Italo, a software engineer from Brazil. I've been studying Rails frequently, and a subject that has been particularly interesting to me is Hotwire.

hotwire

Hi, I'm Italo, a software engineer from Brazil. I've been studying Rails frequently, and a subject that has been particularly interesting to me is Hotwire.

Let's talk about hotwire.

Hotwire consists of three modules: Turbo, Stimulus, and Strada. The core is Turbo, a set of techniques for speeding up page changes and form submissions, dividing complex pages into components, and streaming partial updates over WebSocket, all without writing any JavaScript code. It was designed from the start to integrate with native apps for iOS and Android.

While Turbo usually takes care of at least 80% of the interactivity that traditionally would have required JavaScript, there are still cases where a dash of custom code is required. Stimulus makes this easy with a HTML-centric approach to state and wiring.

Standardizes the way that web and native parts of a mobile hybrid application talk to each other via HTML bridge attributes. This makes it easy to progressively level-up web interactions with native replacements.

Demystifying Turbo


  • Turbo Drive accelerates links and form submissions by negating the need for full page reloads

  • Turbo Frames which in every navigation scope can be lazily loaded.

  • Turbo Streams deliver page changes over WebSocket, SSE or in response to form submittions using just HTML and a set of CRUD-likes actions

  • Turbo Native lets your majestic monolith form the center of your native IOS and Android apps, with seamless transitions between web and native sections.

Demystifying Stimulus


Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbo to provide a complete solution for fast, compelling applications with a minimal amount of effort. In my opinion stimulus is a way to write vanilla javascript more elegantly than jquery.

Demystifying Strada


  • Strada Web enables you to use your existing html to create web components that send and respond to messages with components in your native apps.

  • Strada IOS and Strada Android enable you to create native components that receive and reply to messages from web components that are present on the page. All without writing any Javascript in your native apps.

An example of Hotwire in action.

https://youtu.be/eKY-QES1XQQ

Ruby on Rails Ruby JavaScript

Estamos usando cookies para melhorar sua experiência!

Ao clicar em “Permitir todos”, você concorda com o uso de todos os cookies.