CBWIRE

Build stunning, reactive CFML apps at lightning speed

Remove the need to build unnecessary APIs, embrace modern magic.

HAS SOFTWARE DEVELOPMENT BECOME THIS FOR YOU?

API Development

Building robust back-end APIs requires more than just writing code. It’s about handling authentication, ensuring security, implementing scalability, and meticulously testing every endpoint. All this, just to fetch data on your front-end, which adds layers of complexity and maintenance over time.

Steep Learning curve

Mastering modern JavaScript frameworks like Vue.js or React demands an investment of weeks, if not months. You’re not just learning syntax but also intricate client-side state management, routing, and performance optimizations. The process can feel overwhelming, slowing down your path to building interactive applications.

Poor User Experience

When applications rely on constant page reloads to fetch or display new data, it frustrates users with slow interactions and disrupts the flow of engagement. Modern users expect seamless, real-time updates without page refreshes, and delivering that experience is crucial for keeping them engaged.

JS Build Tools

Dealing with NPM, Webpack, and a mountain of build dependencies can be a project in itself. Each step from compiling JavaScript to bundling assets introduces its own set of challenges, consuming time and brainpower better spent elsewhere. The complexity grows as your project scales, making these tools a constant overhead to manage.

CBWIRE transforms the modern software development process by drastically simplifying the complexity of building dynamic, real-time applications. Instead of navigating the steep learning curve of traditional JavaScript frameworks or wrestling with complex APIs, CBWIRE offers a streamlined, efficient approach that cuts down development time and reduces technical overhead. It empowers developers to focus on delivering powerful user experiences without being bogged down by the intricacies of client-side frameworks or build tools.

CBWIRE is a ColdBox module that uses Livewire and Alpine.js to help you build modern, reactive, CFML applications in record time without building backend APIs.

The Problem Landscape

JavaScript Framework Overhead

JavaScript frameworks like Vue, React, or Angular are powerful but come with a steep learning curve. They demand an in-depth understanding of not just JavaScript but also each framework’s unique quirks, adding to development complexity.

API Complexity

Building dynamic apps often means designing complex backend APIs. This process is time-consuming, requiring thoughtful planning to ensure secure, efficient, and scalable integrations with the front end.

Security Concerns

Using APIs and client-side JavaScript introduces vulnerabilities, like cross-site scripting (XSS) and API exposure. Ensuring robust security measures is critical but adds significant overhead.

Maintenance and Scalability

Keeping applications up to date with JavaScript framework changes, managing dependencies, and ensuring smooth scalability is challenging. Both front-end and back-end codebases must grow in sync, requiring ongoing attention and resources.

How CBWIRE Solves These Problems

CBWIRE eliminates the need for heavy JavaScript frameworks by enabling server-side rendering with real-time, reactive UI updates. It reduces reliance on APIs by managing data interactions directly within CFML, simplifying your tech stack. Security is enhanced with server-driven logic, reducing exposure to common client-side vulnerabilities. Maintenance becomes easier as you avoid JavaScript-heavy dependencies and focus on ColdFusion-based logic that naturally scales with your application.

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>
    <body>
        <!— INSERT A COUNTER HERE —>
        #wire( "Counter" )#
    </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>