SlideShare a Scribd company logo

ITB_2023_CBWire_v3_Grant_Copley.pdf

Ortus Solutions, Corp
Ortus Solutions, Corp
Ortus Solutions, CorpOrtus Solutions, Corp

CBWIRE is a ColdBox module that makes building modern, reactive CFML apps a breeze without needing JavaScript frameworks such as Vue or React, and without the hassle of creating unnecessary APIs. In this session, we will learn CBWIRE, how to use it, and why you would want to. We also cover CBWIRE version 3, which brings a greatly simplified component syntax and many other requested features from the community. Intended Audience This session is intended for developers looking to build modern applications with less JavaScript. Attendees will need familiarity with ColdBox and CFML.

ITB_2023_CBWire_v3_Grant_Copley.pdf

1 of 39
Download to read offline
Session
SESSION
CBWIRE v3
LED BY
Grant Copley
GRANT COPLEY
SPEAKER AT ITB2023
“”If at first you don’t succeed, call it version 1.0.” - Unknown
• Senior Dev @ Ortus
• CFML since Allaire 3.1
• CBWIRE Lead
• Nashville, TN USA
• Proud dad, husband
• Guitar noodler,
beat-maker
What is CBWIRE?
■ ColdBox module
■ Simplifies building modern, reactive CFML apps
■ Removes need for JavaScript frameworks
● Vue, React
■ Removes creating unnecessary APIs
■ Built on Livewire
■ Integrates with AlpineJS
Let’s Code
■ Create a Counter component
■ Add a button that when clicked increments the counter by 1
Thanks to our sponsors
Components
Components
■ Self-isolated, reactive UI elements
■ Components placed in ./wires folder
■ Components defined as .cfm file ( New Syntax )
■ Single outer element <div> or alternate
■ Contain a HTML block ( <cfoutput> ) and a blueprint ( <cfscript> )
■ Rendered using wire( “ComponentName” ).
Ad

Recommended

OSMC 2022 | Icinga for Windows in the Monitoring of Madness by Christian Stein
OSMC 2022 | Icinga for Windows in the Monitoring of Madness by Christian SteinOSMC 2022 | Icinga for Windows in the Monitoring of Madness by Christian Stein
OSMC 2022 | Icinga for Windows in the Monitoring of Madness by Christian SteinNETWAYS
 
Reactive & Realtime Web Applications with TurboGears2
Reactive & Realtime Web Applications with TurboGears2Reactive & Realtime Web Applications with TurboGears2
Reactive & Realtime Web Applications with TurboGears2Alessandro Molina
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
 
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Thinkful
 
MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...
MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...
MongoDB World 2018: Ch-Ch-Ch-Ch-Changes: Taking Your Stitch Application to th...MongoDB
 

More Related Content

Similar to ITB_2023_CBWire_v3_Grant_Copley.pdf

Durable Azure Functions
Durable Azure FunctionsDurable Azure Functions
Durable Azure FunctionsPushkar Saraf
 
Monitoring und Metriken im Wunderland
Monitoring und Metriken im WunderlandMonitoring und Metriken im Wunderland
Monitoring und Metriken im WunderlandD
 
Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)Thinkful
 
Modern Perl Web Development with Dancer
Modern Perl Web Development with DancerModern Perl Web Development with Dancer
Modern Perl Web Development with DancerDave Cross
 
Hanselman lipton asp_connections_ams304_mvc
Hanselman lipton asp_connections_ams304_mvcHanselman lipton asp_connections_ams304_mvc
Hanselman lipton asp_connections_ams304_mvcdenemedeniz
 
AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...
AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...
AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...Amazon Web Services
 
Moving From AngularJS to Angular 2
Moving From AngularJS to  Angular 2 Moving From AngularJS to  Angular 2
Moving From AngularJS to Angular 2 Exilesoft
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in ComponentsAnton Ivanov
 
