ColdFusion and Vue - Building CFML-powered reactive applications

This presentation was given at the Adobe ColdFusion 2019 Summit in Las Vegas, NV on October 1st, 2019.

Transcript

1. COLDFUSION & VUE Building CFML-powered reactive applications
2. 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
3. MATT GIFFORD @coldfumonkeh consultant developer writer gin drinker runner Distrokid
5. WHAT IS VUE.JS?
6. WHAT IS VUE.JS? A progressive framework Allows for incremental additions to an existing application
7. GETTING STARTED Vue.js Intro
8. VUE DEVTOOLS Debug your application
9. VUE DEVTOOLS https://github.com/vuejs/vue-devtools
10. GETTING STARTED
11. DECLARATIVE RENDERING Getting started
12. DECLARATIVE RENDERING Render data to the DOM in a simple way
16. CONDITIONALS Control your display
22. LOOPS Data iteration
29. DIRECTIVES Built-in functionality
31. DIRECTIVES Instantly recognisable with the v- prefix Can take arguments (eg v-bind:title) Can be written in shorthand Can be dynamic
34. TWO-WAY BINDING
35. TWO-WAY BINDING
38. TWO-WAY BINDING
39. TWO-WAY BINDING
42. TWO-WAY BINDING Whenever a model’s property changes, change the bound element Whenever a bound element changes, change the model’s property
43. HANDY DIRECTIVE MODIFIERS
44. EVENT MODIFIERS Special prefixes denoted by a dot Order matters when writing modifiers
46. THE LIFECYCLE Process and Order
48. COMPUTED PROPERTIES Separate your logic
49. COMPUTED PROPERTIES
50. COMPUTED PROPERTIES
51. WATCHERS Keeping an eye on changes
52. WATCHERS
55. FILTERS Common text formatting you control
56. FILTERS
57. FILTERS
58. COMPONENTS The building blocks for your app
59. COMPONENTS
60. COMPONENTS HEADER
61. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
62. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
63. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
64. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
65. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
66. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
67. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
68. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
69. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet nav1 | nav2 | nav3 | nav4
70. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet nav1 | nav2 | nav3 | nav4
73. COMPONENTS - CREATION
74. COMPONENTS - CREATION
75. COMPONENT COMMUNICATION
76. COMPONENTS - PROPS
77. COMPONENTS - PROPS
78. COMPONENTS - PROPS
79. COMPONENTS - PROPS
82. COMPONENT COMMUNICATION
83. COMPONENT COMMUNICATION
84. COMPONENT COMMUNICATION
85. COMPONENT COMMUNICATION
92. CREATING AN APP Vue CLI
93. CREATING AN APP npm install -g @vue/cli
94. CREATING AN APP
97. .VUE FILES Single-file components Clearly structured with: template, script and style blocks
98. TEMPLATE
99. TEMPLATE SCRIPT
100. TEMPLATE SCRIPT STYLE
101. CREATING AN APP npm install bootstrap-vue bootstrap
102. CREATING AN APP - USING PLUGINS
103. ROUTING Singe Page Application
104. ROUTING npm install vue-router
105. ROUTING
106. ROUTING
107. ROUTING
108. ROUTING
109. ROUTING
110. USING AN API Fetching external data
111. USING AN API - AXIOS Supports the Promise API Transform request and response data Automatic JSON data transformations Support for XSRF
112. USING AN API - AXIOS
113. npm install axios USING AN API - AXIOS
114. USING AN API - AXIOS
131. VUEX STORES State Management
132. VUEX npm install vuex
133. VUEX
134. VUEX
135. 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
136. VUEX
137. VUEX
138. VUEX
139. VUEX
140. VUEX
141. VUEX
142. CREATING A STORE
143. STATE
144. GETTERS
145. ACTIONS
146. MUTATION
147. VUEX - UPDATING OUR APP
149. VUEX - UPDATING OUR APP
151. 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
152. VUEX https://vuex.vuejs.org/
153. COLDBOX ELIXIR Bundle your application assets
155. COLDBOX ELIXIR
156. COLDBOX ELIXIR git clone https://github.com/coldbox-templates/elixir-vuejs
157. COLDBOX ELIXIR
158. WHERE NEXT? Additional Vue.js Tools
159. VUEJS.ORG
160. NUXTJS.ORG
161. COLDBOX-ELIXIR.ORTUSBOOKS.COM
162. MUCH MORE Transitions & Animations Mixins & Custom Directives and much more… Unit Testing
163. WHY VUE.JS?
165. Simplicity
166. SO, WHY VUE.JS? VERY easy to bind data to HTML elements Lightweight and performant Highly extensible
169. COLDFUSION & VUE Building CFML-powered reactive applications