4 Way Databinding With Angular


Sani Yusuf

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


My Goal Today?

  • Talk About Offline

  • What's Available Today

  • 4 Way Data Binding

  • Where We Can Improve

Offline Offline

But What Really Is Offline?

  • When A User Loses All Connection To Internet?

Let's Consider This Scenario Properly

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

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
  • 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?


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 

      "ok" : true,
      "_id" : "8A2C3761-FFD5-4770-9B8C-38C33CED300A",
      "_rev" : "1-d3a8e0e5aa7c8fff0c376dac2d8a4007"

CRUD Operations

Put Operation

      _id: 'dave@gmail.com',
      name: 'David',
      age: 69
  • Used To Add Data With User-Provided ID
  • Primary Way To Update Record

Post Operation

      name: 'David',
      age: 69
  • Used To Add Data With Auto Generated ID

Get Operation

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

Remove Operation

        _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








Cloud DB


Remember Firebase?

4 Way Data Binding








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

  • Supports Live Replication

    • Offers Change Detection

Some Other Great Features

Advanced Mongo DB Style Querying

      selector: {name: 'Mario'},
      fields: ['_id', 'name'],
      sort: ['name']
      selector: {
        series: 'Mario',
        debut: { $gt: 1990 }

Special Thanks

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

  • Nolan Lawson @nolanlawson
  • Joshua Morony @joshuamorony

Get Started Today

  • https://pouchdb.com/

Learn About This Online


Parting Words

  • Offline First Is Ever Developer's Responsibility In 2017

  • Always Think About Conflicts

  • If The Word "CONFLICT" Doesn't Appear In The Docs, It's Not Offline First

 Sani Yusuf



Kuna Da Tanbaya Ney?

Hausa For Any Questions?