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.

Matt Gifford

October 17, 2019
Tweet

More Decks by Matt Gifford

Other Decks in Technology

Transcript

  1. COLDFUSION & VUE
    Building CFML-powered reactive applications

    View full-size slide

  2. MATT GIFFORD
    @coldfumonkeh
    DistroKid
    writer
    gin drinker
    runner
    many dogs

    View full-size slide

  3. WHAT IS VUE.JS?
    A progressive framework
    Allows for incremental additions to an existing application

    View full-size slide

  4. GETTING STARTED
    Vue.js Intro

    View full-size slide

  5. VUE DEVTOOLS
    Debug your application

    View full-size slide

  6. VUE DEVTOOLS
    https://github.com/vuejs/vue-devtools

    View full-size slide

  7. GETTING STARTED

    View full-size slide

  8. DECLARATIVE
    RENDERING
    Getting started

    View full-size slide

  9. DECLARATIVE RENDERING
    Render data to the DOM in a simple way

    View full-size slide

  10. CONDITIONALS
    Control your display

    View full-size slide

  11. LOOPS
    Data iteration

    View full-size slide

  12. DIRECTIVES
    Built-in functionality

    View full-size slide

  13. DIRECTIVES
    Instantly recognisable with the v- prefix
    Can take arguments (eg v-bind:title)
    Can be written in shorthand
    Can be dynamic

    View full-size slide

  14. TWO-WAY BINDING

    View full-size slide

  15. TWO-WAY BINDING

    View full-size slide

  16. TWO-WAY BINDING
    Whenever a model’s property changes, change the bound element
    Whenever a bound element changes, change the model’s property

    View full-size slide

  17. HANDY DIRECTIVE MODIFIERS

    View full-size slide

  18. EVENT MODIFIERS
    Special prefixes denoted by a dot
    Order matters when writing modifiers

    View full-size slide

  19. THE LIFECYCLE
    Process and Order

    View full-size slide

  20. COMPUTED
    PROPERTIES
    Separate your logic

    View full-size slide

  21. COMPUTED PROPERTIES

    View full-size slide

  22. WATCHERS
    Keeping an eye on changes

    View full-size slide

  23. FILTERS
    Common text formatting you control

    View full-size slide

  24. COMPONENTS
    The building blocks for your app

    View full-size slide

  25. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet

    View full-size slide

  26. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet

    View full-size slide

  27. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet

    View full-size slide

  28. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet

    View full-size slide

  29. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet

    View full-size slide

  30. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet

    View full-size slide

  31. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet

    View full-size slide

  32. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet
    nav1 | nav2 | nav3 | nav4

    View full-size slide

  33. COMPONENTS
    HEADER
    Title
    Title
    Lorem issue dollar sit amet
    Lorem issue dollar sit amet
    nav1 | nav2 | nav3 | nav4

    View full-size slide

  34. COMPONENTS - CREATION

    View full-size slide

  35. COMPONENT COMMUNICATION

    View full-size slide

  36. COMPONENTS - PROPS

    View full-size slide

  37. COMPONENTS - PROPS

    View full-size slide

  38. COMPONENT COMMUNICATION

    View full-size slide

  39. COMPONENT COMMUNICATION

    View full-size slide

  40. COMPONENT COMMUNICATION

    View full-size slide

  41. COMPONENT COMMUNICATION

    View full-size slide

  42. CREATING AN APP
    Vue CLI

    View full-size slide

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

    View full-size slide

  44. CREATING AN APP

    View full-size slide

  45. .VUE FILES
    Single-file components
    Clearly structured with: template, script and style blocks

    View full-size slide

  46. TEMPLATE
    SCRIPT

    View full-size slide

  47. TEMPLATE
    SCRIPT
    STYLE

    View full-size slide

  48. CREATING AN APP
    npm install bootstrap-vue bootstrap

    View full-size slide

  49. CREATING AN APP - USING PLUGINS

    View full-size slide

  50. ROUTING
    Singe Page Application

    View full-size slide

  51. ROUTING
    npm install vue-router

    View full-size slide

  52. USING AN API
    Fetching external data

    View full-size slide

  53. USING AN API - AXIOS
    Supports the Promise API
    Transform request and response data
    Automatic JSON data transformations
    Support for XSRF

    View full-size slide

  54. USING AN API - AXIOS

    View full-size slide

  55. npm install axios
    USING AN API - AXIOS

    View full-size slide

  56. USING AN API - AXIOS

    View full-size slide

  57. VUEX STORES
    State Management

    View full-size slide

  58. VUEX
    npm install vuex

    View full-size slide

  59. 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

    View full-size slide

  60. CREATING A STORE

    View full-size slide

  61. VUEX - UPDATING OUR APP

    View full-size slide

  62. VUEX - UPDATING OUR APP

    View full-size slide

  63. 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

    View full-size slide

  64. VUEX
    https://vuex.vuejs.org/

    View full-size slide

  65. COLDBOX ELIXIR
    Bundle your application assets

    View full-size slide

  66. COLDBOX ELIXIR

    View full-size slide

  67. COLDBOX ELIXIR
    git clone https://github.com/coldbox-templates/elixir-vuejs

    View full-size slide

  68. COLDBOX ELIXIR

    View full-size slide

  69. WHERE NEXT?
    Additional Vue.js Tools

    View full-size slide

  70. COLDBOX-ELIXIR.ORTUSBOOKS.COM

    View full-size slide

  71. MUCH MORE
    Transitions & Animations
    Mixins & Custom Directives
    and much more…
    Unit Testing

    View full-size slide

  72. SO, WHY VUE.JS?
    VERY easy to bind data to HTML elements
    Lightweight and performant
    Highly extensible

    View full-size slide

  73. COLDFUSION & VUE
    Building CFML-powered reactive applications

    View full-size slide