Cloudant Webinar: A Deep Dive into Offline First with PouchDB and IBM Cloudant

Covering both mobile and Internet of Things (IoT) use cases, this deep dive into offline first will explore several patterns for using PouchDB together with Cloudant including setting up one database per user, one database per device, read-only replication, and write-only replication. Come prepared with your offline-first questions!

https://cloudant.com/resources/webinars/a-deep-dive-into-offline-first-with-pouchdb-and-ibm-cloudant/

Transcript

1. @BradleyHolt!
   A Deep Dive into Offline First
   with PouchDB and IBM Cloudant
   IBM Cloudant Webinar
   Thursday, August 27, 2015
   Bradley Holt, Developer Advocate
   

   View Slide

2. @BradleyHolt!
   Image Credit: Cloud Formation Over the Adirondacks by Bradley Holt
   Offline First!
   Being offline shouldn't be an error condition.!
   

   View Slide

3. @BradleyHolt!
   Faster User Experience!
   Image Credit: Speed DLR on Doklands by Umberto Rotundo, on Flickr
   

   View Slide

4. @BradleyHolt!
   Works Offline!
   Image Credit: Lynn Camp Prong (Explored) by AllieKF, on Flickr
   

   View Slide

5. @BradleyHolt!
   Battery and Bandwidth!
   Image Credit: Panorama of the Molasses Disaster site by Boston Public Library, on Flickr
   

   View Slide

6. @BradleyHolt!
   

   View Slide

7. @BradleyHolt!
   PouchDB
   

   View Slide

8. @BradleyHolt!
   PouchDB
   •  A database in your web browser
   •  Can synchronize with any
   database that implements the
   CouchDB Replication Protocol
   •  Makes create, read, update and
   delete operations extremely fast
   

   View Slide

9. @BradleyHolt!
   Creating a Local PouchDB Database
   var db = new PouchDB("smart-meter");!
   https://github.com/bradley-holt/offline-first/blob/master/pouchdb/01-create-local-database.js
   

   View Slide

10. @BradleyHolt!
    Creating a Remote PouchDB Database
    var remoteDb = new PouchDB("https://bradley-holt.cloudant.com/smart-meter");!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/02-create-remote-database.js
    

    View Slide

11. @BradleyHolt!
    Cross-Origin Resource Sharing (CORS)
    •  Enable Cross-Origin Resource
    Sharing (CORS) on remote database
    •  Browsers place security restrictions
    on cross-site HTTP requests
    •  If you run into a problem, remember
    this warning!
    Image Credit: Grunge Warning Sign - Do Not Read This Sign by Nicolas Raymond, on Flickr
    

    View Slide

12. @BradleyHolt!
    Creating a Document
    var db = new PouchDB("smart-meter");!
    db.put({!
    _id: "2014-11-12T23:27:03.794Z",!
    kilowatt_hours: 14!
    }).then(function() {!
    console.log("Document created");!
    }).catch(function(error) {!
    console.log(error);!
    });!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/04-create-document-put.js
    

    View Slide

13. @BradleyHolt!
    IBM Cloudant
    

    View Slide

14. @BradleyHolt!
    IBM Cloudant
    •  Globally distributed data layer for
    web and mobile applications
    •  MongoDB-style queries
    •  Advanced geospatial capabilities
    •  Full text search indexing
    

    View Slide

15. @BradleyHolt!
    Offline First with Cloudant
    •  PouchDB
    •  Cloudant Sync
    •  iOS
    •  Android
    

    View Slide

16. @BradleyHolt!
    Apache CouchDB
    

    View Slide

17. @BradleyHolt!
    Apache CouchDB
    •  JSON document database
    •  HTTP API
    •  Master-master replication
    

    View Slide

18. @BradleyHolt!
    CouchDB Replication Protocol
    •  One-off, one way operation
    •  Peer-to-peer (masterless)
    •  Incremental
    •  Conflict detection
    

    View Slide

19. @BradleyHolt!
    Mobile & Internet of Things (IoT)
    

    View Slide

20. @BradleyHolt!
    Responsive Mobile Web Apps
    •  HTML5, CSS and JavaScript mobile
    web apps
    •  Responsive design
    •  Enhanced to enable offline usage
    

    View Slide

21. @BradleyHolt!
    Hybrid Mobile Web Apps
    •  Native mobile web apps built with
    HTML5, CSS and JavaScript
    •  Good for:
    •  Fully-featured, cross-platform native apps
    •  High-fidelity prototypes
    

    View Slide

