Hey.com

Performance with minimal JavaScript

Although most loading patterns focus on optimizing the way we load (heavy) JavaScript applications, it's possible to create a performant, modern web application using very little JavaScript.

A good example of a performant app that only uses a small amount of JavaScript is Hey.com! Although Hey.com doesn't use popular modern web frameworks in order to achieve optimal performance, they're using custom packages to get the performance.

Turbolinks

In order to add performant navigation without using a client-side framework, Hey.com uses a library called Turbolinks. Whenever a user clicks on an <a href> within the same domain, Turbolinks intercepts the redirect and requests the new page from the server with an XMLHttpRequest.

The the server's HTML response gets rendered onto the page by replacing the current body, and merging the new head contents. When a user revisits the same page, Turbolinks will render a copy of the page from cache without making a request if possible. If the page hasn't been cached yet, it will retrieve a fresh version of the page over the network!

Turbolinks also allows us to show the cached version of the HTML document while it's requesting a newer version of the page in the background. The perceived performance is greatly improved this way: a user can see and interact with the older version of the HTML page, while the new one is being fetched in the background!

Stimulus

Efficiently returning the HTML from the server is just step one: most modern applications are interactive! Hey.com adds interactivity to the returned HTML by using a framework called Stimulus.

Stimulus revolves around three main concepts: controllers, actions, and targets. We can make HTML elements interactive by adding Stimulus-specific data-controller, data-action, and data-target attributes.

index.html
<div data-controller="hello">
  <input data-target="hello.name" type="text" />
  <button data-action="click->hello#greet">Greet</button>
  <span data-target="hello.output"></span>
</div>

A specific JavaScript controller, the hello controller in this case, adds the necessary JavaScript to the elements.

hello_controller.js
import { Controller } from "stimulus";


export default class extends Controller {
  static targets = ["name", "output"];


  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`;
  }
}

You can find more examples and documentation in the Stimulus GitHub repo .

Stimulus watches any page change, and attaches the necessary controllers to the newly rendered HTML elements. Since all Stimulus controllers are pre-bundled, no JavaScript is included from the server response!

The combination of Turbolinks and Stimulus, among others, allows Hey.com to serve a fully interactive, performant website using very little JavaScript.

Hey.com is only one of many successful websites that created a performant web app without using JavaScript. Although the tools to simplify adding performance to a website are getting better and better, it's important to stay focused on your application's particular needs. Coming up with your own creative patterns, or cherry-picking certain parts of popular loading patterns, could lead to a more successful loading experience for your application!

Previous