Links

Introduction

CBWIRE is a ColdBox module that makes building reactive, modern CFML apps a joy.
Building modern CFML apps is a pain. ColdBox makes creating server-side apps easy, but what about the client-side? Front-end JavaScript frameworks like Vue and React are powerful, yet they also introduce complexity and a significant learning curve when creating our apps.
What if you could create apps that look and feel like your Vue and React web apps but are written with CFML. Impossible, you say? Nay, we say!
Introducing CBWIRE: Power-up your CFML!

Let's create a counter...

Install CommandBox, then from our terminal, run:
mkdir cbwire-demo
cd cbwire-demo
box coldbox create app
box install [email protected]
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 component 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 component.
// ./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 component. 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?

  1. 1.
    CBWIRE renders our Counter component template. Our counter value defaults to 0.
  2. 2.
    When a user clicks the plus button, CBWIRE detects the event and makes an XHR request to the server.
  3. 3.
    CBWIRE picks up the XHR request and invokes the increment action.
  4. 4.
    The increment method updates the counter state by 1.
  5. 5.
    CBWIRE re-renders the template and returns the updated HTML in the XHR response
  6. 6.
    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

Last modified 10d ago