If you have any questions or feedback, pleasefill out this form
This post is translated by ChatGPT and originally written in Mandarin, so there may be some inaccuracies or mistakes.
Introduction
Hotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 😍🎉🥂 https://t.co/Pa4EG8Av5E
— DHH (@dhh) December 22, 2020
DHH (the creator of Ruby on Rails) tweeted about his new project Hotwire. DHH is known to be somewhat skeptical of SPAs (as hinted in his tweet), which is why he aims to minimize the use of JavaScript in development. This tweet sparked lively discussions on Twitter, and I’d like to summarize some key points here.
The introduction to Hotwire is directly quoted from the official description:
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.
This description has two main points:
- No need to use JavaScript
- Directly sending HTML instead of JSON
This concept isn’t entirely new; Ruby on Rails has employed a similar technique for years, known as Turbolinks.
What is Turbolinks?
Turbolinks is a JavaScript library typically used in conjunction with Ruby on Rails (though it can also be used independently). It primarily fetches HTML to avoid the overhead of re-sending requests and reloading CSS when navigating between pages. Saying "no need to use JavaScript" isn't entirely accurate—JavaScript is still involved, but the library handles it for you, so you don't have to write it yourself.
For example, when there’s a tag like this on a page:
<a href="/articles/1" data-remote="true">link</a>If Ruby on Rails has Turbolinks enabled, when a user clicks the link, it doesn’t send a new request. Instead, Turbolinks performs something like this:
fetch('/index.html').then(res => res.html())
.then((html) => $page.html(html))This way, when a user clicks a button, it doesn’t re-render the HTML. Instead, it first fetches the HTML file for that page (via AJAX) and then directly renders it using JavaScript. Ruby on Rails is highly integrated with Turbolinks, which means sometimes you hardly notice Turbolinks at all, only feeling that "wow, page transitions seem faster."
As the HTML grows larger, the effect may become less noticeable, but if the HTML is relatively small, it can lead to a better user experience.
Why is this approach useful?
- No need to reload CSS and JavaScript, resulting in a better user experience.
- Turbolinks manages the
<head>section for you. - Minimal need to write additional JavaScript.
- Back-end developers can achieve a better experience with minimal effort.
Things to watch out for
- Events like
loadwill only trigger on the initial load since Turbolinks doesn't reload the entire page. Remember to switch toturbolinks:loador similar to listen for events. - With increasing JavaScript interactions, event bindings can easily conflict with each other.
- State does not get cleared when changing pages, so poorly written JavaScript can lead to memory leaks.
As JavaScript interactions increase, using Turbolinks may sometimes result in strange behaviors, such as errors due to repeated executions.
Some thoughts
As developers, many have experience writing SPAs, and we all know creating a functional and user-friendly SPA is no easy task. Poor state management can lead to excessive memory usage, state synchronization issues, inadequate error handling, and the frequent loading of large JavaScript bundles. Sometimes, sticking to pure SSR (Server-Side Rendering) for rendering might actually be a better approach, using Turbolinks to enhance the experience could be a good strategy.
Conclusion
It’s fucking hilarious that the tagline of this is “Hotwire is an alternative approach [...] by sending HTML instead of JSON over the wire”
— Surma (@DasSurma) December 22, 2020
HTML INSTEAD OF JSON? BLOODY MADNESS!
Then again, if this makes “sending HTML over the wire” popular, I’ll take it. https://t.co/7bLGdtJn7u
A lot of folks think serving JSON is more efficient than HTML, but once gzipped they're often the same. Sometimes HTML is smaller.
— Jake Archibald (@jaffathecake) November 15, 2017
Eg https://t.co/hgxyH0N3Ct:
JSON: 18k.
Generated HTML: 17k.
Also, it's much easier to stream HTML & get a progressive render.
Some believe JSON is smaller than HTML, thus making it more efficient to transmit. However, once gzipped, both are often similar in size, and sometimes HTML can even be smaller. So, rendering HTML directly doesn’t seem like such a terrible idea after all.
Currently, the best integration of Turbolinks is likely with Ruby on Rails, while Hotwire is still relatively new, and some developers may be observing before diving in.
If you found this article helpful, please consider buying me a coffee ☕ It'll make my ordinary day shine ✨
☕Buy me a coffee