4 Way Databinding With Angular

Hello

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

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

    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

 

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

  • 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']
    });
    db.find({
      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

UI.SCHOOL

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

@saniyusuf

www.saniyusuf.com

Kuna Da Tanbaya Ney?

Hausa For Any Questions?

4 Way Data Binding With Angular

By Sani Yusuf

4 Way Data Binding With Angular

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. Imagine if you couldn't search for previous emails on your mail app if you had no Internet connection? Creating an offline experience can be challenging with so 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,201