Comment on page
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 too!
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 ).
The CBWIRE module for ColdBox is written and maintained by Grant Copley, Luis Majano, and Ortus Solutions.
Last modified 1mo ago