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 creation, Hotwire. DHH is a fan of Single-Page Applications (SPAs) (as can be inferred from the tweet), so he tries to minimize the use of JavaScript in development. This tweet sparked a lively discussion on Twitter, and here is a brief summary.
Here is a direct quote from the official introduction to Hotwire:
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 key points:
- No need to use JavaScript extensively.
- Sending HTML instead of JSON directly.
This concept is not new; Ruby on Rails has been using a similar approach called Turbolinks for several years.
What is Turbolinks?
Turbolinks is a JavaScript library that is commonly used with Ruby on Rails (but can also be used as a standalone library). Its main purpose is to avoid the need for full page reloads and re-requesting CSS by fetching and swapping HTML directly. It is not entirely accurate to say "no need to use JavaScript" because JavaScript is still there, but the library takes care of it for you, allowing you to develop without writing JavaScript code.
For example, if there is a tag like this on a page:
<a href="/articles/1" data-remote="true">link</a>If Turbolinks is enabled in Ruby on Rails, when a user clicks the link, it won't actually send a new request. Turbolinks will do something like this:
fetch('/index.html').then(res => res.html())
.then((html) => $page.html(html))So, when a user clicks the link, instead of reloading the HTML, Turbolinks fetches the HTML file (via AJAX) and renders it directly using JavaScript. Ruby on Rails integrates tightly with Turbolinks, so sometimes you hardly notice the presence of Turbolinks; you just feel like "Wow, the page transition seems faster."
The effect may become less noticeable as the HTML size increases, but if the HTML is not too large, it can provide a better user experience.
Why is this approach useful?
- No need to reload CSS and JavaScript when transitioning between pages, resulting in a better user experience.
- Turbolinks handles the head section for you.
- Minimal additional JavaScript code is required.
- Backend engineers can achieve a better experience with minimal effort.
Things to be aware of
- Events like
loadmay only trigger on the initial page load because Turbolinks doesn't reload the entire page. Remember to switch to usingturbolinks:loador similar event listeners. - As JavaScript interactions increase, there may be conflicts between event bindings.
- State is not cleared when transitioning between pages, so poorly written JavaScript can lead to memory leaks.
When JavaScript interactions become more complex, using Turbolinks may sometimes result in unexpected behavior, such as errors caused by repeated execution.
Some thoughts
As developers, many of us have experience with building SPAs, and we know that creating a functional and user-friendly SPA is not easy. Issues like inefficient memory usage, out-of-sync state, poor error handling, and loading large JavaScript bundles can arise. In contrast, using server-side rendering (SSR) with Turbolinks to enhance the user experience seems like a better approach.
Afterword
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 people believe that JSON is more efficient than HTML for transmission, but once gzipped, they are often similar in size, and sometimes HTML is even smaller. So, rendering HTML directly doesn't seem like such a terrible thing.
However, currently, Turbolinks is most seamlessly integrated with Ruby on Rails, and Hotwire is relatively new, so some developers may still be observing its development.
