Reactive CFML with CBWIRE v4 by Ortus Solutions
•
0 likes•86 views
In this session, developers explored CBWIRE, a ColdBox module that simplifies modern, reactive CFML app development without JavaScript frameworks like Vue or React. Attendees learned its usage, benefits, and the new features introduced in CBWIRE version 4, designed based on community feedback. The session catered to developers familiar with ColdBox and CFML, offering practical insights and guidance for leveraging CBWIRE effectively in their projects.
Report
Share
Related slideshows
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
Similar to Reactive CFML with CBWIRE v4 by Ortus Solutions
Similar to Reactive CFML with CBWIRE v4 by Ortus Solutions (20)
More from Ortus Solutions, Corp
More from Ortus Solutions, Corp (20)
Recently uploaded
Recently uploaded (20)
Reactive CFML with CBWIRE v4 by Ortus Solutions
- 1. SESSION PRESENTED BY GRANT COPLEY REACTIVE CFML w/ CBWIRE 4
- 2. GRANT COPLEY • Senior Developer @ Ortus • CFML since 1999 • CBWIRE Lead • Nashville, TN USA • Proud dad, husband • Guitar, beat-maker
- 3. WHAT IS CBWIRE • ColdBox module • Simplifies building modern, reactive CFML apps • Alternate to JavaScript frameworks like VueJS, React • Removes need for unnecessary APIs • Built on Livewire.js and Alpine.js • Single-page applications using CFML
- 4. COMPONENTS • Self-isolated, reactive UI elements • Components consists of a .CFC and .CFM file • CFC holds data properties ( state ), actions ( methods ) • CFM is your component’s HTML • Single file syntax available • Templates need one outer element • Render components using wire( name=“MyForm” )
- 5. COMPONENTS
- 6. COMPONENTS
- 7. EXAMPLE
- 8. DATA PROPERTIES • Component state • Assign our default values when the component initially loads • Update values with Actions on subsequent renderings • Declared using data = { “prop” = value }; • Tracked by JavaScript • Strings, Numbers, Array, Structs, Boolean • Reference in template using #prop# • Stateless, values are passed back and forth
- 9. ACTIONS • Modify our component state • The template is re-rendered after the action is called • Can do anything ( database, mail, PDFs ) • Declare using function actionName() • Triggered by user events using HTML directives • wire:click=“actionName”, can pass params • Params can be anything JavaScript friendly
- 10. HTML DIRECTIVES • wire:model • wire:click • wire:submit • wire:keydown, wire:keydown.enter • wire:poll • wire:loading • wire:loading.class, wire:loading.class.remove • wire:dirty
- 11. ONMOUNT • Fires when component is initially rendered • Does not render on subsequent requests • You can pass parameters – wire( name=“MyComponent”, params={ prop: val } ) • Automatically pass parameters
- 12. DATA BINDING • Data bind input elements using wire:model • <input wire:model=“prop”> • <input wire:model.live=“prop”> • <input wire:model.blur=“prop”> • Front-end reacts to user input, and issues network requests to re-render template
- 13. EVENTS AND LISTENERS • UI components can communicate with each other • You can specify what events to listen for: listeners = { “eventName”: “action” } • Dispatch events using dispatch( event, params ), or dispatchTo( to, event, params).
- 14. CBWIRE 4
- 15. CBWIRE 4 • Alpine.js, Form submissions automatically disable inputs and buttons • Lazy Loading • Execute JS from Actions using js() • Single-page applications with wire:navigate • Streaming Content with wire:stream • Transitions • Request bundling • Complete rewrite
- 16. LIVE CODING 🤞
- 18. RESOURCES
- 20. THANK YOU
- 21. INTO THE BOX 2024 INTO THE BOX 2024