vue-feathers-sync

Syncing data between vue (frontend) and feathers (backend) in a real-time and bidirectional way. This is largely based on the wonderful work of vue-syncers-feathers (and vue-feathers).

Vue + feathers are both very promising frameworks. Vue links UI (views) with frontend data (models), and feathers links frontend data with backend database. What this plugin does is to glue the two together, making three things (frontend view <-> frontend data <-> backend data) sync bidirectionally and in a realtime way (via socket.io). All the syncs are set up in a declarative syntax.

Install

npm i -S vue-feathers-sync

And of course the feathers packages you need.

Setup Feathers Client

Just a demo. Tweak it as you like. Refer to feathers doc for more details. (oops this is coffeescript. But never mind, you got the idea.)

Just a demo. Tweak it as you like. Refer to feathers doc for more details. (Oops this is coffeescript. But never mind, you got the idea.)

import io from 'socket.io-client'
import feathersClient from 'feathers/client'
import socketio from 'feathers-socketio/client'
import hooks from 'feathers-hooks'
import authentication from 'feathers-authentication/client'
socket = io 'http://localhost:80'
export feathers = feathersClient()
  .configure socketio socket
  .configure hooks()
  .configure authentication storage: window.localStorage

Plug into Vue

import VueFeathersSync from 'vue-feathers-sync'
Vue.use(VueFeathersSync, {
  driverOptions: {
    feathers: feathers,
    idField: '_id' // 'id' by default. This feather is to be committed.
  }
})

Automatic Loading

At first, refer to vue-syncers-feathers and vue-feathers for the delarative syntax in a Vue component. Then read this:

export default {
  data: ...
  props: ...
  computed: ...
  sync: {
    item: { // referred as this.item in methods and hooks and computed expression, one single database record, both sync to view and sync to database
      service: 'nameOfYourFeathersService',
      idField: '_id', // 'id' by default
      id() => {
        ...
        return xxx // the id string of the item in database. can be calculated from anything reactive sources, say, data, props and computed, etc.
      },
      loaded() => {
        // called when data are laoded or reloaded
      },
      errored(error) => {
        // called when loading is failed
      }
    },
    collection: { // referred as this.collection in methods and hooks and computed expression, a key-value map of multiple database records (the record's id as the key), both sync to view and sync to database
      service: 'nameOfYourAnotherFeathersService',
      idField: '_id', // 'id' by default
      query: {
        ... // query object (see https://docs.feathersjs.com/databases/querying.html and https://docs.feathersjs.com/databases/pagination.html)
      },
      loaded() => {
        // called when data are laoded or reloaded
      },
      errored(error) => {
        // called when loading is failed
      }
    }
  }
}

This sync syntax comes from vue-syncers-feathers. No need to call find or get mannually. Really cool.

Saving

After declaring the linkages between backend and frontend data via sync, you can do this:

export default {
  ...
  methods:
    someMethods(...) => { // or in any life hooks' function body
      ...
      this.$create(this.collection, data, params, ...)
      this.$update(this.collection, id, data, params, ...)
      this.$patch (this.collection, id, data, params, ...)
      this.$remove(this.collection, id, params, ...)
      // 100% copying feathers' CRUD syntax, write modifications to database and then sync them back to this.collection in the frontend, and then sync to view (UI), all authomatically
      ...
      this.$put(this.item, data, params, ...) // write the single item data record
    }
}

Automatically Reload After Saving

All params above can include any options feathers provided. Additionally, adding reload: true to params makes the syncer reload itself after writing is done.

Even without reload: true, the reactive reloading can also be done by feathers' socket.io event emitting (but the reloading behavior is different for create and remove when reload: true is absent). If you rely on this to reload, be careful when filtering some events. Event filters may break the reloading and syncing.

Sync Flag and Events

this.$syncers: all syncers of the components are in this object, say, this.$syners.item, this.$syncers.collection;

this.$syncers.xxx.saving/loading: reactively showing if a certain syncer xxx is saving (when calling $put, $create, $update, $patch, and $remove) or loading (when id/query changes);

this.$loadingSyncers: reactively showing if any automatic loading operation is going on (when id/query changes);

this.$savingSyncers: reactively showing if any saving operation is going on (when calling $put, $create, $update, $patch, and $remove).

this.$on('syncer-loaded', (path) => {...} when a loading is succeeded;

this.$on('syncer-saved', (path) => {...} when a saving is succeeded;

this.$on('syncer-error', (path, error) => {...} when a loading or saving failed.

Optimistic Update (buggy)

this.$put('item', {field1: newValue1, field2: newValue2, ...}, {optimistic: true})

(only works for $put, buggy) Update UI in advance before database confirms this $put. If database returns an error, roll back UI to original status.

Buggy: won't work when losing server connection, or when partial writing success. DON'T USE IT FOR NOW.

Non-sync Usage

Declarative sync might not fit all your needs. You always need to to some manual database operations. So here is some slightly improved syntax for this, from vue-feathers:

this.$feathers.authenticate(...)
this.$services.yourServiceName.create(...) // or update/patch/remove

and a declarative way to response to socket.io events:

export default {
  ...
  feathers: {
    yourServiceName:{
      created(data) {
        ...
      },
      updated(data) {
        ...
      },
      patched(data) {
        ...
      },
      removed(data) {
        ...
      }
    }
  }
}

It's just a slightly better way to achieve this:

export default {
  ...
  mounted: {
    this.$services.yourServiceName.on('created', data => {
      ...
    })
  }
}