Unlock the Power of Turbolinks: Boost Your Web App’s Performance
The Magic Behind Turbolinks
Turbolinks substitutes full-page loads with partial loads in multi-page applications, significantly improving webpage performance. It achieves this by automatically fetching pages, swapping the DOM’s body, and merging it with the head. This clever approach allows Turbolinks to understand what’s changed on the page without requiring a full load.
// Example of Turbolinks' page loading mechanism
fetch('/next-page')
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const body = doc.body;
// Swap the DOM's body with the new one
document.body.parentNode.replaceChild(body, document.body);
});Seamless Navigation and Caching
Turbolinks focuses on automatic navigation optimization, ensuring your pages load faster without requiring extensive changes. It stores every visited page in an internal cache, allowing for quick retrieval when needed. This means you can navigate back and forth through your application’s history without reloading entire pages.
- Automatic navigation optimization
- Faster page loading without extensive changes
Customization and Integration
Turbolinks can be seamlessly integrated with HTML pages, Ruby on Rails, Node.js, Laravel, partial fragments, or even JSON. It also boasts browser adaptability, intercepting clicks to change behavior behind the scenes while helping the browser understand how to navigate through the History API.
// Example of Turbolinks integration with Ruby on Rails
# Gemfile
gem 'turbolinks'
# application.js
//= require turbolinks// Example of Turbolinks integration with Node.js
const turbolinks = require('turbolinks');
turbolinks.start();Setup and Usage
Setting up Turbolinks is a breeze. For plain HTML and JavaScript applications, simply import the JavaScript file within your head tag. For Ruby on Rails applications, add the respective gem to your Gemfile and include a comment in your JavaScript manifest file. Node projects require an even simpler installation process.
<head>
<script src="turbolinks.js"></script>
</head>Redirecting on the Server
Turbolinks works smoothly within the Rails environment, automatically adding a Turbolinks-Location header to requests when redirecting to a new page. However, in Node-based applications, you’ll need to handle this request manually.
// Example of manual Turbolinks-Location header in Node.js
res.set('Turbolinks-Location', '/next-page');JavaScript: Head vs Body Approaches
Turbolinks recommends placing scripts within the head tag, contrary to the conventional approach of including them at the bottom of the body element. This ensures scripts aren’t loaded repeatedly during navigation.
<head>
<script src="script.js"></script>
</head>Analytics Libraries and Default Progress Bar
When using analytics libraries like Google Analytics, make sure to import the script element within the body and the analytics.js file within the head. Turbolinks also provides a default progress bar that appears when a link takes too long to return, which can be customized via API.
<body>
<script>(function(i,s,o,g,r,a,m){...}</script>
</body>Automatic Caching and Customizing Requests
Turbolinks’ automatic caching mechanism allows you to access previously visited pages quickly, while also providing an option to fetch a new copy from the backend in parallel. You can also customize requests by intercepting and modifying them before submission.
// Example of customizing requests with Turbolinks
Turbolinks.visit('/next-page', {
headers: {
'X-Custom-Header': 'Custom value'
}
});By harnessing the power of Turbolinks, you can take your web app to the next level and provide a seamless user experience.