Introduction

cbwire is a ColdBox module that makes building reactive, modern apps easy without leaving the comfort of CFML.

Last updated 3 years ago

Was this helpful?

Introduction

cbwire is a ColdBox module that makes building reactive, modern apps easy without leaving the comfort of CFML.

Building modern apps is complicated. makes creating server-side CFML 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...

mkdir cbwire-demo
cd cbwire-demo
box coldbox create app .
box install cbwire@be
box server start

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 ").

<!--- ./layouts/Main.cfm --->
<cfoutput>
<!doctype html>
<html lang="en">
<head>
    #wireStyles()#
</head>
<body>
    #wire( "Counter" )#
    #wireScripts()#
</body>
</html>
</cfoutput>

Let's create our Counter cbwire component.

// File: ./wires/Counter.cfc
component extends="cbwire.models.Component" {

    // Reactive Data Properties
    variables.data = {
        "counter": "0"
    };

    // Action to increment counter
    function increment(){
        variables.data.counter += 1;
    }
}

<!--- ./views/wires/counter.cfm --->
<cfoutput>
<div>
    <div>Count: #args.counter#</div>
    <button wire:click="increment">
        +
    </button>
</div>
</cfoutput>

Now that you've created your Counter component, you can include this component in any layout or view throughout your ColdBox 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!!!?

cbwire renders our Counter component with our .cfm page. ( View Source to see this ). This means cbwire is SEO-friendly.
When a user clicks the plus button, cbwire makes an AJAX request to the server and triggers the increment action.
cbwire updates the counter state
cbwire re-renders the component template and returns the updated HTML in the AJAX response

Pretty cool, right?

We built a reactive counter.
The counter updates without any page refresh.
We didn't write any JavaScript.
We didn't mess with webpack or JavaScript compilation.

We're just getting warmed up! cbwire is transforming the way we build CFML applications, and we think you're going to love it also.

Credits

Project Support

NextInstallation