Offline first solutions highland web group - december 2015

Offline-First Solutions

Glynn Bird, Developer Advocate, IBM Cloud Data Services

@glynn_bird

2

3

4

5

Image Credit: Joan Touzet (@wohali), ASF Member, CouchDB PMC Member

6

Frameworks

7

Image Credit: Device landscape by Jeremy Keith, on Flickr

8

Not just mobile first…

Image Credit: NASA New Horizons

9

Offline First

Offline-First

Offline, online and somewhere in-between

10

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

11

Text Credit: The Eight Fallacies of Distributed Computing by Peter Deutsch | Image Credit: Pneumatic Central by Sleestak, on Flickr

12

Offline-first is the only way to achieve a true, 100%

always-on user experience.*

*assuming the device is reliable

Benefits of Offline First

13

•  Better, faster user experience, both offline and online •  Allow your users to work offline or with limited connectivity •  Potentially saves battery life and bandwidth usage

Offline Patterns & Anti-Patterns •  Don't return an error for no reason •  Do let users view cached/saved data

•  Do synchronize data when connected

•  Consider letting your users decide when to sync

•  Think about the UX of users seeing stale data

14

Difficulties of Offline First

15

Image credit http://www.sneakerheadvc.com/wp-content/uploads/2012/02/Apple_iSync1.png

Introducing PouchDB

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 quickly

•  Free, open-source

17

JSON Documents

18

{ type: "Feature", geometry: { type: "Point", coordinates: [ -71.1028, 42.3691 ] }, properties: { session_id: "3486b13f9b82800e367f", timestamp: 1422928591717 } }

Limited data types •  string

•  number

•  boolean

•  array

•  object

Getting started with PouchDB

19

<script src="https://cdn.jsdelivr.net/pouchdb/3.6.0/pouchdb.min.js"></script> <script type="javascript">

var db = new PouchDB("smart-meter"); </script>

Adding documents - callbacks

20

db.post({ date: "2014-11-12T23:27:03.794Z",

kilowatt_hours: 14

}, function(err, data) {

console.log(err,data); });

Adding documents - promises

21

db.post({ date: "2014-11-12T23:27:03.794Z",

kilowatt_hours: 14

}).then(function() {

console.log("Document created"); }).catch(function(error) {

console.log(error);

});

Adding documents - bring your own id

22

var db = new PouchDB("smart-meter"); var obj = {

_id: "abc123",

timestamp: "2014-11-12T23:27:03.794Z",

kilowatt_hours: 14 };

db.put(obj, callback);

https://github.com/bradley-holt/offline-first/blob/master/pouchdb/04-create-document-put.js

Getting a document

23

db.get("abc123", callback);

// calls back with // {

// _id: "abc123", // _rev: "1-27695d5f483ac267d03ad0e3cb54bd2c",

// timestamp: "2014-11-12T23:27:03.794Z",

// kilowatt_hours: 14

// }

Getting multiple documents

24

db.allDocs({include_docs:true}, callback);

// calls back with // {

// "offset": 0, // "total_rows": 24,

// "rows": [{...},{...}]

// }

Querying

25

•  Primary Index •  MapReduce

•  PouchDB-find plugin

•  PouchDB-quick search plugin

Querying a Database with PouchDB Find •  Based on Cloudant Query (Mango) •  MongoDB-style query language

26

Image Credit: Mango with section on a white background by bangdoll, on Flickr

db.find({

selector:{

name:'Mario'

debut:{'$gt':1990}

},

fields:['_id','lastname'],

sort:['lastname']

})...

Replicating a PouchDB Database

27

var db = new PouchDB("smart-meter");

var remoteDb = new PouchDB("https://bradley-holt.cloudant.com/smart-meter");

db.replicateTo(remoteDb);

https://github.com/bradley-holt/offline-first/blob/master/pouchdb/08-replicate-database.js

Bidirectionally Replicating a PouchDB Database

28