Intro to javascript (5:2)
Intro to javascript (5:2)Intro to javascript (5:2)
Intro to javascript (5:2)Thinkful
 
Robust C++ Task Systems Through Compile-time Checks
Robust C++ Task Systems Through Compile-time ChecksRobust C++ Task Systems Through Compile-time Checks
Robust C++ Task Systems Through Compile-time ChecksStoyan Nikolov
 
Trends and development practices in Serverless architectures
Trends and development practices in Serverless architecturesTrends and development practices in Serverless architectures
Trends and development practices in Serverless architecturesDiUS
 
Beyond unit tests: Deployment and testing for Hadoop/Spark workflows
Beyond unit tests: Deployment and testing for Hadoop/Spark workflowsBeyond unit tests: Deployment and testing for Hadoop/Spark workflows
Beyond unit tests: Deployment and testing for Hadoop/Spark workflowsDataWorks Summit
 
The Grid the Brad and the Ugly: Using Grids to Improve Your Applications
The Grid the Brad and the Ugly: Using Grids to Improve Your ApplicationsThe Grid the Brad and the Ugly: Using Grids to Improve Your Applications
The Grid the Brad and the Ugly: Using Grids to Improve Your Applicationsbalassaitis
 
Netflix Machine Learning Infra for Recommendations - 2018
Netflix Machine Learning Infra for Recommendations - 2018Netflix Machine Learning Infra for Recommendations - 2018
Netflix Machine Learning Infra for Recommendations - 2018Karthik Murugesan
 
ML Infra for Netflix Recommendations - AI NEXTCon talk
ML Infra for Netflix Recommendations - AI NEXTCon talkML Infra for Netflix Recommendations - AI NEXTCon talk
ML Infra for Netflix Recommendations - AI NEXTCon talkFaisal Siddiqi
 
Expanding your impact with programmability in the data center
Expanding your impact with programmability in the data centerExpanding your impact with programmability in the data center
Expanding your impact with programmability in the data centerCisco Canada
 

Similar to ITB_2023_CBWire_v3_Grant_Copley.pdf (20)

Durable Azure Functions
Durable Azure FunctionsDurable Azure Functions
Durable Azure Functions
 
Monitoring und Metriken im Wunderland
Monitoring und Metriken im WunderlandMonitoring und Metriken im Wunderland
Monitoring und Metriken im Wunderland
 
Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)
 
Activity Recognition
Activity RecognitionActivity Recognition
Activity Recognition
 
Modern Perl Web Development with Dancer
Modern Perl Web Development with DancerModern Perl Web Development with Dancer
Modern Perl Web Development with Dancer
 
Hanselman lipton asp_connections_ams304_mvc
Hanselman lipton asp_connections_ams304_mvcHanselman lipton asp_connections_ams304_mvc
Hanselman lipton asp_connections_ams304_mvc
 
AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...
AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...
AWS re:Invent 2016: How Fulfillment by Amazon (FBA) and Scopely Improved Resu...
 
Moving From AngularJS to Angular 2
Moving From AngularJS to  Angular 2 Moving From AngularJS to  Angular 2
Moving From AngularJS to Angular 2
 
Client sidescripting javascript
Client sidescripting javascriptClient sidescripting javascript
Client sidescripting javascript
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
ASP.NET Basics
ASP.NET Basics ASP.NET Basics
ASP.NET Basics
 
Intro to javascript (5:2)
Intro to javascript (5:2)Intro to javascript (5:2)
Intro to javascript (5:2)
 
Robust C++ Task Systems Through Compile-time Checks
Robust C++ Task Systems Through Compile-time ChecksRobust C++ Task Systems Through Compile-time Checks
Robust C++ Task Systems Through Compile-time Checks
 
Trends and development practices in Serverless architectures
Trends and development practices in Serverless architecturesTrends and development practices in Serverless architectures
Trends and development practices in Serverless architectures
 
