Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@BradleyHolt! Ubiquitous connectivity is driving the demand for 
 offline capabilities.! Image Credit: Wired by Alexandre Duret-Lutz, on Flickr

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@BradleyHolt!

Slide 22

Slide 22 text

@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

Slide 23

Slide 23 text

@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

Slide 24

Slide 24 text

@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

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

@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

Slide 27

Slide 27 text

@BradleyHolt! PouchDB Code Examples

Slide 28

Slide 28 text

@BradleyHolt!

Slide 29

Slide 29 text

@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
 }
 }

Slide 30

Slide 30 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 31

Slide 31 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 32

Slide 32 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 33

Slide 33 text

@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

Slide 34

Slide 34 text

@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

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

@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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

@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"

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

@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

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@BradleyHolt!

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

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