Easy offline-first mobile and desktop web apps with PouchDB
Download as PPTX, PDF0 likes2,535 views
The document provides an overview of an offline-first approach for mobile and desktop web applications using PouchDB. It discusses the challenges of offline access, user experience, and security considerations, and outlines how to implement offline data options using PouchDB and other technologies. The goal is to enhance user experiences while handling data management effectively in offline scenarios.
Easy offline-first mobile and desktop web apps with PouchDB
- 1. 1© 2015 Rogue Wave Software, Inc. All Rights Reserved. 1 Easy offline-first mobile and desktop web apps with PouchDB Rod Cope, CTO
- 8. JFTPNT (5/15) AKC Event Operations – Performance Events PO Box 900051 Raleigh, NC 27675-9051 Tel 919 816-3908 Fax 919 816-4211 www.akc.org Event #____________________ STAKE____________________________ No. of Entries ______________ Date(s) on which stake was Judged _________________________ No. of Starters _____________ AWARDS: Name of Dog ______________________________________________ Breed____________________ DOB _________________ Sex_____ AKC ® No. _______________________________________ Sire ________________________________ Dam _____ __________________ Owner’s Name______________________________________________ Owner's Address________________________________________ Handler’s Name___________________________________________ Name of Dog ______________________________________________ Breed____________________ DOB _________________ Sex_____ AKC ® No. _______________________________________ Sire ________________________________ Dam _____ __________________ Owner’s Name______________________________________________ Owner's Address________________________________________ Handler’s Name___________________________________________ Name of Dog ______________________________________________ Breed____________________ DOB _________________ Sex_____ AKC ® No. _______________________________________ Sire ________________________________ Dam _____ __________________ Owner’s Name______________________________________________ Owner's Address________________________________________ Handler’s Name___________________________________________ Name of Dog ______________________________________________ Breed____________________ DOB _________________ Sex_____ AKC ® No. _______________________________________ Sire ________________________________ Dam _____ __________________ Owner’s Name______________________________________________ Owner's Address________________________________________ Handler’s Name___________________________________________ Note: Field Trial Secretary shall list on the back of this page the registered name and number of each dog given a Judge's Award of Merit JUDGE’S CERTIFICATION We certify that the above awards are in accord with our judging of the stake and that the Judges' Award of Merit as noted on the back of this page are correct. ____________________________________________ _______________________________________________ (Judge’s Signature) (Judge’s Signature) (Print Judge's Name) (Print Judge's Name) FIELD TRIAL SECRETARY'S CERTIFICATION I certify that the judges have verified the awards and signed this page. I certify that there were ___________ENTRIES and ____________ STARTERS in this stake. DATE Signature of Field Trial Secretary PLEASE GIVE THE NUMBER OF EACH BREED STARTED: POINTING BREED FIELD TRIAL REPORT PAGE 1st 2nd 3rd 4th AKC® HUNTING TESTS FOR POINTING BREEDS Use separate sheets for Junior, Senior and Master levels and additional sheets if needed. NOTE: Score Juniors in Hunting, Bird Finding, Pointing and Trainability only; score Seniors and Masters in all categories. CIRCLE ONE – (JUNIOR / JUNIOR ADVANCED SENIOR / SENIOR ADVANCED MASTER / MASTER ADVANCED) BRACE # DOG’S NAME BREED HANDLER HUNTING BIRD FINDING ABILITY POINTING TRAINABILITY RETRIEVING (NOT APPLICABLE IN JUNIOR) HONORING (NOT APPLICABLE IN JUNIOR) TOTAL AVERAGE In order to receive a Qualifying score, a dog must acquire a minimum of not less than 5 on each of the categories of abilities (4 categories in Junior; 6 categories in Senior and Master) with an overall average score of not less than 7.0. “Advanced” titles require an overall average of not less than 8.0. When averaging scores, divide total in Junior by 4; divide total in Senior and Master by 6. Judges must agree on which dogs will qualify and will not qualify. JHTPNT (4/15) Offic i al American Kennel Club® FIELD TRIAL or HUNT TEST Entry Form AKC Rules, Regulations, Policies and Guidelines are available on the American Kennel Club website: www.akc.org AGREEMENT IcertifythatIamtheactualownerofthedog,orthatIamthedulyauthorizedagentoftheactualownerwhosenameIhaveenteredabove.Inconsiderationoftheacceptanceofthisentry,I(we) agreetoabidebytherulesandregulationsofTheAmericanKennelClubineffectatthetimeofthisevent,andanyadditionalrulesandregulationsappearinginthepremiumlistofthiseventand entryformandanydecisionmadeinaccordwiththem.I(we)agreethattheclubholdingthiseventhastherighttorefusethisentryforcausewhichtheclubshalldeemsufficient.I(we)certifyand representthatthedogenteredisnotahazardtopersonsorotherdogs.Inconsiderationoftheacceptanceofthisentryandoftheholdingofthiseventandoftheopportunitytohavethedogjudged andtowinprizes,ribbons,ortrophies,I(we)agreetoholdtheAKC,theevent-givingclub,theirmembers,directors,governors,office rs, agents,superintendentsoreventsecretaryandtheowner and/or lessor of the premises and any provider of services that are necessary to hold this event and any employees or volunteers of the aforementioned parties, and anyAKC approved judge, judgingatthisevent,harmlessfromanyclaimforlossorinjurywhichmaybeallegedtohavebeencauseddirectlyorindirectlytoanypersonorthingbytheactofthisdogwhileinorabouttheevent premisesorgroundsornearanyentrancethereto,andI(we)personallyassumeallresponsibilityandliabilityforanysuchclaim;andI(we)furtheragreetoholdtheaforementionedpartiesharmless from any claim for loss,injury or damage to this dog.Additionally,I (we) hereby assumethe sole responsibility for and agree to indemnify,defend and save theaforementioned parties harmless fromanyandalllossandexpense(includinglegalfees)byreasonoftheliabilityimposedbylawuponanyoftheaforementionedpartiesfordamagebecauseofbodilyinjuries,includingdeathat any time resulting therefrom,sustainedby any personor persons, including myself(ourselves),or on account ofdamage to property, arising outofor in consequenceofmy (our)participationin thisevent,howeversuch,injuries,deathorpropertydamagemaybecaused,andwhetherornotthesamemayhavebeencausedormaybeallegedtohavebeencausedbythenegligenceof theaforementionedpartiesoranyoftheiremployees,agents,oranyotherperson.I(we)agreethatthedeterminationofwhethertheinjuryisseriousshallbemadebytheeventveterinarianand isbindingonme(us). I (WE) AGREE THAT ANY CAUSE OF ACTION, CONTROVERSY OR CLAIM ARISING OUT OF OR RELATED TO THE ENTRY, EXHIBITION OR ATTENDANCE AT THE EVENT BETWEEN THE AKC AND THE EVENT-GIVING CLUB (UNLESS OTHERWISE STATED IN THIS PREMIUM LIST) AND MYSELF (OURSELVES) OR AS TO THE CONSTRUCTION, INTERPRETATION AND EFFECT OF THIS AGREEMENT SHALL BE SETTLED BY ARBITRATION PURSUANT TO THE APPLICABLE RULES OF THE AMERICAN ARBITRATION ASSOCIATION. HOWEVER, PRIOR TO ARBITRATION ALL APPLICABLE AKC BYLAWS, RULES, REGULATIONS AND PROCEDURES MUST FIRST BE FOLLOWED AS SET FORTH IN THE AKC CHARTER AND BYLAWS, RULES, REGULATIONS, Club: Location: Email:Tel: Signature of owner or his agent duly authorized to make this entry: Full Name Breed: Sire: Actual Owner(s): Owner’s Address: Event #:Date(s): Event type (test or trial): I enclose entry fees in the amount of: $ Date of Birth:Sex: Enter in Stake/Test: Call Name: Dam: Name of Breeder: Name of Owner’s Agent/Handler: AKC® No. Foreign & List Country: Beagle Trials ONLY: Male Female Retriever Trials ONLY this dog is qualifie d for (check answe r ): Limited All-Age Stake: YES NO Restricted All-Age Stake: YES NO SpecialAll-Age Stake: YES NO 13” Class 15” Class AFN999 (03/16) v1.1 Edit City: State: Zip: Name of Jr. Handler (if any): Jr. Handler #:
- 9. 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
- 11. 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”
- 15. Offline-first • Latency – Multiple round trips
- 16. Offline-first • Offline! • Latency – Multiple round trips • WiFi – Bad/slow connection Your site name here
- 17. Offline-first • Offline! • Latency – Multiple round trips • WiFi LieFi – Bad/slow connection Your site name here use an offline-first app!
- 19. Offline-first challenges • User experience • Security • Data management
- 20. Offline-first challenges • User experience • Security • Data management
- 21. User experience (UX) • Implications of offline-first: – No “make this available offline” – Internet access is a feature – Usually sync data eventually
- 22. 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
- 24. UX: Online/offline indicators https://github.com/hubspot/offline Make sure you need them!
- 25. Offline-first challenges • User experience • Security • Data management
- 26. 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
- 28. 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!
- 29. Security: offline changes • Save changes to local storage • Prevent online-only changes
- 30. 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
- 31. Back online security and data flow
- 32. Offline-first challenges • User experience • Security • Data management
- 33. 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
- 34. 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
- 36. 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
- 37. 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
- 39. 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!
- 40. Pyramid of Doom
- 42. 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”?
- 45. 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
- 46. 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)
- 47. 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
- 52. Desktop apps
- 53. Desktop apps… with web technology!
- 55. React desktop – Mac and Windows
- 57. 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
- 58. 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
- 59. 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
- 62. 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
- 64. 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
- 65. 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
- 66. Questions?
- 67. Rod Cope, CTO Rogue Wave Software
- 68. 68© 2015 Rogue Wave Software, Inc. All Rights Reserved. 68
Editor's Notes
- #24: .