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

CBSecurity 3.x Released

CBSecurity 3.x Released

We are incredibly excited to release CBSecurity 3. This is a significant release with over six months of work invested in it. We have completely revamped our security module to make ColdBox applications secure, flexible, and ready for the upcoming ColdBox 7 release. The first major announcement for this release is that we have a brand-new logo!

Luis Majano
Luis Majano
January 30, 2023
CBWIRE 2.2 Released

CBWIRE 2.2 Released

We're excited to announce the release of CBWIRE 2.2. This release includes several added enhancements, such as new lifecycle hooks and simplified Turbo Drive integration. We changed the previous lifecycle hook of mount() to onMount() to be consistent, and several bugs were squashed.

Maria Jose Herrera
Maria Jose Herrera
January 09, 2023
FORGEBOX v7.1.0 Released

FORGEBOX v7.1.0 Released

We are so happy to announce a minor release for our package management system. In this release, we take care of some bug fixes reported and a lot of work for our elastic search engine. Now better search results with an improved response time. We have updated our core modules to the latest versions for better security and performance.

Javier Quintero
Javier Quintero
December 30, 2022