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
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!
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
You can find more examples and documentation in the Stimulus GitHub repo .