Select Page

Incrementally Applying Hotwire To An Existing ColdFusion Application

Ben Nadel
Published: March 16, 2023

Over the past few months, I’ve been exploring the Hotwire framework from Basecamp. Hotwire includes the use of Turbo for enhanced performance and Stimulus for dynamic interactions. There is something very enticing about the Hotwire philosophy and the way it drives progressive enhancement. But, dropping Hotwire into a ColdFusion application isn’t seamless. File extension limitations and form processing redirects, for example, mandate at least some changes to the way you architect your Controller layer. I’d like to start using Hotwire on my ColdFusion blog; but, I know my code isn’t “Hotwire ready”. As such, I wanted to look at how I can incrementally apply Hotwire to my existing ColdFusion application.

View this code in my ColdFusion + Hotwire Demos project on GitHub.

As I mentioned above, Hotwire isn’t “one thing”, it’s an umbrella of technologies that work together to try and create SPA (Single-Page Application)-like experiences on top of MPAs (Multi-Page Application). Turbo includes “Turbo Drive”, “Turbo Frames”, and “Turbo Streams”; and, works to enhance page navigation, partial page updates, and lazy-loaded content. Stimulus is the explicit JavaScript layer that adds dynamic interactivity to a given part of the DOM (Document Object Model).

known as the Singleton pattern and must be avoided.

from the documentation):

During rendering, Turbo Drive replaces the current <body> element outright and merges the contents of the <head> element. The JavaScript window and document objects, and the <html> element, persist from one rendering to the next.

If an application navigation takes me from one layout to another layout, the CSS file from one layout ends up colliding with the CSS file from the previous layout (since the head-tag contents are merged and I end up with both CSS files loaded at the same time). This leads to unexpected page rendering results.

What I think I need to do is create a single, unified CSS file that can handle every type of layout (much like I’ve done with the JavaScript file). And, if CSS class names aren’t globally unique, I have to make them unique for the purposes of Hotwire.

Want to use code from this post?
Check out the license.