After successfully launching their email application HEY as a server-side application, Basecamp reported migrating its flagship product, Basecamp 3, to Hotwire this summer. As organizations increasingly default to single-page applications (SPAs) for new web development, we continue to be excited by Hotwire swimming against the stream. Unlike SPAs, Hotwire applications keep most of the logic and navigation on the server, relying on a minimal amount of browser JavaScript. Hotwire modularizes HTML pages into a set of components (called Turbo Frames) that can be lazy loaded, provide independent contexts and send HTML updates to those contexts based on user actions. SPAs offer undeniable user responsiveness, but the simplicity of traditional server-side web programming combined with modern browser tooling provides a refreshing take on balancing developer effectiveness and user responsiveness.
Hotwire (HTML over the wire) is a technique to build web applications. Pages are constructed out of components, but unlike modern SPAs the HTML for the components is generated on the server side and then sent "over the wire" to the browser. The application has only a small amount of JavaScript code in the browser to stitch the HTML fragments together. Our teams, and doubtlessly others too, experimented with this technique after asynchronous web requests gained cross-browser support around 2005, but for various reasons it never gained much traction.
Today, Hotwire uses modern web browser and HTTP capabilities to achieve the speed, responsiveness and dynamic nature of single-page apps (SPAs). It embraces simpler web application design by localizing the logic to the server and keeping the client-side code simple. The team at Basecamp has released a few Hotwire frameworks that power their own application, including Turbo and Stimulus. Turbo includes a set of techniques and frameworks to speed up the application responsiveness by preventing whole page reloading, page preview from cache and decomposing the page into fragments with progressive enhancements on request. Stimulus is designed to enhance static HTML in the browser by connecting JavaScript objects to the page elements on the HTML.
