The document discusses offline-first solutions, emphasizing their necessity for a truly always-on user experience and the benefits of improved performance and reduced battery usage. It introduces PouchDB as a browser-based database that supports offline operations and synchronization with CouchDB, offering examples of its capabilities, including adding and querying documents as well as database replication. Additionally, it addresses challenges such as user experience when dealing with stale data and the importance of service workers for enhanced offline capabilities.

1. Offline-First Solutions
Glynn Bird, Developer Advocate, IBM Cloud Data Services
@glynn_bird

2. 2

3. 3

4. 4

5. 5

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

7. Frameworks
7

8. Image Credit: Device landscape by Jeremy Keith, on Flickr
8
Not just mobile first…

9. Image Credit: NASA New Horizons
9
Offline First
Offline-First

10. Offline, online and somewhere in-between
10

11. 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. 12
Offline-first is the only way
to achieve a true, 100%
always-on user experience.*
*assuming the device is reliable

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

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

15. Difficulties of Offline First
15
Image credit http://www.sneakerheadvc.com/wp-content/uploads/2012/02/Apple_iSync1.png

16. Introducing PouchDB

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

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

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

20. Adding documents - callbacks
20
db.post({
date: "2014-11-12T23:27:03.794Z",
kilowatt_hours: 14
}, function(err, data) {
console.log(err,data);
});

21. 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);
});

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

23. 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
// }

24. Getting multiple documents
24
db.allDocs({include_docs:true}, callback);
// calls back with
// {
// "offset": 0,
// "total_rows": 24,
// "rows": [{...},{...}]
// }

25. Querying
25
• Primary Index
• MapReduce
• PouchDB-find plugin
• PouchDB-quick search plugin

26. 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']
})...

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

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

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

30. PouchDB Framework Adapters
30

31. Apache CouchDB

32. Apache CouchDB
• JSON document database
• HTTP API
• Master-master replication
• Free, open-source
32

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

34. PouchDB and CouchDB Replication
34

35. CouchDB Replication Protocol
• One-off, one way operation
• Peer-to-peer (masterless)
• Incremental
• Conflict detection
35

36. Going Offline

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

38. Cache Manifest File
38
<html manifest="example.appcache">
…
</html>
CACHE MANIFEST
# v1 - 2015-01-08
index.html
logo.png
app.css
app.js

39. Service Workers (Beta)
39
Client-side scripting framework for
• programmable cache
• sync
• push messaging
• geo-fencing
• background tasks
https://jakearchibald.github.io/isserviceworkerready/

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

41. Hybrid or Responsive Mobile Web
Apps

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

43. Responsive Mobile Web Apps
• HTML5, CSS and JavaScript mobile
web apps
• Responsive design
• Enhanced to enable offline usage
43

44. Examples

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

46. MD
• Offline word processor
• Saves Markdown documents to
PouchDB
• Replicates data to Cloudant
• Demo
http://mddoc.mybluemix.net/
46

47. Gutenberg
• Offline e-book reader
• Replicates book list from server
• Each book is a Cloudant database
• Demo
http://glynnbird.github.io/gutenberg/
47

48. 48
www.glynnbird.com
• My home page
• Cloudant database of articles
• Replicated to PouchDB
• Appcache for offline first
• http://www.glynnbird.com/
48

49. 4949
Volt
• Password vault in a Chrome
extension
• Data stored in encrypted in PouchDB
• Optional back to CouchDB/Cloudant
• https://github.com/glynnbird/volt
49

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

51. Glynn Bird
Developer Advocate, Cloud Data Services
glynn.bird@uk.ibm.com
@glynn_bird
github.com/glynnbird
www.glynnbird.com

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