Offline-First Apps with PouchDB Node.js Interactive Wednesday, - - PowerPoint PPT Presentation

▶
offline first apps with pouchdb
SMART_READER_LITE
LIVE PREVIEW

Offline-First Apps with PouchDB Node.js Interactive Wednesday, - - PowerPoint PPT Presentation

Aug 23, 2022 38 likes •489 views

Offline-First Apps with PouchDB Node.js Interactive Wednesday, December 9, 2015 Bradley Holt, Developer Advocate @BradleyHolt Image Credit: A mockup of the golden Apple iPhone 5S by Zach Vega, on Wikimedia Commons @BradleyHolt Image

slide-1
SLIDE 1

@BradleyHolt

Offline-First Apps with PouchDB

Node.js Interactive Wednesday, December 9, 2015 Bradley Holt, Developer Advocate

slide-2
SLIDE 2

@BradleyHolt

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

slide-3
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

slide-4
SLIDE 4

@BradleyHolt

Image Credit: Device landscape by Jeremy Keith, on Flickr

Not just mobile first…

slide-5
SLIDE 5

@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

@BradleyHolt

Doesn't ubiquitous connectivity make offline- enabled apps unnecessary?

Image Credit: Cell phone tower by Gary Lerude, on Flickr

slide-7
SLIDE 7

@BradleyHolt

No.

Image Credit: Internet Splat Map by Steve Jurvetson, on Flickr

slide-8
SLIDE 8

@BradleyHolt

Quite the opposite, in fact.

Image Credit: Tangled Network by Bruno Girin, on Flickr

slide-9
SLIDE 9

@BradleyHolt

Ubiquitous connectivity is driving the demand for 


  • ffline capabilities.

Image Credit: Wired by Alexandre Duret-Lutz, on Flickr

slide-10
SLIDE 10

@BradleyHolt

How?

Image Credit: connect me to BR549 by frankieleon, on Flickr

slide-11
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

slide-12
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

slide-13
SLIDE 13

@BradleyHolt

Faster User Experience

Image Credit: Speed DLR on Doklands by Umberto Rotundo, on Flickr

slide-14
SLIDE 14

@BradleyHolt

Works Offline

Image Credit: Lynn Camp Prong (Explored) by AllieKF, on Flickr

slide-15
SLIDE 15

@BradleyHolt

Battery and Bandwidth

Image Credit: Panorama of the Molasses Disaster site by Boston Public Library, on Flickr

slide-16
SLIDE 16

@BradleyHolt

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

slide-17
SLIDE 17

@BradleyHolt

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

slide-18
SLIDE 18

@BradleyHolt

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

slide-19
SLIDE 19

@BradleyHolt

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

slide-20
SLIDE 20

@BradleyHolt

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

slide-21
SLIDE 21

@BradleyHolt

slide-22
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

slide-23
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

slide-24
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
slide-25
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

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

slide-27
SLIDE 27

@BradleyHolt

PouchDB Code Examples

slide-28
SLIDE 28

@BradleyHolt

slide-29
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
 }
 }

slide-30
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

slide-31
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

slide-32
SLIDE 32

@BradleyHolt

Cross-Origin Resource Sharing (CORS)

  • Enable Cross-Origin Resource

Sharing (CORS) on remote database

  • Browsers place security restrictions
  • n 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

@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

@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

@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

@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

@BradleyHolt

allDocs Options

  • include_docs
  • conflicts
  • attachments
  • startkey
  • endkey
  • inclusive_end

(true by default)

  • limit
  • skip
  • descending
  • key
  • keys
slide-38
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
slide-39
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

slide-40
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

slide-41
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

slide-42
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

slide-43
SLIDE 43

@BradleyHolt

slide-44
SLIDE 44

@BradleyHolt

Image Credits

  • A mockup of the golden Apple iPhone 5S by Zach Vega, on

Wikimedia Commons <https://commons.wikimedia.org/wiki/File:IPhone_5s.png>

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

<https://twitter.com/wohali/status/595689720933445632>

  • Device landscape by Jeremy Keith, on Flickr

<https://flic.kr/p/anLcHu>

  • Cloud Formation Over the Adirondacks by Bradley Holt

<https://twitter.com/BradleyHolt/status/623030107679002624>

  • Cell phone tower by Gary Lerude, on Flickr

<https://flic.kr/p/crLdJE>

  • Internet Splat Map by Steve Jurvetson, on Flickr

<https://flic.kr/p/5Gky>

  • Tangled Network by Bruno Girin, on Flickr

<https://flic.kr/p/7sdJw>

  • Wired by Alexandre Duret-Lutz, on Flickr

<https://flic.kr/p/2ZCmpx>

  • connect me to BR549 by frankieleon, on Flickr

<https://flic.kr/p/a1C62U>

  • Pneumatic Central by Sleestak, on Flickr

<https://flic.kr/p/mRvRQ>

  • Connected version 2 by Hans Kylberg, on Flickr

<https://flic.kr/p/4yN2FZ>

  • Speed DLR on Doklands by Umberto Rotundo, on Flickr

<https://flic.kr/p/7GmcUo>

  • Lynn Camp Prong (Explored) by AllieKF, on Flickr

<https://flic.kr/p/o6q1UG>

  • Panorama of the Molasses Disaster site by Boston Public Library, on

Flickr <https://flic.kr/p/8t8KCM>

  • Ethernet IoT Starter Kit

<https://developer.mbed.org/platforms/IBMEthernetKit/>

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

<https://flic.kr/p/cirSCd>

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

<https://flic.kr/p/9CBP2h>

slide-45
SLIDE 45

@BradleyHolt

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