Beyond unit tests: Deployment and testing for Hadoop/Spark workflows
Beyond unit tests: Deployment and testing for Hadoop/Spark workflowsBeyond unit tests: Deployment and testing for Hadoop/Spark workflows
Beyond unit tests: Deployment and testing for Hadoop/Spark workflows
 
The Grid the Brad and the Ugly: Using Grids to Improve Your Applications
The Grid the Brad and the Ugly: Using Grids to Improve Your ApplicationsThe Grid the Brad and the Ugly: Using Grids to Improve Your Applications
The Grid the Brad and the Ugly: Using Grids to Improve Your Applications
 
Netflix Machine Learning Infra for Recommendations - 2018
Netflix Machine Learning Infra for Recommendations - 2018Netflix Machine Learning Infra for Recommendations - 2018
Netflix Machine Learning Infra for Recommendations - 2018
 
ML Infra for Netflix Recommendations - AI NEXTCon talk
ML Infra for Netflix Recommendations - AI NEXTCon talkML Infra for Netflix Recommendations - AI NEXTCon talk
ML Infra for Netflix Recommendations - AI NEXTCon talk
 
Expanding your impact with programmability in the data center
Expanding your impact with programmability in the data centerExpanding your impact with programmability in the data center
Expanding your impact with programmability in the data center
 
README
READMEREADME
README
 

More from Ortus Solutions, Corp

Secure your Secrets and Settings in ColdFusion
Secure your Secrets and Settings in ColdFusionSecure your Secrets and Settings in ColdFusion
Secure your Secrets and Settings in ColdFusionOrtus Solutions, Corp
 
Daniel Garcia ContentBox: CFSummit 2023
Daniel Garcia ContentBox: CFSummit 2023Daniel Garcia ContentBox: CFSummit 2023
Daniel Garcia ContentBox: CFSummit 2023Ortus Solutions, Corp
 
ITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdf
ITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdfITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdf
ITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdfOrtus Solutions, Corp
 
ITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdf
ITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdfITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdf
ITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdfOrtus Solutions, Corp
 
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfOrtus Solutions, Corp
 
ITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdf
ITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdfITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdf
ITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdfOrtus Solutions, Corp
 
ITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdf
ITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdfITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdf
ITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdfOrtus Solutions, Corp
 
ITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdf
ITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdfITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdf
ITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdfOrtus Solutions, Corp
 
ITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdf
ITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdfITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdf
ITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdfOrtus Solutions, Corp
 
ITB_2023_Chatgpt_Box_Scott_Steinbeck.pdf
ITB_2023_Chatgpt_Box_Scott_Steinbeck.pdfITB_2023_Chatgpt_Box_Scott_Steinbeck.pdf
ITB_2023_Chatgpt_Box_Scott_Steinbeck.pdfOrtus Solutions, Corp
 
ITB_2023_CommandBox_Task_Runners_Brad_Wood.pdf
ITB_2023_CommandBox_Task_Runners_Brad_Wood.pdfITB_2023_CommandBox_Task_Runners_Brad_Wood.pdf
ITB_2023_CommandBox_Task_Runners_Brad_Wood.pdfOrtus Solutions, Corp
 
ITB2023 Developing for Performance - Denard Springle.pdf
ITB2023 Developing for Performance - Denard Springle.pdfITB2023 Developing for Performance - Denard Springle.pdf
ITB2023 Developing for Performance - Denard Springle.pdfOrtus Solutions, Corp
 
Enterprise Messaging with RabbitMQ.pdf
Enterprise Messaging with RabbitMQ.pdfEnterprise Messaging with RabbitMQ.pdf
Enterprise Messaging with RabbitMQ.pdfOrtus Solutions, Corp
 
CBSecurity 3 - Secure Your ColdBox Applications
CBSecurity 3 - Secure Your ColdBox ApplicationsCBSecurity 3 - Secure Your ColdBox Applications
CBSecurity 3 - Secure Your ColdBox ApplicationsOrtus Solutions, Corp
 

