Introduction
cbwire is a ColdBox module that makes building reactive, modern apps easy without leaving the comfort of CFML.
Building modern CFML apps is complicated. 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 in cbwire...

Install CommandBox, then from your terminal, run:
1
mkdir cbwire-demo
2
cd cbwire-demo
3
box create app .
4
box install cbwire
5
box server start
Copied!
Let's add cbwire styling and script references to our layout using wireStyles() and wireScripts(), and include a cbwire component we will create using wire( "Counter ").
1
<-- ./layouts/Main.cfm -->
2
<cfoutput>
3
<!doctype html>
4
<html lang="en">
5
<head>
6
#wireStyles()#
7
</head>
8
<body>
9
#wire( "Counter" )#
10
#wireScripts()#
11
</body>
12
</html>
13
</cfoutput>
14
Copied!
Let's create our Counter cbwire component.
1
// File: ./wires/Counter.cfc
2
3
component extends="cbwire.models.Component" {
4
5
// Reactive Data Properties
6
variables.data = {
7
"counter": "0"
8
};
9
10
// Action to increment counter
11
function increment(){
12
variables.data.counter += 1;
13
}
14
15
// Tell cbwire where our Counter template is
16
function renderIt(){
17
return this.renderView(
18
"wires/counter"
19
);
20
}
21
22
}
23
Copied!
1
<!-- ./views/wires/counter.cfm -->
2
<cfoutput>
3
<div>
4
<div>Count: #args.counter#</div>
5
<button wire:click="increment">
6
+
7
</button>
8
</div>
9
</cfoutput>
Copied!
Now that you've created your Counter component, you can include this component in any layout or view throughout your app using the wire() helper method.
Refresh the page, and you find a reactive Counter that increments when you hit the plus button.

How is this working!!!?

  1. 1.
    cbwire renders our Counter component with our .cfm page. ( View Source to see this ). This means cbwire is SEO-friendly.
  2. 2.
    When a user clicks the plus button, cbwire makes an AJAX request to the server and triggers the increment action.
  3. 3.
    cbwire updates the counter state
  4. 4.
    cbwire re-renders the component template and returns the updated HTML in the AJAX response
  5. 5.
    cbwire is using the amazing Livewire JavaScript library to mutate the DOM based on our state changes.
  • We built a reactive counter.
  • We're not refreshing the page.
  • We didn't write any JavaScript.
  • We didn't have to worry about webpack configuration or compilation.
  • We never left CFML.
    🤓

Fantastic, right?

We're just getting warmed up! cbwire has transformed the way we are building apps, and we think you're going to love it also.

Credits

cbwire wouldn't even exist if it wasn't for the impressive efforts of Caleb Porzio ( creator of Livewire, also Alpine.js ) and the PHP Laravel community. Caleb created Livewire for use with the PHP framework Laravel. cbwire is a port of the Livewire functionality to ColdBox and CFML, with some additional goodies sprinkled in.
The cbwire module for ColdBox is written and maintained by Grant Copley, Luis Majano, and Ortus Solutions.

Project Support

If cbwire makes you
😍
, please consider becoming one of our lovingly esteemed Patreon supporters.
Last modified 1mo ago