Links

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 the client side is a different story.
JavaScript frameworks like Vue and React are powerful but also introduce a great deal of complexity to our applications. These frameworks completely take over your app and typically require you to create a server-side API for data access. Building an API involves its own complexities. And don't get us started on front-end testing.
Often, all this complexity we are managing as developers is an effort to achieve something simple: front-end reactivity and creating a great user experience.
What if you could have the best of both worlds: the power and reactivity 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 reactive counter...

Let's insert a counter element into the page using wire( "Counter" ).
<!--- ./layouts/Main.cfm --->
<cfoutput>
<!doctype html>
<html>
<head>
<!--- CBWIRE CSS --->
#wireStyles()#
</head>
<body>
<!--- INSERT A COUNTER HERE --->
#wire( "Counter" )#
​
<!--- CBWIRE JS --->
#wireScripts()#
</body>
</html>
</cfoutput>
Let's define our counter component using the path ./wires/Counter.cfm.
<cfoutput>
<div>
<div>Count: #counter#</div>
<button wire:click="increment">+</button>
</div>
</cfoutput>
​
<cfscript>
data = { "counter": 0 };
function increment() {
data.counter += 1;
}
</cfscript>
You now have a reactive counter that increments when you click the plus button without any page refreshing or writing JavaScript! 😳

What!? How?

  1. 1.
    We include our counter on our page using wire( "Counter" ).
  2. 2.
    CBWIRE magically parses our component's template definition (HTML) and component definition (data properties, actions, ..). We default our counter to 0.
  3. 3.
    When a user clicks the plus button, CBWIRE detects the event client-side and makes an XHR request to the server.
  4. 4.
    CBWIRE intercepts the XHR request and invokes the increment() action.
  5. 5.
    The increment method updates the counter state by 1 by using data.counter += 1.
  6. 6.
    CBWIRE re-renders the template and returns the updated HTML in the XHR response.
  7. 7.
    CBWIRE detects state changes and uses JavaScript and DOM diffing to update the screen.

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 uses Livewire for its client-side functionality and DOM diffing and wouldn't exist without the work of Caleb Porzio ( creator of Livewire, 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.

Resources

Last modified 4d ago