Full Connection Loss

• Complete Loss Of Connection

• Airplane Mode

Top Culprits

Who Is Doing It Right?

Gmail Android

Play Music Android

Whatsapp Android

Things They Do Right

Reveal Offline State Only When Necessary

• Only show offline state at the point of transaction
  • Gmail will never alert you that you have gone offline until point of sending
  • Consider bank applications
• Reveal state of the action performed
  • Whatsapp does this very well by displaying state of messages. 

Cache Everything Possible

• Cache media files that are unlikely to change
  • Google music allows you cache a song after it has been played once
• Showing a pixilated thumbnail is better than nothing 
• Use the detail page pattern to reuse data
  • Twitter offline is great at this by reusing same tweet data
  • Instagram does this well too 

Flaky Connection

How Do We Fix This

Service Worker To The Rescue

Service Worker

• Sits Between App & Server
• Allows You Access To Unlimited Cache

Flaky Connections Solved

But What About Complete Network Loss?

Consider Our Scenario

• Users are case workers  

• They Interview their clients off site

• The clients fill a questionnaire 

• They go back to office & Fill on their PC

Wait What? Its 2017

How It Should Be

• The caseworker meets client
• Client fills information right there on the web app offline
• When there is a connection, app auto syncs 
• If there are conflicts, handle it like a boss

How We Did It?

Hello 

What Is Pouch DB?

• Browser Based Storage
• Can Use Built-In Browser Storage Container Available
• Work With SQL Lite For Cordova Apps
• Syncs Automatically With Couch DB Based 

Local DB

    this.db = new PouchDB('mytestdb');
        this.username = 'YOUR USERNAME';
        this.password = 'YOUR PASSWORD';
        this.remote = 'YOUR BLUEMIX URL';
    
        let options = {
          live: true,
          retry: true,
          continuous: true,
          auth: {
            username: this.username,
            password: this.password
          }
        };
    
        this.db.sync(this.remote, options);

CRUD Operations

    db.put({
      _id: 'dave@gmail.com',
      name: 'David',
      age: 69
    });

    db.get('mydoc').then(function(doc) {
      return db.put({
        _id: 'mydoc',
        _rev: doc._rev,
        title: "Let's Dance"
      });

    db.post({
      title: 'Ziggy Stardust'
    })

Revision Based 

    {
      "ok" : true,
      "id" : "8A2C3761-FFD5-4770-9B8C-38C33CED300A",
      "rev" : "1-d3a8e0e5aa7c8fff0c376dac2d8a4007"
    }

Yo Sani But the Title Of Your Talk Is 4 Way Data Binding

We Love To Stay In Sync

Data Changes Very Easily 

2 Way Data Binding

3 Way Data Binding

4 Way Data Binding

Live Replication & Sync

    var sync = PouchDB.sync('mydb', 'http://localhost:5984/mydb', {
      live: true,
      retry: true
    }).on('change', function (info) {
      // handle change
    }).on('paused', function (err) {
      // replication paused (e.g. replication up to date, user went offline)
    }).on('active', function () {
      // replicate resumed (e.g. new changes replicating, user went back online)
    }).on('denied', function (err) {
      // a document failed to replicate (e.g. due to permissions)
    }).on('complete', function (info) {
      // handle complete
    }).on('error', function (err) {
      // handle error
    });
    
    sync.cancel(); // whe

How Does PouchDB Achieve This?

• Syncs With Any Couch DB Based Solution

  • IBM Cloudant Is Great :)

• Has A Revision Based System

• Completely Flat Structure 

• Supports Live Replication

  • Offers Change Detection

Some Other Great Features

Advanced Mongo DB Style Querying

    
  db.find({
      selector: {name: 'Mario'},
      fields: ['_id', 'name'],
      sort: ['name']
    });