RethinkDB + Faye + Vue.js

“Quick! Something strange is going on and we need to get a handle on it. Police departments everywhere are getting calls about Yeti sightings. Can you create an app to help track these sightings in less than an hour?”

“Sure”, you say as your mind begins to think about what framework might help you get this job done quickly. “I’ll pull something together with Sails or Feathers. Oh, and a React frontend too! See you in an hour!”.

Unfortunately you spend the whole hour setting up the thousand line gulp file it requires to build a React UI. Then another hour stepping through the getting started guides for each of these frameworks. And then you spend the rest of the next day trying and failing at getting them to each behave the way you want. This results in the great Yeti invasion of 2016 being a great success (for the Yetis that is).

If only you had been a little more familiar with some simpler and lower level technologies that could have helped you pull the Yeti tracking app together a bit quicker!

RethinkDb : This database is built for realtime! It installs fast and runs even faster. Perfect for quickly capturing some data.

Faye : A perfect partner for capturing realtime events from the database and pushing them out to clients. Super simple to setup and use.

Vue.js : Unless you are building the world’s next mega-corp, your application is probably not going to get big enough to really benefit from Angular or React. Vue.js is a dead simple tool for creating user interfaces. It lets you get things done quickly and also offers support for things like components and routing should you need them.

Let’s take another stab at tracking those Yetis. This time we’ll only need two files to do it! The whole project is available at : https://github.com/aaronblondeau/rethink-faye

The first file is our backend server : https://github.com/aaronblondeau/rethink-faye/blob/master/index.js

This is a really plain Node.js/Express application that exposes a few basic REST endpoints for creating updating and deleting Yeti sighting records.

Here is the cool part:

// Subscribe to all sighting updates
r.db(databaseName).table(tableName).changes().run(conn)
.then(function(cursor){
    cursor.each(function (err, change) {
        if((change.new_val) && (!change.old_val)) {
            bayeux.getClient().publish('/sightings/'+change.new_val.state, {
                type: "created",
                sighting: change.new_val
            });
        }
        else if((change.new_val) && (change.old_val)) {
            bayeux.getClient().publish('/sightings/'+change.new_val.state, {
                type: "updated",
                sighting: change.new_val
            });
        }
        else {
            bayeux.getClient().publish('/sightings/'+change.old_val.state, {
                type: "destroyed",
                sighting: change.old_val
            });
        }
    });
});

With RethinkDB we can watch for certain changes in the database and then pump them out on various channels that clients can listen to. This code is watching for any change to the sightings table. It then uses the new and old values provided to figure out if the change was a create, an update, or a destroy (see Nicolás’ response to this article down below for a cleaner way to code this up). Finally it emits an event to a specific channel with the information. If I create a new Yeti sighting in Colorado, any client watching on /sightings/CO will receive that information.

On the frontend (https://github.com/aaronblondeau/rethink-faye/blob/master/public/index.html) we just watch for events coming over the wire and then update our Vue.js model with them.

var client = new Faye.Client(window.location.origin+"/faye");
...
client.subscribe('/sightings/'+newState, handleSightingEvent);
...
function handleSightingEvent(data) {
    if(data.type === "created") {
        vm.modelAddSighting(data.sighting);
    }
    else if (data.type === "updated") {
        vm.modelUpdateSighting(data.sighting);
    }
    else if(data.type === "destroyed") {
        vm.modelDeleteSighting(data.sighting);
    }
}

I love how simple and easy it was to setup Faye to publish realtime events from RethinkDB. One neat side effect of this is that the change events are generated in the database itself. If some third party makes a change without using my API, users will still remain up to date.

I think that next time I have to create a web application with support for live updates I’ll strongly consider skipping over all the frameworks out there and produce something with these 3 simple and effective tools instead : RethinkDB, Faye, Vue.js