Introduction
CBWIRE is a ColdBox module that helps you build modern, reactive CFML applications in record time - without using much JavaScript or building backend APIs. Become a web development hero with CBWIRE!
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@be
server start
Let's insert a counter element into our Main layout 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.
<cfscript>
// Data properties
data = {
"counter": 0 // default value
};
// Actions
function increment() {
data.counter += 1;
}
</cfscript>
<!--- 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! 🤯
- 1.CBWIRE magically parsed our component's template (HTML), data properties, and actions, and rendered our component with its default values ( starting at 0 ).
- 2.CBWIRE detects the user clicking the button and makes an XHR request to the server.
- 3.CBWIRE intercepts the XHR request and invokes the increment() action, which updates our data property.
- 4.CBWIRE re-renders the template and returns the updated HTML in the XHR response.
- 5.CBWIRE detects state changes and uses JavaScript and DOM diffing to update the screen.
- We created a reactive counter with a single file ( wires/Counter.cfm )
- We didn't write any JavaScript.
- We didn't write an API.
- There's no page refreshing.
- 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!
The CBWIRE module for ColdBox is written and maintained by Grant Copley, Luis Majano, and Ortus Solutions.
CBWIRE uses Livewire for its client-side functionality and DOM diffing and wouldn't exist without the awesome work of Caleb Porzio ( creator of Livewire, Alpine.js ).
Last modified 6d ago