HTML Over the Wire: Modern Web Development with a "Grandparents’" Twist
Create faster, cheaper, and more robust websites with HTML Over the Wire and Turbo, by sending HTML instead of JSON back to the browser.
Written by Vegard Ottervig on
Back in the "old days", in what some younger developers might call "their grandparents' time" (around 2015), web developers sent HTML over the internet. Then came the era of massive JSON payloads and complex front-end frameworks.
Tom Arild from Item Consulting argues that it’s time to go back to the future. By using the "HTML-over-the-wire" approach with Hotwire Turbo and Enonic, developers can build snappy, app-like experiences without the overhead of heavy JavaScript frameworks.
The Philosophy: Progressive Enhancement
The foundation of this approach is Progressive Enhancement. Think of your web page as a series of robust layers:
- The Foundation (HTML): You start with clean, semantic, and robust HTML. A user should be able to complete his tasks, like reading an article or submitting a form, using only this layer. It isn't pretty, but it’s unbreakable.
- The Style (CSS): On top of the HTML, you add CSS to make the experience look and feel better. By using a "mobile-first" approach and standard CSS, you ensure the site looks decent even on older browsers (like a grandmother using Internet Explorer).
- The Experience (JavaScript): Finally, you add a thin layer of JavaScript to make the site feel like a modern app. If the JavaScript fails to load in a tunnel or on a poor connection, the site still works because the underlying layers are solid.
The Engine: Hotwire Turbo
The "meat" of this modern old-school approach is Hotwire Turbo. Originally developed by the Ruby on Rails community, it fits perfectly with Enonic. Turbo is broken down into three powerful parts:
1. Turbo Drive
Turbo Drive acts as a router. It "hijacks" every link on your page. When you hover over a link, it starts fetching the HTML for that page in the background. When you click, it simply swaps the current <body> with the new one. This is significantly faster than a full page reload because the browser doesn't have to re-parse all the scripts and styles in the header.
2. Turbo Frames
This is the "partial refresh" powerhouse. By wrapping a part of your page in a <turbo-frame> element, you can update just that specific section. If you submit a form inside a frame, only that frame updates with the "Success" message. The rest of the page remains untouched.
The best part is that you don't have to write a single line of front-end JavaScript to get this behavior.
3. Turbo Streams
Sometimes you need to update multiple parts of a page simultaneously. Say you must update a shopping cart icon in the header when an item is added to a list in the body. Then you should use Turbo Streams.
Through a WebSocket connection to Enonic, the server can "stream" CRUD operations directly to the DOM. It can append, prepend, replace, or remove elements in real-time for one user, or for every user currently on the site.
Why This Works with Enonic
Sending HTML instead of JSON is about performance as much as style:
- Template Freedom: Whether you prefer Thymeleaf or FreeMarker, you can use your favorite server-side template language.
- Less Maintenance: You don't have to maintain two sets of templates (one for the server and one for a jQuery/React front-end). You have one source of truth for your markup.
- The Booster Edge: Enonic’s Booster application is a perfect fit here. Because you are serving HTML, you can cache that markup at the edge or on a CDN, making the "app-like" experience even faster.
- Lazy Loading: You can use a Turbo Frame to lazy-load heavy content. Serve the main page instantly from the cache, and let the frame fetch the time-consuming API data afterward.
Challenges and Lessons Learned
Every technology has its quirks. If you are adding Turbo to an existing page, keep these two "beginner mistakes" in mind:
- JavaScript Re-attachment: Since Turbo swaps the DOM without a full page refresh, any "vanilla" JavaScript that needs to attach to elements (like a gallery or a slider) needs to be re-run. Tom recommends using Web Components (Custom Elements) because they are part of the web platform and instantiate themselves automatically whenever they appear in the DOM.
- Link Hijacking: By default, a Turbo Frame tries to open every link inside itself. If you have an external link, you need to explicitly tell it to break out of the frame. A safe bet is to set the default behavior to open in a new page and mark specific "Turbo" links manually.
The Bottom Line
HTML is a data format, too. By shifting the logic back to the server and using Hotwire Turbo, we get app-like performance with the robustness of the 2015-era web. It’s faster to develop, easier to maintain, and, most importantly, it just works.
