@hotwired/turbo
Advanced tools
The speed of a single-page web application without having to write any JavaScript
@hotwired/turbo is a JavaScript framework that provides a set of tools to build modern web applications with minimal JavaScript. It focuses on enhancing the speed and responsiveness of web applications by handling navigation, form submissions, and more, without requiring a full page reload.
Turbo Drive
Turbo Drive makes navigation faster by using AJAX to load new pages, replacing the body, and updating the history without a full page reload.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.1.0/dist/turbo.min.js"></script>
</head>
<body>
<a href="/next_page">Next Page</a>
</body>
</html>Turbo Frames
Turbo Frames allow you to update parts of a page without a full reload. Clicking the link inside the frame will only update the content of that frame.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.1.0/dist/turbo.min.js"></script>
</head>
<body>
<turbo-frame id="frame">
<a href="/next_content">Load Content</a>
</turbo-frame>
</body>
</html>Turbo Streams
Turbo Streams enable real-time updates to parts of the page by sending HTML fragments over WebSockets or other channels. The example appends a new message to the target element with id 'messages'.
<turbo-stream action="append" target="messages">
<template>
<div id="message_1">Hello, World!</div>
</template>
</turbo-stream>Turbo Native
Turbo Native allows you to use Turbo in native mobile applications, providing a seamless experience between web and mobile. The example shows how to navigate to a URL in a Turbo-enabled Android app.
// In a native mobile app
import { Turbo } from '@hotwired/turbo-android'
Turbo.visit("https://example.com")pjax is a jQuery plugin that uses AJAX to load content and push the URL state, similar to Turbo Drive. However, it requires jQuery and is less feature-rich compared to @hotwired/turbo.
Unpoly is a framework for creating fast and flexible web applications. It offers similar functionality to Turbo Frames and Turbo Streams, but with a different API and additional features like layer management.
Stimulus is a modest JavaScript framework for enhancing static HTML. While it doesn't directly compete with Turbo, it complements it by providing a way to add behavior to HTML elements. Both are part of the Hotwire suite.
Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write:
It's all done by sending HTML over the wire. And for those instances when that's not enough, you can reach for the other side of Hotwire, and finish the job with Stimulus.
Read more on turbo.hotwired.dev.
Note: Turbo is currently in beta. We're using it in production with HEY, but expect that significant changes might be made in response to early feedback ✌️❤️
© 2021 Basecamp, LLC.
FAQs
The speed of a single-page web application without having to write any JavaScript
The npm package @hotwired/turbo receives a total of 253,645 weekly downloads. As such, @hotwired/turbo popularity was classified as popular.
We found that @hotwired/turbo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.