dupluex v0.0.2

Dupluex.js

A command query engine to automatically sync your reactive Vue.js data with Google Firebase Database.

Introduction

What is Dupluex.js?

Dupluex (pronounced du-PLOO, as in: rhymes with and spelled like Vue) makes it easy to write reactive UI applications that are backed by a realtime document database, such as Google's Firebase Database.

Dupluex provides two major features: 1. Document Collection Synchronization - Dupluex duplicates documents in your remote database as reactive data collections in your Vue instance. 2. Document Mutation Commands - Dupluex provides a simple yet powerful data change command engine that makes it easy to write testable Vue methods that persist data changes.

Getting started

Dupluex is middleware between your Vue.js application and Google Firebase Database. Below is a sample Vue.js application. You'll also need a Google Firebase project that has the Realtime Database feature enabled. Here's how to set up Google Firebase Database so that it works with the example below: 1. Sign in to the Google Firebase Console 2. Click: Add a project 3. Click: Add Firebase to your web app 4. Copy the config script and values and paste into the example as below. 5. Navigate to the database security rules under Develop / Database / Get Started on Rules tab. 6. Enable anonymous access by pasting in the following database security rules and click Publish:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Note: anonymous access is not a requirement; it just makes the example code below a little simpler and so easier to explain.

Example

This example below is available in JSFiddle.

<script src="https://unpkg.com/vue"></script>
<script src="https://rawgit.com/quenth/dupluex/master/dupluex.js"></script>

<!-- Paste your project's config values here from "Add Firebase to your web app" in your Firebase console -->
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT.firebaseapp.com",
    databaseURL: "https://YOUR_PROJECT.firebaseio.com",
    projectId: "YOUR_PROJECT",
    storageBucket: "YOUR_PROJECT.appspot.com",
    messagingSenderId: "YOUR_ID"
  };
  firebase.initializeApp(config);
</script>

<div id="example-1">
  <input v-model="new_item_message" placeholder="Enter message"/>
  <button v-on:click="add_item">Add</button>
  <div>Last id created: {{ last_id_created }}</div>
  <ul>
    <li v-for="item in items">{{ item.message }}</li>
  </ul>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: {},
    new_item_message: '',
    last_id_created: ''
  },
  created() {
    this.dupluex = new Dupluex(firebase.database());
    this.dupluex.sync_collection(this.items, 'items');
  },
  methods: {
    add_item() {
      this.dupluex.with('items', this.dupluex.create('id')).set({
        message: this.new_item_message
      });
      this.dupluex.commit((error, registry) => {
        this.last_id_created = error ? error.message : registry['id'];
      });
    }
  }
})

That's it! Run your app, add a few messages, and then also take note that the Data in your Google Console is also updating. For extra fun, run another instance of your app or JSFiddle in another window and watch them both stay in sync.