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

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

Given at CFCamp2019 in Munich, Germany.

0a9fcc5e8302fa9b1a9b4573bee0d547?s=128

Matt Gifford

October 17, 2019
Tweet

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
  10. None
  11. None
  12. CONDITIONALS Control your display

  13. None
  14. None
  15. LOOPS Data iteration

  16. None
  17. None
  18. None
  19. None
  20. DIRECTIVES Built-in functionality

  21. None
  22. DIRECTIVES Instantly recognisable with the v- prefix Can take arguments

    (eg v-bind:title) Can be written in shorthand Can be dynamic
  23. None
  24. None
  25. TWO-WAY BINDING

  26. None
  27. TWO-WAY BINDING

  28. None
  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
  32. None
  33. THE LIFECYCLE Process and Order

  34. None
  35. COMPUTED PROPERTIES Separate your logic

  36. COMPUTED PROPERTIES

  37. WATCHERS Keeping an eye on changes

  38. WATCHERS

  39. None
  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
  53. None
  54. COMPONENTS - CREATION

  55. COMPONENT COMMUNICATION

  56. COMPONENTS - PROPS

  57. COMPONENTS - PROPS

  58. None
  59. COMPONENT COMMUNICATION

  60. COMPONENT COMMUNICATION

  61. COMPONENT COMMUNICATION

  62. COMPONENT COMMUNICATION

  63. None
  64. None
  65. None
  66. None
  67. None
  68. CREATING AN APP Vue CLI

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

  70. CREATING AN APP

  71. None
  72. None
  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

  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  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

  110. None
  111. VUEX - UPDATING OUR APP

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

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

  126. None
  127. Simplicity

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

    elements Lightweight and performant Highly extensible
  129. None
  130. COLDFUSION & VUE Building CFML-powered reactive applications