Offline-First Apps with PouchDB at Fluent

Web and mobile apps shouldn’t stop working when there’s no network connection. Bradley Holt demonstrates how to use the HTML5 offline application cache, PouchDB, and CouchDB to build offline-enabled responsive mobile and web apps.

Based on Apache CouchDB, PouchDB is an open source syncing JavaScript database that runs within a web browser. Offline-first apps built using PouchDB can provide a better, faster user experience—both on- and offline. Bradley discusses how to use PouchDB with Cordova/PhoneGap, Ionic, and CouchDB to build fully-featured, cross-platform native/hybrid apps or high-fidelity prototypes. PouchDB can also be run within Node.js and on devices for Internet of Things (IoT) applications.

Bradley provides code examples for creating a PouchDB database, creating a new document, updating a document, deleting a document, querying a database, syncing PouchDB with a remote database, and live updates to a user interface based on database changes. Bradley will also discuss user-interface patterns for offline-first apps.

Transcript

1. O'Reilly Fluent
   Bradley Holt, Developer Advocate
   Thursday, March 10, 2016
   Offline-First Apps with PouchDB
   @BradleyHolt
   

   View Slide

2. Why offline first?
   

   View Slide

3. View Slide

4. View Slide

5. Mobile First
   Design for the smallest device first and then apply progressive enhancement techniques to
   take advantage of larger screen sizes when available
   

   View Slide

6. Offline First
   Design for offline usage first and then apply progressive enhancement techniques to take
   advantage of network connectivity when available
   

   View Slide

7. Ubiquitous Connectivity
   Why offline first in a world of ubiquitous connectivity?
   

   View Slide

8. 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
   @BradleyHolt
   

   View Slide

9. Mobile Backend
   What happens when your mobile backend service is unreachable?
   

   View Slide

10. Benefits of Offline First
    

    View Slide

11. Faster User Experience
    Better, faster user experience — both offline and online
    

    View Slide

12. Works Offline
    Ability to disconnect and continue to work offline
    

    View Slide

13. Battery and Bandwidth
    Limited access to power and communications infrastructure in disaster scenarios
    

    View Slide

14. Offline-First Patterns and
    Anti-Patterns
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. Tools and Use Cases
    

    View Slide

21. CouchDB Replication Protocol
    @BradleyHolt
    Cloudant Sync
    CouchDB PouchDB
    CouchDB Replication Protocol
    CouchDB
    

    View Slide

22. View Slide

23. @BradleyHolt
    

    View Slide

24. PouchDB Code Examples
    github.com/bradley-holt/offline-first
    

    View Slide

25. View Slide

26. 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

    }

    }
    @BradleyHolt
    

    View Slide

27. Creating a PouchDB Database
    var db = new PouchDB("smart-meter");
    @BradleyHolt
    

    View Slide

28. 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);
    });
    @BradleyHolt
    

    View Slide

29. 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);
    });
    @BradleyHolt
    

    View Slide

30. 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);
    });
    @BradleyHolt
    

    View Slide

31. allDocs Options
    §  include_docs
    – conflicts
    – attachments
    §  startkey
    §  endkey
    §  inclusive_end
    (true by default)
    §  limit
    §  skip
    §  descending
    §  key
    §  keys
    @BradleyHolt
    

    View Slide

32. PouchDB Data Storage Limits
    @BradleyHolt
    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
    

    View Slide

33. Replication
    

    View Slide

34. Apache CouchDB
    CouchDB is a document database featuring an HTTP API, JSON documents,
    and peer-to-peer replication
    @BradleyHolt
    

    View Slide

35. View Slide

36. Creating a Remote PouchDB Database
    var remoteDb = new PouchDB("https://bradley-holt.cloudant.com/smart-meter");
    @BradleyHolt
    

    View Slide

37. Cross-Origin Resource Sharing (CORS)
    A security restriction implemented by browsers on cross-site HTTP requests
    @BradleyHolt
    

    View Slide

38. Bidirectional Replication
    @BradleyHolt
    

    View Slide

39. 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);
    });
    @BradleyHolt
    

    View Slide

40. Live Replication
    @BradleyHolt
    

    View Slide

41. 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);
    });
    @BradleyHolt
    

    View Slide

42. Filtered Replication
    @BradleyHolt
    

    View Slide

43. 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);
    });
    @BradleyHolt
    

    View Slide

44. One Database Per User
    @BradleyHolt
    Clemmie
    Danyel
    Shelba
    Manuel
    Francis
    Marissa
    Mitchel
    Georgianne
    Garnet
    Audrey
    Kalyn
    

    View Slide

45. View Slide

46. Boilerplates & Tools
    §  Frontend Web Apps
    –  React Boilerplate with Service Workers
    
    §  Backend Web Apps
    –  PouchDB npm Package
    
    –  PouchDB Server npm Package
    
    §  Mobile Apps
    –  PouchDB for Ionic Framework
    
    –  "Hello world" Cordova app with PouchDB
    
    –  "Hello world" Cordova app with PouchDB, using the SQLite Plugin
    
    –  Cloudant FoodTracker (uses Cloudant Sync for iOS)
    
    §  Desktop Apps
    –  PouchDB for Electron (formerly Atom Shell)
    
    –  PouchDB for Chrome packaged apps
    
    –  "Hello world" Chrome app with PouchDB
    
    –  PouchDB for NW.js (aka Node-Webkit)
    
    §  Internet of Things (IoT) Apps
    –  Node-RED
    
    @BradleyHolt
    

    View Slide

47. Cloudant FoodTracker
    An offline-first demo app built with Swift and Cloudant Sync for iOS
    

    View Slide

48. View Slide

49. 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,
    on Twitter
    
    §  Cell phone tower by Gary Lerude, on Flickr
    
    §  Pneumatic Central by Sleestak, on Flickr
    
    §  Colunas by Daniel Zanini H., on Flickr
    §  Speed DLR on Doklands by Umberto Rotundo, on Flickr
    
    §  Waterfall by Paulo Valdivieso, on Flickr
    §  Wildfire by U.S. Fish and Wildlife Service Southeast Region,
    on Flickr
    §  Arduino Uno by Pete Prodoehl, on Flickr
    
    §  Warning by Stefano Brivio, on Flickr
    @BradleyHolt
    

    View Slide

50. Questions?
    @BradleyHolt
    

    View Slide