22. @BradleyHolt!
    Internet of Things (IoT)
    •  Headless Node.js apps
    •  PouchDB includes a LevelDB
    adapter for use in Node.js
    •  Redis, Riak, and in-memory
    adapters are also available
    •  Good for:
    •  Internet of Things (IoT) applications
    •  Content delivery networks (CDN)
    •  Purpose-built devices
    Image Credit: Ethernet IoT Starter Kit
    

    View Slide

23. @BradleyHolt!
    One Database Per User or
    One Database Per Device
    

    View Slide

24. @BradleyHolt!
    Clemmie
    
    Danyel
    
    Shelba
    
    Manuel
    Francis
    
    Marissa
    
    Mitchel
    
    Georgianne
    
    Garnet
    
    Audrey
    
    Kalyn
    
    Image Credit: database by Tim Morgan, on Flickr
    

    View Slide

25. @BradleyHolt!
    1b40d0a4
    c28e6965
    3fa0bee7
    e83a0aeb cbdca6de
    ef9443e2
    8e4d5a03
    2e070be6
    271dc425
    9a278e5e
    f4215dfa
    Image Credit: database by Tim Morgan, on Flickr
    

    View Slide

26. @BradleyHolt!
    Replication Patterns
    

    View Slide

27. @BradleyHolt!
    Write-Only Replication
    •  Data generated on the device
    •  Replicate this data to the cloud from
    multiple users and/or devices
    •  Example uses:
    •  User updates
    •  Sensor data
    

    View Slide

28. @BradleyHolt!
    Write-Only Replication
    var db = new PouchDB("smart-meter");!
    var remoteDb = new PouchDB(!
    "https://bradley-holt.cloudant.com/smart-meter"!
    );!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/08-replicate-database.js
    

    View Slide

29. @BradleyHolt!
    Write-Only Replication
    db.bulkDocs([!
    {_id: "2014-11-12T23:27:03.794Z", kilowatt_hours: 14},!
    {_id: "2014-11-13T00:52:01.471Z", kilowatt_hours: 15},!
    {_id: "2014-11-13T01:39:28.911Z", kilowatt_hours: 16},!
    {_id: "2014-11-13T02:52:01.471Z", kilowatt_hours: 17}!
    ]).then(function(result) {!
    …!
    }).catch(function(error) {!
    console.log(error);!
    });!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/08-replicate-database.js
    

    View Slide

30. @BradleyHolt!
    Write-Only Replication
    db.replicate.to(remoteDb, {!
    live: false,!
    retry: false!
    }).on("change", function(info) {!
    // Replication has written a new document!
    console.log(info);!
    }).on("complete", function(info) {!
    // Replication has complete or been cancelled!
    console.log(info);!
    }).on("error", function(error) {!
    // Replication has stopped due to an unrecoverable failure!
    console.log(error);!
    });!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/08-replicate-database.js
    

    View Slide

31. @BradleyHolt!
    Read-Only Replication
    •  Data generated in the cloud
    •  Replicate this data to multiple users
    and/or devices from the cloud
    •  Example uses:
    •  Weather
    •  Notifications
    

    View Slide

32. @BradleyHolt!
    Read-Only Replication
    remoteDb.replicate.to(db, {!
    live: false,!
    retry: false!
    }).on("change", function(info) {!
    // Replication has written a new document!
    console.log(info);!
    }).on("complete", function(info) {!
    // Replication has complete or been cancelled!
    console.log(info);!
    }).on("error", function(error) {!
    // Replication has stopped due to an unrecoverable failure!
    console.log(error);!
    });!
    

    View Slide

33. @BradleyHolt!
    Bidirectional Replication
    •  Data generated on both
    the device and in the cloud
    •  Replicate this data to/from
    the cloud and to/from multiple
    users and/or devices
    •  Useful when you need to
    share data between users
    and/or devices
    

    View Slide

34. @BradleyHolt!
    Bidirectional Replication
    db.sync(remoteDb, {!
    live: false,!
    retry: false!
    }).on("change", function(info) {!
    // Replication has written a new document!
    console.log(info);!
    }).on("complete", function(info) {!
    // Replication has complete or been cancelled!
    console.log(info);!
    }).on("error", function(error) {!
    // Replication has stopped due to an unrecoverable failure!
    console.log(error);!
    });!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/09-replicate-database-bidirectional.js
    

    View Slide

