COLDFUSION & VUE
Building CFML-powered reactive applications
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
MATT GIFFORD
@coldfumonkeh
consultant developer
writer
gin drinker
runner
Distrokid
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
WHAT IS VUE.JS?
Slide 6
Slide 6 text
WHAT IS VUE.JS?
A progressive framework
Allows for incremental additions to an existing application
CREATING AN APP
npm install bootstrap-vue bootstrap
Slide 102
Slide 102 text
CREATING AN APP - USING PLUGINS
Slide 103
Slide 103 text
ROUTING
Singe Page Application
Slide 104
Slide 104 text
ROUTING
npm install vue-router
Slide 105
Slide 105 text
ROUTING
Slide 106
Slide 106 text
ROUTING
Slide 107
Slide 107 text
ROUTING
Slide 108
Slide 108 text
ROUTING
Slide 109
Slide 109 text
ROUTING
Slide 110
Slide 110 text
USING AN API
Fetching external data
Slide 111
Slide 111 text
USING AN API - AXIOS
Supports the Promise API
Transform request and response data
Automatic JSON data transformations
Support for XSRF
Slide 112
Slide 112 text
USING AN API - AXIOS
Slide 113
Slide 113 text
npm install axios
USING AN API - AXIOS
Slide 114
Slide 114 text
USING AN API - AXIOS
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
VUEX STORES
State Management
Slide 132
Slide 132 text
VUEX
npm install vuex
Slide 133
Slide 133 text
VUEX
Slide 134
Slide 134 text
VUEX
Slide 135
Slide 135 text
VUEX
Helps to deal with shared state management
Ideal for long term productivity and larger applications
More concepts, boilerplate code and architectural structure
No “one-way” to structure the store
Slide 136
Slide 136 text
VUEX
Slide 137
Slide 137 text
VUEX
Slide 138
Slide 138 text
VUEX
Slide 139
Slide 139 text
VUEX
Slide 140
Slide 140 text
VUEX
Slide 141
Slide 141 text
VUEX
Slide 142
Slide 142 text
CREATING A STORE
Slide 143
Slide 143 text
STATE
Slide 144
Slide 144 text
GETTERS
Slide 145
Slide 145 text
ACTIONS
Slide 146
Slide 146 text
MUTATION
Slide 147
Slide 147 text
VUEX - UPDATING OUR APP
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
VUEX - UPDATING OUR APP
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
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