68
1 © 2015 Rogue Wave Software, Inc. All Rights Reserved. 1 Easy offline-first mobile and desktop web apps with PouchDB Rod Cope, CTO

Easy offline-first mobile and desktop web apps with PouchDB

Embed Size (px)

Citation preview

Page 1: Easy offline-first mobile and desktop web apps with PouchDB

1© 2015 Rogue Wave Software, Inc. All Rights Reserved. 1

Easy offline-first mobile and desktop web apps with PouchDB

Rod Cope, CTO

Page 2: Easy offline-first mobile and desktop web apps with PouchDB
Page 3: Easy offline-first mobile and desktop web apps with PouchDB
Page 4: Easy offline-first mobile and desktop web apps with PouchDB
Page 5: Easy offline-first mobile and desktop web apps with PouchDB
Page 6: Easy offline-first mobile and desktop web apps with PouchDB
Page 7: Easy offline-first mobile and desktop web apps with PouchDB
Page 8: Easy offline-first mobile and desktop web apps with PouchDB
Page 9: Easy offline-first mobile and desktop web apps with PouchDB

Dog event administration on-site

• Change, cancel, or add runs– May take payment or provide refunds

• Record results– Pass/fail, scores– Must be mailed to AKC after event is finished

Page 10: Easy offline-first mobile and desktop web apps with PouchDB
Page 11: Easy offline-first mobile and desktop web apps with PouchDB

My use case: replace paper forms

• Devices: laptops, some tablets and phones• Challenges

– Little or no Internet access– Users are NOT technical

• Most are 50-75 years old• Copy/paste is hard• Don’t understand “synchronization”

Page 12: Easy offline-first mobile and desktop web apps with PouchDB
Page 13: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first

• Offline!

Page 14: Easy offline-first mobile and desktop web apps with PouchDB
Page 15: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first

• Latency– Multiple round trips

Page 16: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first

• Offline!• Latency

– Multiple round trips• WiFi

– Bad/slow connection

Your site name here

Page 17: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first

• Offline!• Latency

– Multiple round trips• WiFi LieFi

– Bad/slow connection

Your site name here

use an offline-first app!

Page 18: Easy offline-first mobile and desktop web apps with PouchDB

Synchronization options

Page 19: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first challenges

• User experience• Security• Data management

Page 20: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first challenges

• User experience• Security• Data management

Page 21: Easy offline-first mobile and desktop web apps with PouchDB

User experience (UX)

• Implications of offline-first:– No “make this available offline”– Internet access is a feature– Usually sync data eventually

Page 22: Easy offline-first mobile and desktop web apps with PouchDB

User experience (cont.)

• Users don’t understand online/offline/sync– Getting a ”web” page means “online”– Automatic and seamless sync

• Remind users to sync– Online-only features

• Indicate online status

Page 23: Easy offline-first mobile and desktop web apps with PouchDB
Page 25: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first challenges

• User experience• Security• Data management

Page 26: Easy offline-first mobile and desktop web apps with PouchDB

Security: authentication/authorization

• Online client– Must be online first– Auth with server, store login token

• Offline client– Local auth– Assume all users are admins

• Back online client– Auth with stored token– Bi-directional synchronization of changes

Page 27: Easy offline-first mobile and desktop web apps with PouchDB

Online security flow

Page 28: Easy offline-first mobile and desktop web apps with PouchDB

Offline security flow

• Local authentication (optional)– Password, token, device-specific, OS, 2FA

• Local authorization (optional)• Can’t prevent authentication/authorization

– User has physical control of device– Don’t store sensitive server data

• No private server passwords, keys, tokens!

Page 29: Easy offline-first mobile and desktop web apps with PouchDB

Security: offline changes

• Save changes to local storage• Prevent online-only changes

Page 30: Easy offline-first mobile and desktop web apps with PouchDB

Security: offline changes (cont.)

• Server can’t trust offline changes– Never trust user input in any form– Authenticate and authorize– Validate and normalize data

• Data format migration• Apply accepted changes to master data store

• Communicate results back to client

Page 31: Easy offline-first mobile and desktop web apps with PouchDB

Back online security and data flow

Page 32: Easy offline-first mobile and desktop web apps with PouchDB

Offline-first challenges

• User experience• Security• Data management

Page 33: Easy offline-first mobile and desktop web apps with PouchDB

Data: offline queries

– Okay to query client-side cache• Example: show user profile and preferences

– Inform user if data may be missing• Example: event search results

Page 34: Easy offline-first mobile and desktop web apps with PouchDB

Data: offline changes (mutations)

• User-private or “lightly shared” data– Create transactions & prepare for submission

• Example: shopping, enter dog event results

– Inventory or dynamic pricing might be a problem

Page 35: Easy offline-first mobile and desktop web apps with PouchDB

Data: e-commerce example

Page 36: Easy offline-first mobile and desktop web apps with PouchDB

Data: offline changes (mutations)

• Shared data– Admin can change price or description– Can resolve conflicts automatically

• Example: sequence number, date, user id– May need user to resolve conflicts

• Example: Original price: 10

Your price: 11 Other price: 12

Make new price 11 Make new price 12

Page 37: Easy offline-first mobile and desktop web apps with PouchDB

Data: offline and online

• Offline– Save all changes on the client

• Online– Still save changes on the client first– Bi-directional sync with the server– Conflict detection & resolution

Page 38: Easy offline-first mobile and desktop web apps with PouchDB
Page 39: Easy offline-first mobile and desktop web apps with PouchDB

Offline data options: AJAX

