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?

4 Way Data Binding For An Offline Mobile Experience

By Sani Yusuf

4 Way Data Binding For An Offline Mobile Experience

In today's world, mobile is the primary way we access the internet for our very many important activities. The problem is a lot of apps work great online but become unusable offline. Image if you could not search the previous emails on you mail app when you had no Internet? Creating an offline experience can be challenging with soo many things to worry about like, how best to Sync when the internet comes back or how best to handle conflicts when multiple users change the same data offline? This talk will showcase how we can use PouchDB to achieve 4-way data binding by keeping the Model, View, Serve & Offline Data all in sync while providing the user with a mature offline experience.

  • 4,526