Unconventional Vue

Vue as a Backend Framework

@oscar_spen

Observability in Vue 2.x

new Vue({
  data() {
    return {
      foo: 'Vue'
    }
  }
})
// internally, something like this happens

for (let key in Object.keys(data)) {
  Object.defineProperty(this, key, {
    get() {
      addWatcherDependency(key)
      return data[key]
    },
    set(value) {
      markDirty(key)
      data[key] = value
    }
  })
}

Observability in Vue 2.x

https://vuejs.org/v2/guide/reactivity.html

A Simple Example

It's a bit limited.

All values must be registered ahead of time.

(But more on that later.)

 

We can use                       to add new nested properties, but not at the root level.

Vue.set

Vue 2.6's

Vue's internal observability module was exposed in Vue 2.6.

 

Essentially,                                          is called on the result of the component's

             function.

 

This can be helpful for some applications within various Vue apps and enables some new opportunities.

Vue.observable
Vue.observable
data

A Vuex-like State Store

// store.js

const state = Vue.observable({
  foo: 'Vue'
})

const getters = {
  theFoo() {
    return state.foo
  }
}

const actions = {
  setFoo(value) {
    state.foo = value
  }
}

export {
  getters,
  actions
}
// VueComponent.js

import store from './store.js'

export default {
  computed: {
    ...store.getters
  },
  methods: {
    ...store.actions,
    doSomethingWithFoo() {
      return this.theFoo
    }
  }
}
Vue.observable

Reactivity in Vue 3

Vue 3 will ship with a completely standalone reactivity module that can be used anywhere.

 

Made possible by ES6's                object.

 

Can detect any change to an object and react accordingly.

Proxy

Vue 3 Reactivity Under the Hood

new Vue({
  data() {
    return {
      foo: 'Vue'
    }
  }
})
// internally, something like this happens

new Proxy(data, {
  get(obj, prop) {
    createWatcherDependency(prop)
    return obj[prop]
  },
  set(obj, prop, value) {
    markDirty(prop)
    obj[prop] = value
  }
})
reactive/effect
import { reactive, effect } from '@vue/reactivity'

const counter = reactive({ num: 0 })

let currentNumber

effect(() => {
  currentNumber = counter.num
})

console.log(currentNumber) // 0

counter.num++

console.log(currentNumber) // 1
reactive/effect, cont.
import { reactive, effect } from '@vue/reactivity'

const myMap = reactive({ foo: 1 })

let keys

effect(() => {
  keys = Object.keys(myMap)
})

console.log(keys) // [ 'foo' ]

myMap.bar = 2

console.log(keys) // [ 'foo', 'bar' ]

Possible uses of Vue's new Reactivity module

  • Other frontend frameworks
  • Interactive animations
  • Notifications
  • Chat clients
  • Backends?

What if we used Vue's reactivity module to build a backend?

🤔🤔🤔

(show everyone your bad code)

Oscar Spencer

Software Engineer @

Twitter: @oscar_spen

GitHub: ospencer

grain-lang.org

Unconventional Vue—Vue as a Backend Framework

By Oscar Spencer

Made with Slides.com

Unconventional Vue—Vue as a Backend Framework

While Vue has emerged as a dominant frontend framework, we can’t forget about the other side of the spectrum. What if we leveraged Vue 3.0’s powerful standalone observability system to manage our backend datastore, with all its reactivity goodness? We could build a highly reactive chat app, power a live scoreboard, or maybe even have Vue trigger AWS Lambda functions as app data changes…

  • 297

More from Oscar Spencer