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