Easy offline-first mobile and desktop web apps with PouchDB
-
Upload
rogue-wave-software -
Category
Software
-
view
352 -
download
3
Transcript of Easy offline-first mobile and desktop web apps with PouchDB
![Page 1: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/1.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/2.jpg)
![Page 3: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/3.jpg)
![Page 4: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/4.jpg)
![Page 5: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/5.jpg)
![Page 6: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/6.jpg)
![Page 7: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/7.jpg)
![Page 8: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/8.jpg)
![Page 9: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/9.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/10.jpg)
![Page 11: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/11.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/12.jpg)
![Page 13: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/13.jpg)
Offline-first
• Offline!
![Page 14: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/14.jpg)
![Page 15: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/15.jpg)
Offline-first
• Latency– Multiple round trips
![Page 16: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/16.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/17.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/18.jpg)
Synchronization options
![Page 19: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/19.jpg)
Offline-first challenges
• User experience• Security• Data management
![Page 20: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/20.jpg)
Offline-first challenges
• User experience• Security• Data management
![Page 21: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/21.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/22.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/23.jpg)
![Page 24: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/24.jpg)
UX: Online/offline indicators
https://github.com/hubspot/offline
Make sure you need them!
![Page 25: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/25.jpg)
Offline-first challenges
• User experience• Security• Data management
![Page 26: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/26.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/27.jpg)
Online security flow
![Page 28: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/28.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/29.jpg)
Security: offline changes
• Save changes to local storage• Prevent online-only changes
![Page 30: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/30.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/31.jpg)
Back online security and data flow
![Page 32: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/32.jpg)
Offline-first challenges
• User experience• Security• Data management
![Page 33: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/33.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/34.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/35.jpg)
Data: e-commerce example
![Page 36: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/36.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/37.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/38.jpg)
![Page 39: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/39.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/40.jpg)
Pyramid of Doom
![Page 41: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/41.jpg)
![Page 42: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/42.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/43.jpg)
Offline implementation options
![Page 44: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/44.jpg)
Progressive Web Apps
![Page 45: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/45.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/46.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/47.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/48.jpg)
PouchDB platforms
![Page 49: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/49.jpg)
![Page 50: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/50.jpg)
Web app languages
![Page 51: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/51.jpg)
Web app frameworks
![Page 52: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/52.jpg)
Desktop apps
![Page 53: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/53.jpg)
Desktop apps… with web technology!
![Page 54: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/54.jpg)
![Page 55: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/55.jpg)
React desktop – Mac and Windows
![Page 56: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/56.jpg)
![Page 57: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/57.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/58.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/59.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/60.jpg)
![Page 61: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/61.jpg)
PouchDBRedux
ServerPouchDB/CouchDB
![Page 62: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/62.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/63.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/64.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/65.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/66.jpg)
Questions?
![Page 67: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/67.jpg)
Rod Cope, CTO
Rogue Wave Software
@RodCope
![Page 68: Easy offline-first mobile and desktop web apps with PouchDB](https://reader036.fdocuments.us/reader036/viewer/2022062523/587087ba1a28ab57368b80b3/html5/thumbnails/68.jpg)
68© 2015 Rogue Wave Software, Inc. All Rights Reserved. 68