ColdFusion and Vue - Building CFML-powered reactive applications

An in-depth introduction to Vue.js and implementing a CFML-powered API into your reactive application.

Given at CFCamp2019 in Munich, Germany.

Transcript

1. COLDFUSION & VUE Building CFML-powered reactive applications
2. MATT GIFFORD @coldfumonkeh DistroKid writer gin drinker runner many dogs
3. WHAT IS VUE.JS? A progressive framework Allows for incremental additions to an existing application
4. GETTING STARTED Vue.js Intro
5. VUE DEVTOOLS Debug your application
6. VUE DEVTOOLS https://github.com/vuejs/vue-devtools
7. GETTING STARTED
8. DECLARATIVE RENDERING Getting started
9. DECLARATIVE RENDERING Render data to the DOM in a simple way
12. CONDITIONALS Control your display
15. LOOPS Data iteration
20. DIRECTIVES Built-in functionality
22. DIRECTIVES Instantly recognisable with the v- prefix Can take arguments (eg v-bind:title) Can be written in shorthand Can be dynamic
25. TWO-WAY BINDING
27. TWO-WAY BINDING
29. TWO-WAY BINDING Whenever a model’s property changes, change the bound element Whenever a bound element changes, change the model’s property
30. HANDY DIRECTIVE MODIFIERS
31. EVENT MODIFIERS Special prefixes denoted by a dot Order matters when writing modifiers
33. THE LIFECYCLE Process and Order
35. COMPUTED PROPERTIES Separate your logic
36. COMPUTED PROPERTIES
37. WATCHERS Keeping an eye on changes
38. WATCHERS
40. FILTERS Common text formatting you control
41. FILTERS
42. FILTERS
43. COMPONENTS The building blocks for your app
44. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
45. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
46. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
47. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
48. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
49. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
50. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet
51. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet nav1 | nav2 | nav3 | nav4
52. COMPONENTS HEADER Title Title Lorem issue dollar sit amet Lorem issue dollar sit amet nav1 | nav2 | nav3 | nav4
54. COMPONENTS - CREATION
55. COMPONENT COMMUNICATION
56. COMPONENTS - PROPS
57. COMPONENTS - PROPS
59. COMPONENT COMMUNICATION
60. COMPONENT COMMUNICATION
61. COMPONENT COMMUNICATION
62. COMPONENT COMMUNICATION
68. CREATING AN APP Vue CLI
69. CREATING AN APP npm install -g @vue/cli
70. CREATING AN APP
73. .VUE FILES Single-file components Clearly structured with: template, script and style blocks
74. TEMPLATE
75. TEMPLATE SCRIPT
76. TEMPLATE SCRIPT STYLE
77. CREATING AN APP npm install bootstrap-vue bootstrap
78. CREATING AN APP - USING PLUGINS
79. ROUTING Singe Page Application
80. ROUTING npm install vue-router
81. ROUTING
82. ROUTING
83. ROUTING
84. USING AN API Fetching external data
85. USING AN API - AXIOS Supports the Promise API Transform request and response data Automatic JSON data transformations Support for XSRF
86. USING AN API - AXIOS
87. npm install axios USING AN API - AXIOS
88. USING AN API - AXIOS
95. VUEX STORES State Management
96. VUEX npm install vuex
97. VUEX
98. VUEX
99. 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
100. VUEX
101. VUEX
102. VUEX
103. VUEX
104. CREATING A STORE
105. STATE
106. GETTERS
107. ACTIONS
108. MUTATION
109. VUEX - UPDATING OUR APP
111. VUEX - UPDATING OUR APP
113. 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
114. VUEX https://vuex.vuejs.org/
115. COLDBOX ELIXIR Bundle your application assets
117. COLDBOX ELIXIR
118. COLDBOX ELIXIR git clone https://github.com/coldbox-templates/elixir-vuejs
119. COLDBOX ELIXIR
120. WHERE NEXT? Additional Vue.js Tools
121. VUEJS.ORG
122. NUXTJS.ORG
123. COLDBOX-ELIXIR.ORTUSBOOKS.COM
124. MUCH MORE Transitions & Animations Mixins & Custom Directives and much more… Unit Testing
125. WHY VUE.JS?
127. Simplicity
128. SO, WHY VUE.JS? VERY easy to bind data to HTML elements Lightweight and performant Highly extensible
130. COLDFUSION & VUE Building CFML-powered reactive applications