Software Development, Web Design, Training

Oct-03-2019

ColdFusion Summit Notes: ColdFusion And Vue, Matt Gifford

Matt Gifford speaking at ColdFusion Summit 2019

Fresh off a 20+ hour journey from Europe, Matt Gifford gave an excellent presentation on using Vue.js with ColdFusion. Had he not mentioned it, you'd never have guessed he was extremely jet-lagged. Matt is is as professional of a speaker as they come, and a dear friend to boot. It was great having him join us this year.

What is Vue.js?

  • a progressive framework
  • allows for incremental additions to an existing app
  • don't have to build from the ground up with it
  • can easily add Vue.js components into an exiting app (a sidebar, etc)
  • Component Based
  • easily to create components
  • modular
  • have to think about the app you’re building, see how you can reuse these components to essentially streamline your codebase

(Vue.js does not support IE8 and older.)

Getting Started

  • Before installing Vue.js download Vue DevTools
  • plugin for firebox and chrome
  • fairly self explanatory
  • if you’ve ever used the console, this is a must-have add-on built for Vue
  • can grab it from https://github.com/vuejs/vue-devtools
  • see what data a component has, and what it’s passing to other components, etc.
  • can see certain states of the app, time travel within in

define a Div with a particular ID
give that element ID to Vue so we know that’s where the Vue stuff will live

var app = new Vue( { el: “#someID”, data: {} );

Declarative rendering

  • ala Mustache rendering
  • nice and easy to output info

Conditionals

<button v-on:click=“show=!show”>Toggle</button>
<p v-if=“show”>Conditionals FTW</p>
var app = new Vue( }el+”#app”, data: { show: false } );

If you’re writing a Vue app, don’t always have to interact with the UI, you can just step thru everything to see what’s going to change. can do this by changing the properties in the browser console as well.

<p v-else> can go after the <v-if> (but must be the tag immediately after v-if, cannot have tags between the 2)

Looping in Vue.js

  • v-for
  • “key” attribute used for hooking into the DOM
  • things in the array need to have unique keys
  • :key=“artist.id”

Directives

  • job = to apply side effects to the DOM when its value changes
  • Bind this message to title, and if message changes, change title as well.
<span v-bind:title=“message”>
{{ message }}
</span>

Directives

  • Instantly recognizable with the v- prefix
  • can take arguments (e.v. v-bind)

bind the href attribute:

<a v-bind:href=“url”>view information</a>
same as
<a :bind=“url”>view information</a>

Two-Way Binding

  • easy to bind data in Vue
  • >whenever a model’s prop changes, change the bound element
  • whenever a bound element changes, change the model’s prop too

v-model.lazy
instead of binding on EVERY keystroke from the user, wait until user is done typing, THEN do the binding

Event Modifiers

  • noted by the dot notation
  • order matters when writing modifiers
  • Vue will tell you if you did something wrong with the sequence
  • and the err msgs are fairy informative

prevent modifier

  • ala the jQuery.preventDefault() for stopping a form from submitting
  • so i can do other things instead of submitting the form
<form v-on:submit.prevent=“onSubit”>…</form>

The Lifecycle

  • compiling view
  • when compiling each Vue instance, goes thru a series of steps
  • set of data observation, compile templates, runs lifecycle hooks, etc.
  • beforeCreate:
    created:
    beforeMount:
    mounted:
    destroyed:

Computed Properties

computed: {
fullName: function(){ return this.firstName + ‘ ‘ + this.lastName }
}
<span v-bind:title:”fullName”>
{{fullName}}
</span>

Watchers

  • provide a way for you to do a lot of things
  • used for detecting changes in groups and reacting accordingly
  • or used for client side validation to some text as well

Filters

  • common text formatting you can control
  • common use cases: take a string and add a currency formatting to it, or a decimal place at the end, etc.
  • If you define the filters in Vue.filter before you start your app, Vue will pick it up and register it automatically so it is globally available.

Components

  • everything you do in Vue ultimately becomes a component
  • helps to think visually about what it is you want to build
    (hopefully you have some mockups to work from or a theme, etc)
  • Want to repurpose as much as you can
  • make things small, manageable and testable

The Vue CLI

  • Quickest way to create an app
npm install -g @vue/cli
vue create my_music_app

answer the questions/defaults, and it creates the app, starts the server, and you have an app running.

lots of pulg-ins available

npm install bootstrap-vue bootstrap

chances are the plug-ins you need already exist, lots are available.

Routing

  • npm install vue-router
  • needs to be installed separately from the core Vue stuff
  • you have an array of routes, you provide the path it relates to, the actual component that should be accessed, and the name for that route
  • dynamic values in the url routes:
path: '/artists/:id', component: ArtistDetail, name='artistdetail'

use the :id style syntax just like in Angular, etc. for URL/route parameters

Using an API

  • Axios, the preferred Fetch library
  • Supports the Promise api
  • transform request and response data
  • automatic JSON data transformations
  • Support for XSRF
npm install axios

can chain calls together:

axios
.get( ‘api_url’ )
.then( response => { self.artists = response.data } )
.finally( () => self.isLoading = false )

Vuex

  • external library written by the Vue team
  • designed for managing your application state data
  • ideally for long term productivity and larger applications
  • no “one way” to structure the store
  • downside: more concepts, boilerplate code and architectural structure

if your end goal solution is to create a streamlined app with as little code as possible, this does add some extra code, but the problem it solves is worth the extra code

Why Vuex?

  • Keep a single source of truth for data
  • available for all components to access
  • avoid having to send properties and emit data between every component
  • Using vuex to create posts to the API is very easy as well
  • https://vuex.vuejs.org

ColdBox Elixir

  • bundles your application assets
  • essentially a WebPack API communicator
  • bundle your assets (css, images, etc)
  • Elixir handles that WebPack/Grunt style stuff for you
  • Vue specific skeleton for that is available:
    github/coldbox-templates/elixir-vuejs
  • Can do a CFML powered Vue.js application from that template

Additional Vue.js Tools

Find Matt on Twitter: @coldfumonkeh