Introduction

CBWIRE is a ColdBox module that uses Livewire to help you build modern, reactive CFML applications in record time - without using much JavaScript or building backend APIs.

Your First Component

Download and install CommandBox. From your CLI, start CommandBox by typing 'box'. Then run the following:

mkdir cbwire-playground --cd
coldbox create app
install cbwire@4
server start

Let's insert a counter element into our Main layout using wire( "Counter" ).

<!--- ./layouts/Main.cfm --->
<cfoutput>
<!doctype html>
<html>
<body>
    <!--- INSERT A COUNTER HERE --->
    #wire( "Counter" )#
</body>
</html>
</cfoutput>

Let's define our Counter component using the path ./wires/Counter.cfc.

component extends="cbwire.models.Component" {
    // Data properties
    data = {
        "counter": 0 // default value
    };
    
    // Actions
    function increment() {
        data.counter++;
    }
    
    // Rendering
    function renderIt() {
        return template( "wires.counter" );
    }
}

Finally, define our counter template using the path ./wires/counter.cfm.

<!--- Our template --->
<cfoutput>
    <div>
        <div>Count: #counter#</div>
        <button wire:click="increment">+</button>
    </div>
</cfoutput>

You now have a reactive counter that increments when you click the plus button without any page refreshing or writing JavaScript! 🤯

What!? How?

CBWIRE automatically processes our component's HTML template, data properties, and actions, then displays the component with its initial settings (which begin at 0).
When a user clicks a button, CBWIRE uses Livewire.js to detect the click and initiate an XHR request to communicate with the server.
CBWIRE captures this incoming request and triggers the 'increment()' action, which updates our data property.
Following this, CBWIRE updates the HTML template and includes this revised HTML in the XHR response.
CBWIRE uses Livewire.js to monitor state changes and employs JavaScript and DOM comparison techniques to refresh the display.

Awesome, right?

We developed a responsive counter.
We avoided writing any JavaScript code.
We didn't need to create an API.
There was no need for page refreshes.
We skipped using webpack or dealing with JavaScript compilation.
We stayed entirely within the CFML environment. 🤓

CBWIRE is transforming how we build CFML applications, and we think you'll love it, too!

Credits

CBWIRE uses Livewire and Alpine.js for most of its client-side functionality and DOM diffing, which wouldn't exist without the awesome work of Caleb Porzio ( creator of Livewire and Alpine.js ).

The CBWIRE module for ColdBox is written and maintained by Grant Copley, Luis Majano, and Ortus Solutions.

Project Support

Please consider becoming one of our lovingly esteemed Patreon supporters.

NextGetting Started

Last updated 2 months ago