More from Ortus Solutions, Corp (20)

Ortus Government.pdf
Ortus Government.pdfOrtus Government.pdf
Ortus Government.pdf
 
Luis Majano The Battlefield ORM
Luis Majano The Battlefield ORMLuis Majano The Battlefield ORM
Luis Majano The Battlefield ORM
 
Brad Wood - CommandBox CLI
Brad Wood - CommandBox CLI Brad Wood - CommandBox CLI
Brad Wood - CommandBox CLI
 
Secure your Secrets and Settings in ColdFusion
Secure your Secrets and Settings in ColdFusionSecure your Secrets and Settings in ColdFusion
Secure your Secrets and Settings in ColdFusion
 
Daniel Garcia ContentBox: CFSummit 2023
Daniel Garcia ContentBox: CFSummit 2023Daniel Garcia ContentBox: CFSummit 2023
Daniel Garcia ContentBox: CFSummit 2023
 
ITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdf
ITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdfITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdf
ITB_2023_CommandBox_Multi-Server_-_Brad_Wood.pdf
 
ITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdf
ITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdfITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdf
ITB_2023_The_Many_Layers_of_OAuth_Keith_Casey_.pdf
 
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
 
ITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdf
ITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdfITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdf
ITB_2023_25_Most_Dangerous_Software_Weaknesses_Pete_Freitag.pdf
 
ITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdf
ITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdfITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdf
ITB_2023_Practical_AI_with_OpenAI_-_Grant_Copley_.pdf
 
ITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdf
ITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdfITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdf
ITB_2023_When_Your_Applications_Work_As_a_Team_Nathaniel_Francis.pdf
 
ITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdf
ITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdfITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdf
ITB_2023_Faster_Apps_That_Wont_Get_Crushed_Brian_Klaas.pdf
 
ITB_2023_Chatgpt_Box_Scott_Steinbeck.pdf
ITB_2023_Chatgpt_Box_Scott_Steinbeck.pdfITB_2023_Chatgpt_Box_Scott_Steinbeck.pdf
ITB_2023_Chatgpt_Box_Scott_Steinbeck.pdf
 
ITB_2023_CommandBox_Task_Runners_Brad_Wood.pdf
ITB_2023_CommandBox_Task_Runners_Brad_Wood.pdfITB_2023_CommandBox_Task_Runners_Brad_Wood.pdf
ITB_2023_CommandBox_Task_Runners_Brad_Wood.pdf
 
ITB2023 Developing for Performance - Denard Springle.pdf
ITB2023 Developing for Performance - Denard Springle.pdfITB2023 Developing for Performance - Denard Springle.pdf
ITB2023 Developing for Performance - Denard Springle.pdf
 
Enterprise Messaging with RabbitMQ.pdf
Enterprise Messaging with RabbitMQ.pdfEnterprise Messaging with RabbitMQ.pdf
Enterprise Messaging with RabbitMQ.pdf
 
Into The Box 2023 Keynote day 2
Into The Box 2023 Keynote day 2Into The Box 2023 Keynote day 2
Into The Box 2023 Keynote day 2
 
Into The Box 2023 Keynote Day 1
Into The Box 2023 Keynote Day 1Into The Box 2023 Keynote Day 1
Into The Box 2023 Keynote Day 1
 
Secure all things with CBSecurity 3
Secure all things with CBSecurity 3Secure all things with CBSecurity 3
Secure all things with CBSecurity 3
 
CBSecurity 3 - Secure Your ColdBox Applications
CBSecurity 3 - Secure Your ColdBox ApplicationsCBSecurity 3 - Secure Your ColdBox Applications
CBSecurity 3 - Secure Your ColdBox Applications
 

Recently uploaded

"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...ISPMAIndia
 
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...confluent
 
The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!ISPMAIndia
 
