Full Connection Loss

Offline Experience Of The Year

• Complete Loss Of Connection

• Airplane Mode

How Do Users Get Here

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 the point of sending an email.
  • A stock price APP, on the other hand, might show ASAP that it is offline.
    • Google Maps Another Different Case 
• • Whatsapp does this very well by displaying state of messages in transit. 

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 Harness IndexedDB, WebSQL, LocalStorage, SessionStorage Or Memory
• Completely Flat Structure 
• Mature Sync & Conflict Resolutions
• Work With SQL Lite For Cordova Apps

Revision Based 

CRUD Operations

Put Operation

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

• Used To Add Data With User-Provided ID
• Primary Way To Update Record

Post Operation

    db.post({     
      name: 'David',
      age: 69
    });

• Used To Add Data With Auto Generated ID

Get Operation

    db.get('mydoc');
    

• Used To Retrieve Specific Record By ID
• Can Be Configured To Get A Specified Revision

Remove Operation

    
    db.remove({
        _id: 'docID',
        _rev: 'docRev'    
    });

• Used To Remove Record By Supplying ID & Revision At Least

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 :)

• 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']
    });