CBWIRE v3 is here!
I am very excited to announce the release of version 3 of CBWIRE, our ColdBox module that makes building modern, reactive apps incredibly easy with little-to-no JavaScript. This version brings a new component syntax, 19 enhancements and bug fixes, and improved documentation. Our biggest goal with this release was to improve the developer experience and provide a low entry barrier to getting started with CBWIRE.
New Syntax
CBWIRE v3 now supports a simplified component syntax, making building reactive UI components much more straightforward. In previous versions, creating a UI component required for you to develop both a CFC and CFM file. The CFC file was a CFML component where data properties, computed properties, actions, and more were placed, and the CFM file was where the template was put.
Now, components are entirely self-contained in a single CFM file.
Consider this contact form below, defined in the file ./wires/emailSignup.cfm. The template is defined within a CFOUTPUT tag, and the component blueprint ( data properties, computed properties, etc.) is defined within CFSCRIPT tags.
// Render our contact form somewhere
wire( "ContactForm" );
<!--- ./wires/emailSignup.cfm --->
<!--- Template --->
<cfoutput>
<form wire:submit.prevent="submitForm">
<div>
<input wire:model.lazy="email" type="email" placeholder="Enter your email...">
<label for="email">Email address</label>
<cfif validation.hasErrors( "email" )>
<div class="text-danger">
#validation.getAllErrors( "email" ).first()#
</div>
</cfif>
</div>
<!--- Show if the form submission is successful --->
<cfif success>
<div>
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
</div>
</div>
</cfif>
<button
class="btn btn-primary text-uppercase <cfif validation.hasErrors()>disabled</cfif>"
type="submit">Send</button>
</form>
</cfoutput>
<!--- Component Blueprint --->
<cfscript>
// Validation constraints
constraints = {
"email": {
"required": true,
"type": "email"
}
};
// Data properties
data = {
"email": "",
"success": false
};
// Actions
function submitForm() {
// Maybe send an email here
data.success = true;
}
</cfscript>
Accessing data and computed properties is also easier:
- Data properties are now accessible in the template using #propertyName#. In previous versions, you had to scope the variables using #args.propertyName#.
- Computed properties are now accessible using #propertyName()#. In previous versions, you had to scope using #args.computed.propertyName#.
Module Awareness
Your UI components are now module-aware, meaning they understand the module they originate from. If you use ColdBox modules to separate your application into various concerns, you can also place your CBWIRE components there. You can reference components from other modules and organize them however you need.
Improved Documentation
All documentation examples have been updated to use the new syntax. https://cbwire.ortusbooks.com/
Other Changes
You can see a complete list of the v3 changes here: What's New With 3.0 - CBWIRE
Summary
I really hope you are enjoying CBWIRE and find that it’s helping you build applications faster, with less boilerplate and unnecessary JavaScript. As always, I appreciate any feedback and look forward to hearing how you use CBWIRE.