Catching Wire; An introduction to CBWire 4

Into the Box 2025 - Michael Rigsby

We are continually bombarded with the latest and greatest new (or at least new to us) “thing” and constantly told we should integrate this or that right away! Keeping up with new technologies, modules, libraries, etc. can be a full-time job in itself.

In this session we will explore one of the “things” you may have heard tossed around, CBWire! We will go a little deeper than a typical “Elevator Pitch” and discuss what CBWire is, what it can do, and end with a live coding demonstration of how easy it is to integrate into an existing ColdBox application while building our first wire. We will end with a Q&A and hopefully gain a few more CBWire fans!

1. www.intothebox.org
LET’S GET STARTED
Build modern, reactive applications in record time without building backend APIs
CATCHING WIRE
WELCOME
Into the Box 2025: The Future is Dynamic!

2. www.intothebox.org
Stuck in legacy limbo? What if you
could evolve your coldboxapp
without breaking the bank or the
codebase?

3. www.intothebox.org
~ Dean Kamen
American engineer, inventor, and businessman
Inventor of theSegwayandiBOT
Every once in a while, a new
technology, an old problem, and a big
idea turn into an innovation.

4. Michael Rigsby
•Live in Severn Maryland with my wife, many dogs and one cat
•Multiple contributions to CBWIRE including Checksum and
Locked data properties
•Developing ColdFusion Apps since version 4.0 (since last century ;-)
Senior ColdFusion Developer
@[email protected] @mrigsby @michael.rigsby.9
Owner, OIS Technologies

5. Demo ColdBox App
https://github.com/mrigsby/CatchingWire

6. What is CBWIRE ?
CBWIRE is a ColdBox module utilizing Livewire.js and Alpine.js to
enable developers to create dynamic, interactive user interfaces
using all the benefits of the ColdBox MVC framework and reduces the
need for extensive JavaScript, making it easier for developers to build
responsive web applications without full page reloads, or building
new backend APIs.

7. Some Benefits of CBWIRE ?
CBWIRE simplifies development by leveraging
familiar CFML, offers real-time updates for a
responsive user experience, and optimizes
performance through efficient DOM updates. It also
integrates seamlessly with ColdBox, preserving form
states and reducing the learning curve for
developers
CBWire Simplifies Development

8. Some Benefits of CBWIRE ?
CBWIRE uses Livewire.js, developed for Laravel that
lets developers build dynamic web pages with less
JavaScript. Instead of writing complex client-side
code for tasks like updating the UI or handling form
submissions, Livewire.js handles the interaction with
the server. It automatically updates the DOM, so you
don’t need to write JavaScript for events or AJAX
calls, making development simpler and faster
No Need for Extensive Javascript

9. Some Benefits of CBWIRE ?
Alpine.js complements Livewire.js by helping to
handle client-side interactions, like real-time form
validation or toggling UI elements, without needing a
server request. This partnership reduces JavaScript
needs further, as Alpine.js is lightweight and easy to
use. Together, they offer responsive, instant
feedback, enhancing user experience and
performance.
Livewire.js includes Alpine.js

10. Some Benefits of CBWIRE ?
DOM morphing is a critical feature. It involves
comparing the current DOM in the browser with the
newly rendered HTML from the server after a
component update. Instead of replacing the entire
DOM, Livewire identifies differences and applies
surgical changes, preserving existing elements
including items such as event listeners, focus states,
and form input values.
DOM Morphing

11. www.intothebox.org
Anatomy of a “WIRE”
Wire Component (Model)
/wires/Counter1.cfc
Wire Template (View)
/wires/counter1.cfm
A “wire” is made up of a wire component and a
wire template.

12. www.intothebox.org
Anatomy of a “WIRE”
component extends="cbwire.models.Component"{
// Data properties
data = {
"counter": 0// default value
};
// Action
functionincrement(){
data.counter++;
}
}
Wire Component (Model)
/wires/Counter1.cfc

13. www.intothebox.org
Anatomy of a “WIRE”
<cfoutput>
<divclass="wireOuterWrapper">
<div>
Count: #counter#
</div>
<buttonwire:click="increment">+</button>
</div>
</cfoutput>
Wire Template (View)
/wires/counter1.cfm

14. www.intothebox.org
Anatomy of a “WIRE”
<cfoutput>
<divclass="wireOuterWrapper">
<div>
Count: #counter#
</div>
<buttonwire:click="increment">+</button>
</div>
</cfoutput>
Wire Template (View)
/wires/counter1.cfm

15. www.intothebox.org
Anatomy of a “WIRE”
<cfoutput>
<divclass="wireOuterWrapper">
<div>
Count: #counter#
</div>
<buttonwire:click="increment">+</button>
</div>
</cfoutput>
Wire Template (View)
/wires/counter1.cfm

16. www.intothebox.org
How do we use our “WIRE”?
<cfoutput>
#wire( "Counter1" )#
</cfoutput>
Place our wire in a ColdBox view or layout
/views/wiredemos/counter1.cfm

17. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

18. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

The user requests a page
from the server that
includes our Counter
component.
User Requests Page

19. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

#Wire(“counter1”)# is
handled by CBWire
ColdBox Receives Request

20. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

CBWIRE parses our
component and initially
renders it with its default
values.
CBWIRE Parses Component

21. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

The rendered component is
sent to the browser.
Note: that nothing extraordinary
has happened at this point.
Counter Displayed w/ Default
Values

22. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

