Intro PouchDB, unroll CouchBase crust and offline data Sync in Ionic with 4-way Data Binding.

PouchDB was created to help web developers build applications that work as well offline as they do online.

But before going to discuss PouchDB which is inspired by CouchDB so lets remove the confusion of Couch…Series… .

There is CouchDB, CouchIO, CouchOne, Couchbase, Couchbase Server, Couchbase Mobile, Couchbase Lite, CouchApps, BigCouch, Touchbase, Membase, Memcached, MemcacheDB… all different and yet related in way not at all obvious from the names alone.

First there was CouchDB, a database created by Damien Katz, a former IBM developer. Its official name was changed to Apache CouchDB after it became an Apache project.

Today I think most people believe that Couchbase Server is a new version of CouchDB but it is in fact a new version of Membase.

1. The Couchbase Server is not entirely open-source/free software.
2. CouchDB is an open-source/free software.

There are so many other relation between CouchDB and CouchBase, but we are not discussing them here.

PouchDB:

PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user’s data in sync no matter where they next login.

Sample code snippet:

var db = new PouchDB('dbname');
db.put({
  _id: 'dave@gmail.com',
  name: 'David',
  age: 68
});
db.changes().on('change', function() {
  console.log('Ch-Ch-Changes');
});
db.replicate.to('http://example.com/mydb');

Features:

1-Cross Browser

Works in Firefox, Chrome, Opera, Safari, IE and Node.js

2- Lightweight

PouchDB is just a script tag and 46KB (gzipped) away in the browser, or $ npm install pouchdb away in Node.

3- Easy to Learn

Requires some programming knowledge, however PouchDB is a piece of cake to learn.

4- Open Source

Everything is developed out in the open on Github, contributors always welcome!

Offline data Synchronization with ionic:

A data-driven mobile application capable of working even when the device has no internet connection is a must nowadays. Look at Gmail app. Without internet connection you can read and create emails and the app will deliver them as soon as the device gets connected. Imagine working with the email app only when there’s connection. That’s not so useful, right?

The principle behind this solution is quite simple. We have on local database at application side and when the app is connected, it downloads or synchronizes with the remote database. If disconnected, it just waits for the next synchronization while normal operations still can be done on the application.

One way to implement this solution is using a 4-way data binding architecture. Many Javascript frameworks like AngularJS, Ember.js or Knockout implement 2-way data binding which is a automatic synchronization of data between the model and the view components. So, to implement a 4-way data binding we just need to add a data synchronization between the model component and the local database and between the local database and a remote database.

To handle local storage, we’ll take advantage of PouchDB which is practically a CouchDB clone designed to run within a browser.

How does this work?

When the application is offline, the data is stored using HTML 5 local storage and session storage objects to store data in the browser or WebView. When the application is online, its programming logic will synchronize changes to a central database.

There are so many examples explaining how to use PouchDB with ionic some of them i have provided below, so you can give a read here.

*PouchDB Ionic “hello world” app: here

*Sync With Couchbase Using Only AngularJS And PouchDB: here

In Next blog(s) we will learn some server interaction in ionic.