db.sync(remoteDb).on("change", function(info) {

// Replication has written a new document

console.log(info);

}).on("complete", function(info) {

// Replication has completed or been cancelled

console.log(info);

});

https://github.com/bradley-holt/offline-first/blob/master/pouchdb/09-replicate-database-bidirectional.js

Listening for Database Changes

29

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);

});

https://github.com/bradley-holt/offline-first/blob/master/pouchdb/11-database-changes.js

PouchDB Framework Adapters

30

Apache CouchDB

Apache CouchDB •  JSON document database •  HTTP API

•  Master-master replication

•  Free, open-source

32

IBM Cloudant •  Globally distributed data layer for

web and mobile applications •  Run as-a-service •  MongoDB-style queries

•  Advanced geospatial capabilities

•  Full text search indexing

33

PouchDB and CouchDB Replication

34

CouchDB Replication Protocol •  One-off, one way operation •  Peer-to-peer (masterless)

•  Incremental

•  Conflict detection

35

Going Offline

HTML5 Offline Application Cache •  Enables fully-functional offline

web apps

•  Stores files and assets for offline browsing

•  Makes page loads very fast, even when online

37

Cache Manifest File

38

<html manifest="example.appcache"> … </html>

CACHE MANIFEST # v1 - 2015-01-08 index.html logo.png app.css app.js

Service Workers (Beta)

39

Client-side scripting framework for • programmable cache

• sync

• push messaging

• geo-fencing

• background tasks

https://jakearchibald.github.io/isserviceworkerready/

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!

40

Image Credit: Grunge Warning Sign - Do Not Read This Sign by Nicolas Raymond, on Flickr

Hybrid or Responsive Mobile Web Apps

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

42

Responsive Mobile Web Apps •  HTML5, CSS and JavaScript mobile

web apps

•  Responsive design

•  Enhanced to enable offline usage

43

Examples

Pro Forma •  Define fields you want to collect •  Renders form saving data to

PouchDB

•  Replicates data to Cloudant

•  Demo https://glynnbird.github.io/proforma/

45

MD •  Offline word processor •  Saves Markdown documents to

PouchDB

•  Replicates data to Cloudant

•  Demo http://mddoc.mybluemix.net/

46

Gutenberg •  Offline e-book reader •  Replicates book list from server

•  Each book is a Cloudant database

•  Demo http://glynnbird.github.io/gutenberg/

47

48

www.glynnbird.com •  My home page •  Cloudant database of articles

•  Replicated to PouchDB

•  Appcache for offline first

•  http://www.glynnbird.com/

48

49 49

Volt •  Password vault in a Chrome

extension

•  Data stored in encrypted in PouchDB

•  Optional back to CouchDB/Cloudant

•  https://github.com/glynnbird/volt

49

Location Tracker •  Stores data locally in PouchDB •  Front end built with AngularJS

•  Authentication logic built with Node.js

•  User interface built with Leaflet

•  Replicates location data to Cloudant

•  More info: https://cloudant.com/location-tracker/

50

Glynn Bird Developer Advocate, Cloud Data Services [email protected] @glynn_bird github.com/glynnbird www.glynnbird.com

Image Credits

52

•  Joan Touzet (@wohali), ASF Member, CouchDB PMC Member <https://twitter.com/wohali/status/595689720933445632>

•  Device landscape by Jeremy Keith, on Flickr <https://www.flickr.com/photos/adactio/6153481666>

•  NASA New Horizons <https://www.nasa.gov/sites/default/files/thumbnails/image/nh-surface.jpg>

•  Pneumatic Central by Sleestak, on Flickr <https://www.flickr.com/photos/dlanod/235990854>

•  Mango with section on a white background by bangdoll, on Flickr <https://www.flickr.com/photos/bangdoll/5665235102>

•  Grunge Warning Sign - Do Not Read This Sign by Nicolas Raymond, on Flickr <https://www.flickr.com/photos/80497449@N04/7417352980>