COLDFUSION & VUE
Building CFML-powered reactive applications
MEANWHILE…
Practical Functional Programming in ColdFusion
Shake N’Bake: Top 10 Performance Tuning Tricks to put you in First Place
Try This At Home: Building Your Own ColdFusion Swarm
MATT GIFFORD
@coldfumonkeh
consultant developer
writer
gin drinker
runner
Distrokid
WHAT IS VUE.JS?
WHAT IS VUE.JS?
A progressive framework
Allows for incremental additions to an existing application
GETTING STARTED
Vue.js Intro
VUE DEVTOOLS
Debug your application
VUE DEVTOOLS
https://github.com/vuejs/vue-devtools
GETTING STARTED
DECLARATIVE
RENDERING
Getting started
DECLARATIVE RENDERING
Render data to the DOM in a simple way
CONDITIONALS
Control your display
LOOPS
Data iteration
DIRECTIVES
Built-in functionality
DIRECTIVES
Instantly recognisable with the v- prefix
Can take arguments (eg v-bind:title)
Can be written in shorthand
Can be dynamic
TWO-WAY BINDING
TWO-WAY BINDING
TWO-WAY BINDING
TWO-WAY BINDING
TWO-WAY BINDING
Whenever a model’s property changes, change the bound element
Whenever a bound element changes, change the model’s property
HANDY DIRECTIVE MODIFIERS
EVENT MODIFIERS
Special prefixes denoted by a dot
Order matters when writing modifiers
THE LIFECYCLE
Process and Order
COMPUTED
PROPERTIES
Separate your logic
COMPUTED PROPERTIES
COMPUTED PROPERTIES
WATCHERS
Keeping an eye on changes
WATCHERS
FILTERS
Common text formatting you control
FILTERS
FILTERS
COMPONENTS
The building blocks for your app
COMPONENTS
COMPONENTS
HEADER
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
nav1 | nav2 | nav3 | nav4
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS
HEADER
nav1 | nav2 | nav3 | nav4
Title
Lorem issue dollar sit amet
Title
Lorem issue dollar sit amet
COMPONENTS - CREATION
COMPONENTS - CREATION
COMPONENT COMMUNICATION
COMPONENTS - PROPS
COMPONENTS - PROPS
COMPONENTS - PROPS
COMPONENTS - PROPS
COMPONENT COMMUNICATION
COMPONENT COMMUNICATION
COMPONENT COMMUNICATION
COMPONENT COMMUNICATION
CREATING AN APP
Vue CLI
CREATING AN APP
npm install -g @vue/cli
CREATING AN APP
.VUE FILES
Single-file components
Clearly structured with: template, script and style blocks
TEMPLATE
TEMPLATE
SCRIPT
TEMPLATE
SCRIPT
STYLE
CREATING AN APP
npm install bootstrap-vue bootstrap
CREATING AN APP - USING PLUGINS
ROUTING
Singe Page Application
ROUTING
npm install vue-router
ROUTING
ROUTING
ROUTING
ROUTING
ROUTING
USING AN API
Fetching external data
USING AN API - AXIOS
Supports the Promise API
Transform request and response data
Automatic JSON data transformations
Support for XSRF
USING AN API - AXIOS
USING AN API - AXIOS
npm install axios
USING AN API - AXIOS
VUEX STORES
State Management
VUEX
npm install vuex
VUEX
VUEX
VUEX
Helps to deal with shared state management
Ideal for long term productivity and larger applications
No “one-way” to structure the store
More concepts, boilerplate code and architectural structure
VUEX
VUEX
VUEX
VUEX
VUEX
VUEX
CREATING A STORE
STATE
GETTERS
ACTIONS
MUTATION
VUEX - UPDATING OUR APP
VUEX - UPDATING OUR APP
SO, WHY VUEX?
Keep a single source of truth for data
Available for all components to access
Avoid having to send props and emit data between every component
VUEX
https://vuex.vuejs.org/
COLDBOX ELIXIR
Bundle your application assets
COLDBOX ELIXIR
COLDBOX ELIXIR
git clone https://github.com/coldbox-templates/elixir-vuejs
COLDBOX ELIXIR
WHERE NEXT?
Additional Vue.js Tools
VUEJS.ORG
NUXTJS.ORG
COLDBOX-ELIXIR.ORTUSBOOKS.COM
MUCH MORE
Transitions & Animations
Mixins & Custom Directives
Unit Testing
and much more…
WHY VUE.JS?
Simplicity
SO, WHY VUE.JS?
VERY easy to bind data to HTML elements
Lightweight and performant
Highly extensible
COLDFUSION & VUE
Building CFML-powered reactive applications
