Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@BradleyHolt!

Slide 7

Slide 7 text

@BradleyHolt! PouchDB

Slide 8

Slide 8 text

@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

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

@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

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@BradleyHolt! IBM Cloudant

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

@BradleyHolt! Apache CouchDB

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

@BradleyHolt! Mobile & Internet of Things (IoT)

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

@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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@BradleyHolt! Replication Patterns

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@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

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

@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

Slide 31

Slide 31 text

@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

Slide 32

Slide 32 text

@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);! });!

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

@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

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

@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

Slide 38

Slide 38 text

@BradleyHolt! Advanced Features

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

@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

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@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

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

@BradleyHolt! Bradley Holt Developer Advocate [email protected] @BradleyHolt github.com/bradley-holt