Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ColdFusion and Vue - Building CFML-powered reactive applications

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.

Matt Gifford

October 01, 2019
Tweet

More Decks by Matt Gifford

Other Decks in Technology

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

  4. None
  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
  13. None
  14. None
  15. None
  16. CONDITIONALS Control your display

  17. None
  18. None
  19. None
  20. None
  21. None
  22. LOOPS Data iteration

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. DIRECTIVES Built-in functionality

  30. None
  31. DIRECTIVES Instantly recognisable with the v- prefix Can take arguments

    (eg v-bind:title) Can be written in shorthand Can be dynamic
  32. None
  33. None
  34. TWO-WAY BINDING

  35. TWO-WAY BINDING

  36. None
  37. None
  38. TWO-WAY BINDING

  39. TWO-WAY BINDING

  40. None
  41. None
  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
  45. None
  46. THE LIFECYCLE Process and Order

  47. None
  48. COMPUTED PROPERTIES Separate your logic

  49. COMPUTED PROPERTIES

  50. COMPUTED PROPERTIES

  51. WATCHERS Keeping an eye on changes

  52. WATCHERS

  53. None
  54. None
  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
  71. None
  72. None
  73. COMPONENTS - CREATION

  74. COMPONENTS - CREATION

  75. COMPONENT COMMUNICATION

  76. COMPONENTS - PROPS

  77. COMPONENTS - PROPS

  78. COMPONENTS - PROPS

  79. COMPONENTS - PROPS

  80. None
  81. None
  82. COMPONENT COMMUNICATION

  83. COMPONENT COMMUNICATION

  84. COMPONENT COMMUNICATION

  85. COMPONENT COMMUNICATION

  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. CREATING AN APP Vue CLI

  93. CREATING AN APP npm install -g @vue/cli

  94. CREATING AN APP

  95. None
  96. None
  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

  115. None
  116. None
  117. None
  118. None
  119. None
  120. None
  121. None
  122. None
  123. None
  124. None
  125. None
  126. None
  127. None
  128. None
  129. None
  130. None
  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

  148. None
  149. VUEX - UPDATING OUR APP

  150. None
  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

  154. None
  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?

  164. None
  165. Simplicity

  166. SO, WHY VUE.JS? VERY easy to bind data to HTML

    elements Lightweight and performant Highly extensible
  167. None
  168. None
  169. COLDFUSION & VUE Building CFML-powered reactive applications