Les02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptLes02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptDrZeeshanBhatti
 
Sql server types of joins with example.pptx
Sql server types of joins with example.pptxSql server types of joins with example.pptx
Sql server types of joins with example.pptxsameer gaikwad
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Asher Sterkin
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxmavinoikein
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...ISPMAIndia
 
App Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptxApp Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptxPoojitha B
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이ssuser82c38d
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetMatthewTHawley
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...ISPMAIndia
 
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTSi-engage
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriISPMAIndia
 
maximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsmaximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsssuser82c38d
 
Manual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12FxManual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12Fxjavierdavidvelasco17
 
Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...
Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...
Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...Oleksandr Zaitsev
 
Embracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio ManagementEmbracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio ManagementOnePlan Solutions
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAutokey
 

Recently uploaded (20)

"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
 
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
 
The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!
 
Les02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptLes02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.ppt
 
Sql server types of joins with example.pptx
Sql server types of joins with example.pptxSql server types of joins with example.pptx
Sql server types of joins with example.pptx
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptx
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
 
App Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptxApp Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptx
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 Smartsheet
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
 
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit Bendigiri
 
maximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsmaximum subarray ppt for killing camp students
maximum subarray ppt for killing camp students
 
Features of IETM Software -Code and Pixels
Features of IETM Software -Code and PixelsFeatures of IETM Software -Code and Pixels
Features of IETM Software -Code and Pixels
 
Manual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12FxManual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12Fx
 
Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...
Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...
Cormas: Modelling for Citizens with Citizens. Building accessible and reliabl...
 
Embracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio ManagementEmbracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio Management
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
 

