Blog

Prefetching in CBWIRE

Grant Copley September 20, 2022

Spread the word

Grant Copley

September 20, 2022

Spread the word


Share your thoughts

When I want to increase the perceived speed of my CBWIRE apps, one tool I reach for is prefetching. Prefetching is a built-in feature of Livewire JS that allows you to invoke an Action's results on mouseOver using the .prefetch modifier.

<button wire:click.prefetch="generatePDF">Generate PDF</button>

In the example above, I'm telling CBWIRE to invoke the generatePDF action on my component when a user clicks on the button OR if the user mouses over the button. I want it to prefetch the result.

<button wire:click.prefetch="generatePDF">Generate PDF</button>

<cfif args.pdfReadyForDownload>
	<button>Download PDF</button>
</cfif>

Here's my Component where the Action is invoked.

component extends="cbwire.models.Component"{

	property name="pdfService" inject="PDFService@myapp";
	
	data = {
		"pdfReadyForDownload": false
	};

    function generatePDF(){
		pdfService.generate();
		data.pdfReadyForDownload = true;
    }
}
function generatePDF(){
	pdfService.generate();
	data.pdfReadyForDownload = true;
}

Prefetching will only occur one per mouseOver. Prefetching works well for actions that do not perform any side effects, such as mutating session data or writing to a database. If the action you are "pre-fetching" does have side effects, you may encounter unpredictable results.

I've added an example of prefetching to our ever-growing CBWIRE Examples app. Enjoy!

Additional Resources

Add Your Comment

Recent Entries

Introducing: The Ortus ORM Extension

Introducing: The Ortus ORM Extension

We are excited to announce the Ortus ORM Extension, a new effort to improve the CFML ecosystem by modernizing Hibernate ORM support on the Lucee CFML server. The Ortus ORM extension is an open-source fork of the Lucee Hibernate extension which focuses on speed, reliability, and collaboration with the excellent CFML community.

Michael Born
Michael Born
June 06, 2023
CBWIRE 3.0.0 Released

CBWIRE 3.0.0 Released

We are very excited to announce the release of version 3 of CBWIRE, our ColdBox module that makes building modern, reactive apps a breeze. This version brings with it a new component syntax, 19 enhancements and bug fixes, and improved documentation. Our biggest goal with this release was to improve the developer experience and to provide a low barrier to entry to getting started with CBWIRE.

Grant Copley
Grant Copley
May 22, 2023
ColdBox 7.0.0 Released

ColdBox 7.0.0 Released

Introducing ColdBox 7: Revolutionizing Web Development with Cutting-Edge Features and Unparalleled Performance

We are thrilled to announce the highly anticipated release of ColdBox 7, the latest version of the acclaimed web development HMVC framework for ColdFusion (CFML). ColdBox 7 introduces groundbreaking features and advancements, elevating the development experience to new heights and empowering developers to create exceptional web applications and APIs.

Designed to meet the evolving needs of modern web development, ColdBox 7 boasts a range of powerful features that streamline the development process and enhance productivity. With its robust HMVC architecture and developer-friendly tools, ColdBox 7 enables developers to deliver high-performance, scalable, and maintainable web applications and APIs with ease.

Esme Acevedo
Esme Acevedo
May 16, 2023