Introduction

CBWIRE is a ColdBox module that makes building modern, reactive CFML apps a breeze without the need for JavaScript frameworks such as Vue or React, and without the hassle of creating unnecessary APIs.

Are you tired of the challenges that come with building modern CFML apps? ColdBox makes server-side app development a breeze, but sometimes the client-side is a whole different story. With powerful JavaScript frameworks like Vue and React, it can be a difficult and time-consuming process to create your web apps.

But what if you could have the best of both worlds: the power of Vue and React with the simplicity of CFML? Impossible, you say? Think again!

Introducing CBWIRE: Power up your CFML and make your app dreams a reality!

Let's create a counter...

Install CommandBox, then from our terminal, run:

mkdir cbwire-demo
cd cbwire-demo
box coldbox create app
box install cbwire@be
box server start

Next, add wireStyles() and wireScripts() to our layout. This is required for CBWIRE to do it's magic.

Let's also insert a counter element into the page using wire( "Counter" ).

<!--- ./layouts/Main.cfm --->
<cfoutput>
<!doctype html>
<html>
<head>
    #wireStyles()#
</head>
<body>
    #wire( "Counter" )#
    #wireScripts()#
</body>
</html>
</cfoutput>

Let's define our counter Wire.

// ./wires/Counter.cfc
component extends="cbwire.models.Component" {

    // Data Properties
    data = {
        "counter": 0
    };

    // Actions
    function increment(){
        data.counter += 1;
    }
}

Finally, let's create a Template for our counter Wire. Notice that we've added a wire:click directive to our button.

<!--- ./views/wires/counter.cfm --->
<cfoutput>
<div>
    <div>Count: #args.counter#</div>
    <button wire:click="increment">
        +
    </button>
</div>
</cfoutput>

Refresh the page. You now have a reactive counter that increments when you click the plus button without any page refreshing!

What!? How?

CBWIRE renders our Counter Wire template. Our counter value defaults to 0.
When a user clicks the plus button, CBWIRE detects the event and makes an XHR request to the server.
CBWIRE picks up the XHR request and invokes the increment action.
The increment method updates the counter state by 1.
CBWIRE re-renders the template and returns the updated HTML in the XHR response
CBWIRE detects any state changes and uses Livewire to mutate the DOM.

Awesome, right?

We built a reactive counter with no page refreshing.
We didn't write any JavaScript.
We didn't use webpack or mess with JavaScript compilation.
We never left CFML.🤓

CBWIRE is transforming the way we build CFML applications, and we think you're going to love it also!

Credits

CBWIRE is built on Livewire and wouldn't exist without Caleb Porzio ( creator of Livewire, Alpine.js ) and the PHP community.

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.

Resources

CBWIRE Examples: https://github.com/grantcopley/cbwire-examples
ForgeBox: https://forgebox.io/view/cbwire
GitHub Repository: https://github.com/coldbox-modules/cbwire
API Docs: https://apidocs.ortussolutions.com/#/coldbox-modules/cbwire/
Issue Tracker: https://github.com/coldbox-modules/cbwire/issues
Task List Demo: https://github.com/grantcopley/cbwire-task-list-demo
Form Validation Demo: https://github.com/grantcopley/cbwire-signup-form-demo
Up and Running Screencast: https://cfcasts.com/series/ortus-single-video-series/videos/up-and-running-with-cbwire
Into The Box 2021 Presentation: https://cfcasts.com/series/into-the-box-2021/videos/cbwire-coldbox-+-livewire-grant-copley
Ortus Webinar 2022: https://cfcasts.com/series/ortus-webinars-2022/videos/grant-copley-on-cbwire-+-alpine_js

NextRelease History

Last updated 1 year ago

Let's create a counter...

Install CommandBox, then from our terminal, run:

mkdir cbwire-demo
cd cbwire-demo
box coldbox create app
box install cbwire@be
box server start

Next, add wireStyles() and wireScripts() to our layout. This is required for CBWIRE to do it's magic.

Let's also insert a counter element into the page using wire( "Counter" ).

<!--- ./layouts/Main.cfm --->
<cfoutput>
<!doctype html>
<html>
<head>
    #wireStyles()#
</head>
<body>
    #wire( "Counter" )#
    #wireScripts()#
</body>
</html>
</cfoutput>

Let's define our counter Wire.

// ./wires/Counter.cfc
component extends="cbwire.models.Component" {

    // Data Properties
    data = {
        "counter": 0
    };

    // Actions
    function increment(){
        data.counter += 1;
    }
}

Finally, let's create a Template for our counter Wire. Notice that we've added a wire:click directive to our button.

<!--- ./views/wires/counter.cfm --->
<cfoutput>
<div>
    <div>Count: #args.counter#</div>
    <button wire:click="increment">
        +
    </button>
</div>
</cfoutput>

Refresh the page. You now have a reactive counter that increments when you click the plus button without any page refreshing!

What!? How?

CBWIRE renders our Counter Wire template. Our counter value defaults to 0.

When a user clicks the plus button, CBWIRE detects the event and makes an XHR request to the server.

CBWIRE picks up the XHR request and invokes the increment action.

The increment method updates the counter state by 1.

CBWIRE re-renders the template and returns the updated HTML in the XHR response

CBWIRE detects any state changes and uses Livewire to mutate the DOM.