ITB_2023_CBWire_v3_Grant_Copley.pdf

  • 2. GRANT COPLEY SPEAKER AT ITB2023 “”If at first you don’t succeed, call it version 1.0.” - Unknown • Senior Dev @ Ortus • CFML since Allaire 3.1 • CBWIRE Lead • Nashville, TN USA • Proud dad, husband • Guitar noodler, beat-maker
  • 3. What is CBWIRE? ■ ColdBox module ■ Simplifies building modern, reactive CFML apps ■ Removes need for JavaScript frameworks ● Vue, React ■ Removes creating unnecessary APIs ■ Built on Livewire ■ Integrates with AlpineJS
  • 4. Let’s Code ■ Create a Counter component ■ Add a button that when clicked increments the counter by 1
  • 5. Thanks to our sponsors Components
  • 6. Components ■ Self-isolated, reactive UI elements ■ Components placed in ./wires folder ■ Components defined as .cfm file ( New Syntax ) ■ Single outer element <div> or alternate ■ Contain a HTML block ( <cfoutput> ) and a blueprint ( <cfscript> ) ■ Rendered using wire( “ComponentName” ).
  • 7. How is this working?
  • 8. Let’s Code ■ Use dev tools to monitor CBWIRE requests ■ Talk about HTML-over-the-wire
  • 9. Thanks to our sponsors Data Properties
  • 10. Data Properties ■ Component state ● Assigned default values ■ Declared using data = { “propertyName”: “defaultValue” } ● CFSCRIPT block ■ Can be modified when Actions are called ■ Tracked by JavaScript
  • 11. Data Properties ■ Values must be JavaScript friendly data types ● Strings, Numbers, Arrays, Structs, Booleans ● No complex CFML data types ( Queries, Object instances ) ■ Defined using double or single quotes ■ Reference in HTML using #propertyName# ■ Reference in CFSCRIPT using data.propertyName
  • 12. Let’s Code ■ Create a resetCounter action that sets the counter back to 0 ■ Use data.counter = 0 ■ Use reset() instead
  • 13. Data Properties & Security ■ Values of data properties are included with each XHR response ■ NEVER store sensitive data ● Passwords ● SSNs
  • 14. Thanks to our sponsors Actions
  • 15. Actions ■ Actions ● Modify our component’s state ○ Alter the component’s rendered HTML ● Perform some task ( sending email ) ■ Declared as function actionName() {} in the CFSCRIPT block ■ Triggered by Directives ● wire:click=”actionName”
  • 16. Actions ■ Can pass parameters ● wire:click=”actionName( ‘param1’, ‘param2’ )” ■ Parameters are passed to your actions ● function actionName( param1, param2 ) {} ■ Params must be JavaScript friendly data types
  • 17. Let’s Code ■ Add a button that increments the counter by a set amount. ■ Pass the number to your action as a parameter. incrementBy( 100 ) ■ Button click increments counter by the given amount
  • 18. Thanks to our sponsors Computed Properties
  • 19. Computed Properties ■ Invokes only during component rendering ■ Declare using computed = { propertyName: function () {} } within CFSCRIPT block ■ Return any CFML data type ■ Good for returning derived values ● Queries, ORM objects, etc… ■ Not parsed by JavaScript
  • 20. Computed Properties ■ Reference in HTML using #propertyName()# ■ Reference in Actions using computed.propertyName(). ■ Only invoked when called ■ Cached when invoked the first time ● Prevent caching by passing false. #propertyName( false )#
  • 21. Let’s Code ■ Add an isEven() computed property ● Displays if counter value is even or odd ■ Display result on the page
  • 22. Let’s Code ■ Create another instance of wire( “Counter” )
  • 23. Thanks to our sponsors onMount
  • 24. onMount ■ Fires only when a component is initially rendered ● Not on subsequent renders ■ Pass parameters when calling wire() that ● Intercept with onMount() ■ wire( “Counter”, { “someParam” : “someValue” } )
  • 25. Coding Challenge ■ Make one of the counters start at 100 using onMount().
  • 26. Thanks to our sponsors Data Binding
  • 27. Data Binding ■ Bind input elements with Data Properties using wire:model ● <input wire:model=”dataProperty” type=”text”> ● <input wire:model=”dataProperty” type=”checkbox” value=”true”> ● <input wire:model=”dataProperty” type=”radio” value=”1”> ● <select wire:model=”dataProperty”> ● <textarea wire:model=”dataProperty”> ■ As the user types or enters data, the component re-renders
  • 28. Let’s Code ■ Create a form component ● Firstname and lastname input fields ■ Use wire:model to bind the inputs to data properties ■ Display the data properties on the page to see the updates
  • 29. Let’s Code ■ Use wire:model.debounce to slow down server updates ■ Use wire:model.lazy to prevent server update until user clicks away from input ■ Use wire:model.defer to prevent server update until an action is called
  • 30. Thanks to our sponsors Directives
  • 31. Directives ■ wire:model ■ wire:click ■ wire:submit ■ wire:keydown ■ wire:keydown.enter ■ wire:poll ■ wire:init ■ wire:loading ■ wire:loading.class ■ wire:loading.class.remove ■ wire:loading.attr ■ wire:dirty ■ wire:target ■ wire:ignore ■ ….
  • 32. Thanks to our sponsors Events
  • 33. Events & Listeners ■ Components communicate using events and listeners ■ Emit events within actions using emit( “eventName” ) ■ Listen for events using listeners = { “eventName” : “action” } in CFSCRIPT block
  • 34. Coding Challenge ■ Emit an event from the Counter component ■ Listen for the event in another component
  • 36. CBWIRE v3 CBWIRE v3 announcing here @ ITB 2023 - 19 tickets completed ( 13 enhancements, 6 bugs ) - Refactored and optimized core - New Component Syntax - New integration with AlpineJS ( Entangle ) - Improved Component Testing - New Lifecycle Hooks - Documentation updates AND MORE...
  • 37. Thanks to our sponsors RESOURCES
  • 38. Thanks to our sponsors QA
  • 39. THANK YOU Thanks to our sponsors