CBWIRE uses Livewire.jsto
intercept the user's click
and send an XHR request
to the server.
User Clicks Button & Livewire.js
Intercepts Click

23. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

CBWIRE Handles the
request >>>
CBWIRE Intercepts the XHR Request
Sent to Server

24. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

CBWire hydrates the
Counter wire with data
from the request
Security! CBWIRE uses
both CSRF and Checksum
to validate the payload
being sent from browser
to server
CBWIRE Hydrates Counter

25. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

CBWIRE runs the
increment() method,
updating the data
properties.
CBWIRE Runs increment() method

26. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

CBWIRE re-renders the
template and returns
HTML to the browser in the
payload
CBWIRE Re-renders Counter and
HTML is returned

27. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

CBWIRE uses Livewire.js
DOM diffing to update the
component on the page.
CBWIRE Updates DOM for Counter1

28. www.intothebox.org
What's Going On
CBWIRE Counter Component Interaction
D
R

T L R
R



R R S
S

L


D
D
RE



R
R
R

29. www.intothebox.org
Under the Hood
{
"_token": "DC6FDBDF94A5957BDF486248A62A36673B0C6DB8" ,
"components": [
{
"snapshot": "{\"data\":{\"counter\":0},\"memo\":{\"id\":\"7ec78e2fb579c6913a04970fb7c10988
"updates": {},
"calls": [
{ "path": "", "method": "increment", "params": [] }
]
}
]
}
What is sent to the server for CBWIRE to parse?
Wire Payload

30. www.intothebox.org
Under the Hood
{
"_token": "DC6FDBDF94A5957BDF486248A62A36673B0C6DB8" ,
"components": [
{
"snapshot": "{\"data\":{\"counter\":0},\"memo\":{\"id\":\"7ec78e2fb579c6913a04970fb7c10988
"updates": {},
"calls": [
{ "path": "", "method": "increment", "params": [] }
]
}
]
}
What is sent to the server for CBWIRE to parse?
Wire Payload

31. www.intothebox.org
Under the Hood
{
"_token": "DC6FDBDF94A5957BDF486248A62A36673B0C6DB8" ,
"components": [
{
"snapshot": "{\"data\":{\"counter\":0},\"memo\":{\"id\":\"7ec78e2fb579c6913a04970fb7c10988
"updates": {},
"calls": [
{ "path": "", "method": "increment", "params": [] }
]
}
]
}
What is sent to the server for CBWIRE to parse?
Wire Payload

32. www.intothebox.org
Under the Hood
{
"data": { "counter": 0},
”memo": {
"id": "7ec78e2fb579c6913a04970fb7c10988" ,
"name": "Counter1",
"path": "Counter1",
"method": "GET",
"children": [],
"scripts": [],
"assets": [],
"isolate": false,
"lazyLoaded": false,
"lazyIsolated": true,
"errors": [],
"locale": "en"
},
"checksum": "f9f66fa895026e389a10ce006daf3f59afaec8db50cdb60f152af599b32f9192"
}
What is in the Snapshot?
Payload Snapshot

33. www.intothebox.org
Under the Hood
{
"data": { "counter": 0},
”memo": {
"id": "7ec78e2fb579c6913a04970fb7c10988" ,
"name": "Counter1",
"path": "Counter1",
"method": "GET",
"children": [],
"scripts": [],
"assets": [],
"isolate": false,
"lazyLoaded": false,
"lazyIsolated": true,
"errors": [],
"locale": "en"
},
"checksum": "f9f66fa895026e389a10ce006daf3f59afaec8db50cdb60f152af599b32f9192"
}
What is in the Snapshot?
Payload Snapshot
EST RA T E! D ’
’
to the client and passed back and forth
between the browser and server

34. www.intothebox.org
Under the Hood
{
"components": [
{
"snapshot": "{\"data\":{\"counter\":1},\"memo\":{\"id\":\"7ec78e2fb579c6913a04970fb7c10988 \
"effects": {
"html": "<div wire:id=\"7ec78e2fb579c6913a04970fb7c10988 \"class=\"wireOuterWrapper
"returns": [ null ]
}
}
]
}
What is returned from the server for Livewire.jsto parse?
CBWire Response

35. www.intothebox.org
Under the Hood
{
"components": [
{
"snapshot": "{\"data\":{\"counter\":1},\"memo\":{\"id\":\"7ec78e2fb579c6913a04970fb7c10988 \
"effects": {
"html": "<div wire:id=\"7ec78e2fb579c6913a04970fb7c10988 \"class=\"wireOuterWrapper
"returns": [ null ]
}
}
]
}
What is returned from the server for Livewire.jsto parse?
CBWire Response

36. www.intothebox.org
Under the Hood
{
"components": [
{
"snapshot": "{\"data\":{\"counter\":1},\"memo\":{\"id\":\"7ec78e2fb579c6913a04970fb7c10988 \
"effects": {
"html": "<div wire:id=\"7ec78e2fb579c6913a04970fb7c10988 \"class=\"wireOuterWrapper
"returns": [ null ]
}
}
]
}
What is returned from the server for Livewire.jsto parse?
CBWire Response

37. Let’s See It In Action
https://github.com/mrigsby/CatchingWire

38. www.intothebox.org
Just Scratching The Surface
➢More Template Directives
➢Single file wires
➢Alpine.jsspecific functionality
➢Cached Actions, AKA Computed Properties
➢Nesting Wires
➢Lazy Loading
➢AND MORE…
Some things I didn’t go into:

39. Thank You!
The Future of Modern Development Starts Here, with you!