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

Offline-First Apps with PouchDB at Node.js Interactive

Bradley Holt
December 09, 2015

Offline-First Apps with PouchDB at Node.js Interactive

Web and mobile apps shouldn't stop working when there's no network connection. Based on Apache CouchDB, PouchDB is an open source syncing JavaScript database that runs within a web browser. Offline-first apps that use PouchDB can provide a better, faster user experience—both offline and online.

Learn how to build offline-enabled responsive mobile web apps using the HTML5 Offline Application Cache and PouchDB. We’ll also discuss how to build cross-platform apps or high-fidelity prototypes using PouchDB, Cordova, and Ionic. PouchDB can also be run within Node.js and on devices for Internet of Things (IoT) applications.

This talk includes code examples for creating a PouchDB database, creating a new document, updating a document, deleting a document, querying a database, synchronization PouchDB with a remote database, and live updates to a user interface based on database changes.

Bradley Holt

December 09, 2015
Tweet

More Decks by Bradley Holt

Other Decks in Programming

Transcript

  1. @BradleyHolt!
    Offline-First Apps with PouchDB
    Node.js Interactive
    Wednesday, December 9, 2015
    Bradley Holt, Developer Advocate

    View Slide

  2. @BradleyHolt!
    Image Credit: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons

    View Slide

  3. @BradleyHolt!
    Image Credits: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons; Joan Touzet (@wohali), ASF Member, CouchDB PMC Member

    View Slide

  4. @BradleyHolt!
    Image Credit: Device landscape by Jeremy Keith, on Flickr
    Not just mobile first…!

    View Slide

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

    View Slide

  6. @BradleyHolt!
    Doesn't ubiquitous
    connectivity make offline-
    enabled apps unnecessary?!
    Image Credit: Cell phone tower by Gary Lerude, on Flickr

    View Slide

  7. @BradleyHolt!
    No.!
    Image Credit: Internet Splat Map by Steve Jurvetson, on Flickr

    View Slide

  8. @BradleyHolt!
    Quite the opposite, in fact.!
    Image Credit: Tangled Network by Bruno Girin, on Flickr

    View Slide

  9. @BradleyHolt!
    Ubiquitous connectivity is
    driving the demand for 

    offline capabilities.!
    Image Credit: Wired by Alexandre Duret-Lutz, on Flickr

    View Slide

  10. @BradleyHolt!
    How?!
    Image Credit: connect me to BR549 by frankieleon, on Flickr

    View Slide

  11. @BradleyHolt!
    The Eight Fallacies of Distributed Computing
    1.  The network is reliable
    2.  Latency is zero
    3.  Bandwidth is infinite
    4.  The network is secure
    5.  Topology doesn't change
    6.  There is one administrator
    7.  Transport cost is zero
    8.  The network is homogeneous
    Text Credit: The Eight Fallacies of Distributed Computing by Peter Deutsch | Image Credit: Pneumatic Central by Sleestak, on Flickr

    View Slide

  12. @BradleyHolt!
    Image Credit: Connected version 2 by Hans Kylberg, on Flickr
    Offline-first is the only way 

    to achieve a true, 100% 

    always-on user experience.*
    !
    *assuming the device is reliable!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. @BradleyHolt!
    Image Credit: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons

    View Slide

  17. @BradleyHolt!
    Image Credit: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons

    View Slide

  18. @BradleyHolt!
    Image Credit: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons

    View Slide

  19. @BradleyHolt!
    Image Credit: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons

    View Slide

  20. @BradleyHolt!
    Image Credit: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons

    View Slide

  21. @BradleyHolt!

    View Slide

  22. @BradleyHolt!
    Frontend Web Apps
    •  Build responsive mobile web apps
    that work offline
    •  PouchDB adapters available for many
    popular frameworks
    •  Enable full offline usage with
    service workers

    View Slide

  23. @BradleyHolt!
    Backend Web Apps
    •  Use PouchDB as the database
    for your Node.js applications
    •  Installable via npm (pouchdb)
    •  Use PouchDB Server
    (pouchdb-server) as a drop-in
    replacement for CouchDB

    View Slide

  24. @BradleyHolt!
    Mobile Apps
    •  Hybrid Mobile Web Apps
    •  HTML5, CSS and JavaScript apps
    compiled into native mobile apps
    •  Fully-featured, cross-platform native apps
    •  High-fidelity prototypes
    •  Native Mobile Web Apps
    •  Cloudnat Sync for iOS
    •  Cloudant Sync for Android

    View Slide

  25. @BradleyHolt!
    Desktop Apps
    •  Use Electron to build cross-platform
    desktop apps with web technologies
    •  Formerly known as Atom Shell
    •  HTML5, CSS and JavaScript apps
    compiled into native desktop apps

    View Slide

  26. @BradleyHolt!
    Internet of Things (IoT) Apps
    •  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

  27. @BradleyHolt!
    PouchDB Code Examples

    View Slide

  28. @BradleyHolt!

    View Slide

  29. @BradleyHolt!
    JSON Documents
    {

    _id: "6EF9D2B0-13D3-1378-8D30-39E3CE0B36C2",

    _rev: "1-0b457efcf82fb29492ef927ba5b6ee15",

    type: "Feature",

    geometry: {

    type: "Point",

    coordinates: [

    -71.1028,

    42.3691

    ]

    },

    properties: {

    session_id: "3486b13f-7b8a-8a96-dfbf-9b82800e367f",

    timestamp: 1422928591717

    }

    }

    View Slide

  30. @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

  31. @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

  32. @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

  33. @BradleyHolt!
    Creating a New 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

  34. @BradleyHolt!
    Updating a Document
    db.put({"
    _id: "2014-11-12T23:27:03.794Z","
    kilowatt_hours: 14"
    }).then(function(response) {"
    return db.get(response.id);"
    }).then(function(doc) {"
    // Update the value for kilowatt hours"
    doc.kilowatt_hours = 15;"
    // Put the document back to the database"
    return db.put(doc);"
    }).catch(function(error) {"
    console.log(error);"
    });"
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/05-update-document.js

    View Slide

  35. @BradleyHolt!
    Deleting a Document
    db.put({"
    _id: "2014-11-12T23:27:03.794Z","
    kilowatt_hours: 14"
    }).then(function(response) {"
    // Get the document"
    return db.get(response.id);"
    }).then(function(doc) {"
    // Remove the document from the database"
    return db.remove(doc);"
    }).catch(function(error) {"
    console.log(error);"
    });"
    "
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/06-delete-document.js

    View Slide

  36. @BradleyHolt!
    Querying a Database with allDocs!
    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) {"
    // Get all documents"
    return db.allDocs({include_docs: true});"
    }).then(function(response) {"
    console.log(response);"
    }).catch(function(error) {"
    console.log(error);"
    });"
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/07-query-database-all-docs.js

    View Slide

  37. @BradleyHolt!
    allDocs Options
    •  include_docs"
    •  conflicts"
    •  attachments"
    •  startkey"
    •  endkey"
    •  inclusive_end
    (true by default)
    •  limit"
    •  skip"
    •  descending"
    •  key"
    •  keys"

    View Slide

  38. @BradleyHolt!
    Querying a Database with Map/Reduce
    •  Most queries can be done with allDocs (in PouchDB)
    •  Map functions transform documents into indexes
    •  Reduce functions aggregate results of Map functions
    •  _sum"
    •  _count"
    •  _stats"

    View Slide

  39. @BradleyHolt!
    Querying a Database with PouchDB Find
    •  Based on Cloudant Query (Mango)
    •  MongoDB-style query language
    •  Define fields to index
    Image Credit: Mango with section on a white background by bangdoll, on Flickr

    View Slide

  40. @BradleyHolt!
    Listening for Database Changes
    var changes = remoteDb.changes({"
    since: "now""
    }).on("change", function(change) {"
    // A document has changed"
    console.log(change);"
    }).on("complete", function(info) {"
    // changes() was canceled"
    console.log(info);"
    }).on("error", function(error) {"
    // changes() has errored"
    console.log(error);"
    });"
    https://github.com/bradley-holt/offline-first/blob/master/pouchdb/11-database-changes.js

    View Slide

  41. @BradleyHolt!
    Bidirectional, Live 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/10-replicate-database-live.js

    View Slide

  42. @BradleyHolt!
    Bidirectional, 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

  43. @BradleyHolt!

    View Slide

  44. @BradleyHolt!
    Image Credits
    •  A mockup of the golden Apple iPhone 5S by Zach Vega, on
    Wikimedia Commons

    •  Joan Touzet (@wohali), ASF Member, CouchDB PMC Member

    •  Device landscape by Jeremy Keith, on Flickr

    •  Cloud Formation Over the Adirondacks by Bradley Holt

    •  Cell phone tower by Gary Lerude, on Flickr

    •  Internet Splat Map by Steve Jurvetson, on Flickr

    •  Tangled Network by Bruno Girin, on Flickr

    •  Wired by Alexandre Duret-Lutz, on Flickr

    •  connect me to BR549 by frankieleon, on Flickr

    •  Pneumatic Central by Sleestak, on Flickr

    •  Connected version 2 by Hans Kylberg, on Flickr

    •  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

    •  Ethernet IoT Starter Kit

    •  Grunge Warning Sign - Do Not Read This Sign by Nicolas Raymond,
    on Flickr

    •  Mango with section on a white background by bangdoll, on Flickr

    View Slide

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

    View Slide