Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

8896271ee9d6f46d4b1783c9566cb645?s=128

Bradley Holt

August 27, 2015
Tweet

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
  2. @BradleyHolt! Image Credit: Cloud Formation Over the Adirondacks by Bradley

    Holt Offline First! Being offline shouldn't be an error condition.!
  3. @BradleyHolt! Faster User Experience! Image Credit: Speed DLR on Doklands

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

    AllieKF, on Flickr
  5. @BradleyHolt! Battery and Bandwidth! Image Credit: Panorama of the Molasses

    Disaster site by Boston Public Library, on Flickr
  6. @BradleyHolt!

  7. @BradleyHolt! PouchDB

  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
  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
  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
  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
  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
  13. @BradleyHolt! IBM Cloudant

  14. @BradleyHolt! IBM Cloudant •  Globally distributed data layer for web

    and mobile applications •  MongoDB-style queries •  Advanced geospatial capabilities •  Full text search indexing
  15. @BradleyHolt! Offline First with Cloudant •  PouchDB •  Cloudant Sync

    •  iOS •  Android
  16. @BradleyHolt! Apache CouchDB

  17. @BradleyHolt! Apache CouchDB •  JSON document database •  HTTP API

    •  Master-master replication
  18. @BradleyHolt! CouchDB Replication Protocol •  One-off, one way operation • 

    Peer-to-peer (masterless) •  Incremental •  Conflict detection
  19. @BradleyHolt! Mobile & Internet of Things (IoT)

  20. @BradleyHolt! Responsive Mobile Web Apps •  HTML5, CSS and JavaScript

    mobile web apps •  Responsive design •  Enhanced to enable offline usage
  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
  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
  23. @BradleyHolt! One Database Per User or One Database Per Device

  24. @BradleyHolt! Clemmie Danyel Shelba Manuel Francis Marissa Mitchel Georgianne Garnet

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

    9a278e5e f4215dfa Image Credit: database by Tim Morgan, on Flickr
  26. @BradleyHolt! Replication Patterns

  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
  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
  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
  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
  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
  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);! });!
  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
  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
  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
  36. @BradleyHolt! Filtered Replication •  Select (with a function) which documents

    to replicate •  Filter can be defined locally within PouchDB, or remotely on Cloudant
  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
  38. @BradleyHolt! Advanced Features

  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
  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
  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
  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
  43. @BradleyHolt! Resources •  Offline First! <http://offlinefirst.org/> •  PouchDB <http://pouchdb.com/> • 

    We have a problem with promises <http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html> •  IBM Cloudant <https://cloudant.com/> •  Apache CouchDB <http://couchdb.apache.org/> •  Hoodie <http://hood.ie/> •  HTML5 Offline Application Cache <http://appcache.offline.technology/> •  Cloudant Sync for iOS <https://github.com/cloudant/CDTDatastore> •  Cloudant Sync for Android <https://github.com/cloudant/sync-android> •  Offline First Code Examples <https://github.com/bradley-holt/offline-first> •  Apache Cordova <https://cordova.apache.org/> •  PhoneGap <http://phonegap.com/> •  Ionic <http://ionicframework.com/> •  Contributing to PouchDB <https://github.com/pouchdb/pouchdb/blob/master/CONTRIBUTING.md>
  44. @BradleyHolt! Image Credits •  Cloud Formation Over the Adirondacks by

    Bradley Holt <https://twitter.com/BradleyHolt/status/623030107679002624> •  Speed DLR on Doklands by Umberto Rotundo, on Flickr <https://www.flickr.com/photos/turyddu/4394742730/> •  Lynn Camp Prong (Explored) by AllieKF, on Flickr <https://www.flickr.com/photos/allie_k/14501117120> •  Panorama of the Molasses Disaster site by Boston Public Library, on Flickr <https://www.flickr.com/photos/boston_public_library/4901555337/> •  Grunge Warning Sign - Do Not Read This Sign by Nicolas Raymond, on Flickr <https://www.flickr.com/photos/80497449@N04/7417352980> •  Ethernet IoT Starter Kit <https://developer.mbed.org/platforms/IBMEthernetKit/> •  database by Tim Morgan, on Flickr <https://www.flickr.com/photos/timothymorgan/75294154> •  world by Tim Morgan, on Flickr <https://www.flickr.com/photos/timothymorgan/75699268/>
  45. @BradleyHolt! Bradley Holt Developer Advocate bradley.holt@us.ibm.com @BradleyHolt github.com/bradley-holt