HTML over-the-wire has grown in popularity as a more straightforward way of creating web applications without using as much JavaScript. It does this by sending HTML instead of JSON through the idea of "html over the wire".
Now, a "non-intrusive JavaScript framework" called Unpoly has emerged as a competitor to Basecamp's HTML over-the-wire framework Hotwire. Unpoly promises a "fast and flexible front end" for server-rendered HTML views. In an interview with The New Stack, Unpoly creator Henning Koch talks about why frameworks like Unpoly are getting attention.
He said: "Code is always a liability, and it is always worth exploring ways to write less code. In our experience, Unpoly allows us to build applications with less code than single-page applications, while retaining speed and flexibility on the front end. It's a better balance for us."
Hotwire is a modern web development framework that takes an approach called "HTML Over the Wire" to build efficient, real-time interactive web applications. The Hotwire framework was developed by Ruby on Rails creator David Heinemeier Hansson (DHH) and the Basecamp team to simplify the web development process, reduce reliance on JavaScript, and improve web application performance.
To understand Hotwire, we need to have a deep understanding of its core components and the design philosophy behind them. This article takes a closer look at what the Hotwire framework is made of, how it's used, and how it changed the world of Web development.
What is "HTML Over the Wire"?
"HTML Over the Wire" is an approach to web development that emphasizes sending HTML fragments directly as responses to clients, rather than relying on reams of JavaScript code and API calls. The advantage of this approach is that it reduces the complexity between the front and back ends and improves the performance of the web application while maintaining the ability to interact in real time.
In the Hotwire framework, the server is responsible for generating HTML fragments and pushing them to the client when needed. This means that clients can interact in real time without executing a lot of JavaScript code. This approach increases the loading speed of web applications, reduces resource consumption on the client side, and simplifies the development process.
Core components of the Hotwire framework
The Hotwire framework consists of the following three core components:
1. Turbo
Turbo is the main component of the Hotwire framework responsible for improving the performance of web applications. Turbo achieves performance optimization through the following aspects:
-
Turbo Drive : Turbo Drive makes page navigation and updates faster by intercepting link clicks and form submissions on the page. It only updates the main content of the page (body), while retaining the JavaScript runtime environment. This approach reduces the number of page refreshes and improves loading speed.
-
Turbo Frames : Turbo Frames allow you to divide your page into independent areas that can be loaded and updated asynchronously. When an area needs to be updated, the server can send an updated HTML fragment to the client without refreshing the entire page. This approach improves page responsiveness while reducing server load.
-
Turbo Streams : Turbo Streams is a mechanism for updating web applications in real time, using the "HTML Over the Wire" approach. The server can send an HTML fragment as a response to the client, specifying an action to perform (such as insert, update, or delete an element). The client performs these operations automatically, enabling real-time interaction.