Blog

No more page refreshing with CBWIRE and Turbo Drive

Grant Copley September 12, 2022

Spread the word

Grant Copley

September 12, 2022

Spread the word


Share your thoughts

tl;dr

Turbo Drive can significantly enhance the user experience of your server-side apps by removing unnecessary page refreshes, and it doesn't take much to implement. Once Turbo Drive is installed, link clinks and form submissions will happen in the background via AJAX. You can use Turbo Drive with or without CBWIRE. If you are using CBWIRE, you can now use a plugin to make CBWIRE and Turbo Drive play together nicely.

CBWIRE and Turbo Drive

One of our core goals with the v2 release of CBWIRE was to get it working with Turbo Drive. Initially, we ran into a bunch of JS errors.

Turbo Drive, formerly Turbolinks, is a JavaScript library that watches for link clicks and form submissions, performs them in the background via AJAX, and updates the page without a full reload. Turbo Drive allows you to build apps that look and feel like single-page applications without completely overhauling your code. Even better, it only takes a couple of lines of code to implement.

Setup

NPM

You can install Turbo by running the following npm command at the root of your project.

npm i @hotwired/turbo

Then you can require or import Turbo.

import * as Turbo from "@hotwired/turbo"

Skypack

There is also a Skypack available which you can add to the <head></head> of your layout.


CBWIRE / Livewire Plugin

For Turbo to work correctly with Livewire ( and therefore CBWIRE ), you will need to include the Turbo plugin below your wireScripts() call in your layout.


Note: You MUST have either the data-turbolinks-eval="false" or data-turbo-eval="false" attributes added to the script tag (having both won't hurt).

Enjoy!

Once Turbo is installed, you should find that clicking links and submitting forms within your app does not require any page refreshes.

Turbo listens for various UI events and fetches the updated content from the server via background XHR requests.

For additional information on how Turbo can be used and configured, please see https://turbo.hotwired.dev/.

Also, you can find the CBWIRE documentation at https://cbwire.ortusbooks.com/.

Build something extraordinary.✌️

Add Your Comment

Recent Entries

BoxLang 1.0.0 RC1 Launched

BoxLang 1.0.0 RC1 Launched

After nearly a year of relentless iteration, rigorous testing, blood, sweat, lots of praying, tears, and over 1,000 resolved tickets, we proudly announce the first Release Candidate (RC1) of BoxLang! With 27 beta versions behind us, we are now on the final stretch toward the official 1.0 release.

Luis Majano
Luis Majano
February 18, 2025
Exploring BoxLang: A Modern Scripting Language for the JVM!

Exploring BoxLang: A Modern Scripting Language for the JVM!

The amazing CFML community leader Ray Camden recently shared his thoughts on BoxLang, a dynamic scripting language that runs on the Java Virtual Machine (JVM). BoxLang is lightweight (only 6 MB) and doesn’t require Java knowledge, making it accessible to developers from all backgrounds. Whether you're building CLI scriptsweb applications, or experimenting with serverless architecture, BoxLang has you covered.

Maria Jose Herrera
Maria Jose Herrera
February 14, 2025
Get a Free BoxLang+ License with Your ITB 2025 Ticket!

Get a Free BoxLang+ License with Your ITB 2025 Ticket!

At Ortus Solutions, we are dedicated to delivering the best experience for our Into the Box attendees. This year’s event will be an exciting opportunity to explore BoxLang and modern CFML development, and we want to ensure that attending in person is even more rewarding.

Maria Jose Herrera
Maria Jose Herrera
February 07, 2025