• The default option: retry or show error• Complex logic to retry failed REST calls• 5xx errors, timeouts, network errors• User closes browser/tab, browser crash, machine crash

– What state is the transaction in if the browser tab hangs or the browser crashes after the user clicks “Purchase”?

• Probably bad user experience• Definitely bad developer experience!

Page 40: Easy offline-first mobile and desktop web apps with PouchDB

Pyramid of Doom

Page 41: Easy offline-first mobile and desktop web apps with PouchDB
Page 42: Easy offline-first mobile and desktop web apps with PouchDB

Promises

• It’s better with promises, but…– 5xx errors, timeout, network error, user closes browser/tab, browser crash, machine crash

• What state is the transaction in if the browser tab hangs or the browser crashes after the user clicks “Purchase”?

Page 43: Easy offline-first mobile and desktop web apps with PouchDB

Offline implementation options

Page 44: Easy offline-first mobile and desktop web apps with PouchDB

Progressive Web Apps

Page 45: Easy offline-first mobile and desktop web apps with PouchDB

Offline data options: SW and PWA

• Service Workers and Progressive Web Apps• JavaScript-based proxy between your client-side code and the browser

• Good for caching patterns and offline support• No support today in Safari/iOS Safari, IE/Edge• “In development” for Edge• “Under consideration” for WebKit (Safari)• Powerful option for the future, but not ready today unless your audience only uses Chrome or Firefox

Page 46: Easy offline-first mobile and desktop web apps with PouchDB

Offline data options: PouchDB!

• JavaScript, Apache 2.0 license• “The database that syncs!” • Replicates with PouchDB or CouchDB

– Local or remote– Uni- or bi-directional (master-master)– Automatic conflict resolution– HTTP (easy testing with curl)

Page 47: Easy offline-first mobile and desktop web apps with PouchDB

Offline data options: PouchDB (cont.)

• Change stream– Observe add/change and delete

• Backing stores– Browser: IndexedDB, WebSQL, memory– Node.js: options below, memory, and more

Page 48: Easy offline-first mobile and desktop web apps with PouchDB

PouchDB platforms

Page 49: Easy offline-first mobile and desktop web apps with PouchDB
Page 50: Easy offline-first mobile and desktop web apps with PouchDB

Web app languages

Page 51: Easy offline-first mobile and desktop web apps with PouchDB

Web app frameworks

Page 52: Easy offline-first mobile and desktop web apps with PouchDB

Desktop apps

Page 53: Easy offline-first mobile and desktop web apps with PouchDB

Desktop apps… with web technology!

Page 54: Easy offline-first mobile and desktop web apps with PouchDB
Page 55: Easy offline-first mobile and desktop web apps with PouchDB

React desktop – Mac and Windows

Page 56: Easy offline-first mobile and desktop web apps with PouchDB
Page 57: Easy offline-first mobile and desktop web apps with PouchDB

Key packages

Client• React, React Native, React Desktop + Electron

• Redux– Maintains client state

• GraphQL/Apollo Client (optional)

• PouchDB

Server• Express• GraphQL/Apollo Server (optional)

• node.js• PouchDB or CouchDB

Page 58: Easy offline-first mobile and desktop web apps with PouchDB

Client: React and friends for UI

• React for responsive web app• React Native for native mobile UI• React Desktop for native-looking desktop UI

• React Router for URL management

Page 59: Easy offline-first mobile and desktop web apps with PouchDB

Client: React and friends for data• Redux for client state management• Redux/PouchDB

– Bi-directional state sync with local database

• Pouch Websocket Sync– Bi-directional sync: local/remote DB’s

• PouchDB– Uses IndexedDB or WebSQL in browser

• Optional: GraphQL integration with PouchDB

Page 60: Easy offline-first mobile and desktop web apps with PouchDB
Page 61: Easy offline-first mobile and desktop web apps with PouchDB

PouchDBRedux

ServerPouchDB/CouchDB

Page 62: Easy offline-first mobile and desktop web apps with PouchDB

Server: React, PouchDB, and friends

•React SSR (Server-Side Rendering)–Include initial Redux store state

•Pouch Websocket Sync for sync with auth & reconnect

•PouchDB on LevelDB (from Google)–Could also use CouchDB, Cloudant, Couchbase

•Pouch Clerk for (async) transaction state machine

Page 63: Easy offline-first mobile and desktop web apps with PouchDB

http://blog.yld.io/2016/06/24/how-to-build-a-reliable-transaction-experience-for-your-customers

Page 64: Easy offline-first mobile and desktop web apps with PouchDB

Server (continued)

• Don’t have to use PouchDB/CouchDB on server• Example: my app is based on Meteor and MongoDB

– PouchDB synced with MongoDB on server– Pouch Clerk calls Meteor method which updates MongoDB

– Pouch Clerk updates PouchDB with results– One server-side PouchDB per dog event

Page 65: Easy offline-first mobile and desktop web apps with PouchDB

Conclusions

• Offline-first leads to a better user experience• PouchDB enables offline-first

– Runs everywhere– Synchronization with conflict resolution

• Build web, mobile, and even desktop apps with one architecture, language, and framework family

– JavaScript, React, Electron

Page 66: Easy offline-first mobile and desktop web apps with PouchDB

Questions?

Page 67: Easy offline-first mobile and desktop web apps with PouchDB

Rod Cope, CTO

Rogue Wave Software

@RodCope

Page 68: Easy offline-first mobile and desktop web apps with PouchDB

68© 2015 Rogue Wave Software, Inc. All Rights Reserved. 68