← Blog

6 months ago

Hotwire-Debug

By Jim Remsik

Github: Hotwire-Debug

Hotwire dropped on the scene this past Christmas and it was right at a time where we were evaluating options for a product we’re building for a client. It seemed interesting and worth a look and as I dug-in a little bit I was both elated to see some Rails-style magic and not entirely sure what I was seeing.

Being a web developer I did what’s come natural for the past 20+ years and looked at the source code. That was helpful and cued me into how the magic worked. Hotwire is the latest adaptation of the Reactive Rails pattern. It promises that you can write Rails and get Single Page App like behaviors at virtually no cost! The magic is a framework of common events and handlers that capture requests and sends them to the backend which renders a valid HTML response. On the front-end that response is parsed and the DOM is updated with the version returned from the server. It’s smart and allows your server to handle what it’s good at, rendering web pages, while many Rails developers get to (mostly) avoid what they dislike (writing Javascript).

Hotwire-Debug is an ounce of Javascript and CSS delivers some visual cues to allow you to see what is being updated and when. It also produces console logs for Turbo events to help you understand what lifecycle events are being triggered. Take a look and open an issue if something is not working for you.