35. @BradleyHolt!
    Live Replication
    var sync = db.sync(remoteDb, {!
    live: true,!
    retry: true!
    }).on("change", function(info) {!
    // Replication has written a new document!
    console.log(info);!
    }).on("complete", function(info) {!
    // Replication has complete or been cancelled!
    console.log(info);!
    }).on("error", function(error) {!
    // Replication has stopped due to an unrecoverable failure!
    console.log(error);!
    });!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/10-replicate-database-live.js
    

    View Slide

36. @BradleyHolt!
    Filtered Replication
    •  Select (with a function) which
    documents to replicate
    •  Filter can be defined locally
    within PouchDB, or remotely
    on Cloudant
    

    View Slide

37. @BradleyHolt!
    Filtered Replication
    db.replicate.to(remoteDb, {!
    filter: function(doc) {!
    return doc._id >= "2014-11-13T00:00:00.000Z";!
    }!
    }).on("change", function(info) {!
    // Replication has written a new document!
    console.log(info);!
    }).on("complete", function(info) {!
    // Replication has complete or been cancelled!
    console.log(info);!
    });!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/12-replicate-database-filtered.js
    

    View Slide

38. @BradleyHolt!
    Advanced Features
    

    View Slide

39. @BradleyHolt!
    Creating and Reading an Attachment
    var db = new PouchDB("smart-meter");!
    var data = "R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";!
    db.putAttachment("myDoc", "pixel.gif", data, "image/gif").then(function() {!
    return db.getAttachment("myDoc", "pixel.gif");!
    }).then(function(attachment) {!
    console.log(attachment);!
    }).catch(function(error) {!
    console.log(error);!
    });!
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/13-create-attachment.js
    

    View Slide

40. @BradleyHolt!
    PouchDB Data Storage Limits
    Firefox Chrome Opera 15+ Internet
    Exporer
    10+
    iOS Safari Safari
    (desktop)
    Android PhoneGap /
    Cordova
    Data
    Storage
    Limit
    50MB
    (more with
    user
    permission)
    calculated calculated
    250MB
    (prompts
    user at 10
    MB)
    50MB
    (prompts
    user at 5MB
    and at
    increments)
    unlimited
    (prompts
    user at 5MB
    and at
    increments)
    calculated /
    200MB
    unlimited
    Adapter IndexedDB
    IndexedDB
    / WebSQL
    IndexedDB
    / WebSQL
    IndexedDB WebSQL WebSQL
    IndexedDB /
    WebSQL
    SQLite
    Source: http://pouchdb.com/faq.html#data_limits
    

    View Slide

41. @BradleyHolt!
    PouchDB in Node.js
    •  Use PouchDB as the database
    for your Node.js applications
    •  Installable via npm (pouchdb)
    •  Uses LevelDB by default
    •  Additional adapters:
    •  In-memory
    •  Riak
    •  Redis
    

    View Slide

42. @BradleyHolt!
    PouchDB Server
    •  Builds on PouchDB
    in Node.js
    •  Drop-in replacement
    for CouchDB
    •  Installable via npm
    (pouchdb-server)
    Image Credit: world by Tim Morgan, on Flickr
    

    View Slide

43. @BradleyHolt!
    Resources
    •  Offline First!
    
    •  PouchDB
    
    •  We have a problem with promises
    
    •  IBM Cloudant
    
    •  Apache CouchDB
    
    •  Hoodie
    
    •  HTML5 Offline Application Cache
    
    •  Cloudant Sync for iOS
    
    •  Cloudant Sync for Android
    
    •  Offline First Code Examples
    
    •  Apache Cordova
    
    •  PhoneGap
    
    •  Ionic
    
    •  Contributing to PouchDB
    
    

    View Slide

44. @BradleyHolt!
    Image Credits
    •  Cloud Formation Over the Adirondacks by Bradley Holt
    
    •  Speed DLR on Doklands by Umberto Rotundo, on Flickr
    
    •  Lynn Camp Prong (Explored) by AllieKF, on Flickr
    
    •  Panorama of the Molasses Disaster site by Boston Public Library, on Flickr
    
    •  Grunge Warning Sign - Do Not Read This Sign by Nicolas Raymond, on Flickr
    
    •  Ethernet IoT Starter Kit
    
    •  database by Tim Morgan, on Flickr
    
    •  world by Tim Morgan, on Flickr
    
    

    View Slide

45. @BradleyHolt!
    Bradley Holt
    Developer Advocate
    bradley.holt@us.ibm.com
    @BradleyHolt
    github.com/bradley-holt
    

    View Slide