4 Way Data Binding For An Offline Mobile Experience

Der Groeten

Sani Yusuf

  • Founder Of Haibrid
  • Co-Organiser Of Ionic-UK
  • Author & Trainer
  • Avid Paddle Boarder
  • Big Fan Of Avatar Movie

@saniyusuf

My Goal Today?

  • Talk About Offline

  • What's Available Today

  • Where We Can Improve

  • 4 Way Data Binding

Offline Offline

But What Really Is Offline?

  • When A User Loses All Connection To Internet?

  • When A User, Has Poor Internet Connection?

Let's Consider Each Scenario

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

This Is Called Lie-Fi. Your Phone Has No Signal, But It Makes You Believe It Does. 

How Do We Fix This

Service Worker To The Rescue

Service Worker

Web App
Service Worker
Server
  • 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

 

View

 

 

Model

 

3 Way Data Binding

 

View

 

 

Model

 

 

Cloud DB

 

Remember Firebase?

4 Way Data Binding

 

View

 

 

Model

 

 

Cloud DB

 

 

Local DB

 

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

Service Worker + Pouch DB

That's Some Bad Ass Combo

Some Other Great Features

Advanced Mongo DB Style Querying

    
  db.find({
      selector: {name: 'Mario'},
      fields: ['_id', 'name'],
      sort: ['name']
    });
    db.find({
      selector: {
        series: 'Mario',
        debut: { $gt: 1990 }
      }
    }

Special Thanks

  • Kevin Perree (https://github.com/numerized)

  • Nolan Lawson @nolanlawson
  • Joshua Morony @joshuamorony
  • ADOBE Lads All Of Yall <3

Get Started Today

  • https://pouchdb.com/

 Sani Yusuf

@saniyusuf

Kuna Da Tanbaya Ney?

Hausa For Any Questions?