Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to build a reliable checkout experience

640 views

Published on

uUsing Node.js, PouchDB and Replicated Transaction Documents

Published in: Engineering
  • Be the first to comment

How to build a reliable checkout experience

  1. 1. HI!
  2. 2. WHO AM I? ▸Pedro Teixeira ▸@pgte ▸Partner and Chief Futurist @ YLD ▸Node.js Developer ▸Offline-first enthusiast
  3. 3. HOW TO BUILD A RELIABLE CHECKOUT EXPERIENCE
  4. 4. …USING NODE.JS, POUCHDB AND REPLICATED TRANSACTION DOCUMENTS
  5. 5. E-COMMERCE
  6. 6. THE CHECKOUT EXPERIENCE
  7. 7. IS A JOURNEY THAT BEGINS WITH THE OPTIMISTIC CHECKOUT BUTTON
  8. 8. BUT ONLY REALLY BEGINS WITH THE CONFIRMATION BUTTON
  9. 9. BEHIND THE SCENES…
  10. 10. WHICH EVENTUALLY END IN SUCCESS
  11. 11. AND A CONFIRMATION E-MAIL
  12. 12. WHAT CAN GO WRONG?
  13. 13. DUPLICATE TRANSACTIONS
  14. 14. UNDEFINED STATE
  15. 15. CLIENT CRASHES
  16. 16. LET’S TALK ABOUT MOBILE
  17. 17. https://youtu.be/aqvz5Oqs238 (LAST SLIDE TAKEN FROM ILYA GRIGORIK’S GOOGLE IO TALK)
  18. 18. MAIN TAKEAWAY IS DEVELOPING RELIABLE MOBILE APPS IS PARTICULARLY DIFFICULT
  19. 19. LET’S GRADE HOW APPS DEAL WITH NETWORKING FAILURES
  20. 20. E NO ERROR HANDLING
  21. 21. D CUSTOMER IS NOTIFIED OF THE ERROR
  22. 22. C CUSTOMER CAN RECOVER FROM ERROR
  23. 23. B APP CAN RECOVER FROM SOME SYSTEM ERRORS
  24. 24. A APP CAN RECOVER FROM SOME SYSTEM AND USER ERRORS
  25. 25. LAST STAGE IS PARTICULARLY EXPENSIVE
  26. 26. WHY?
  27. 27. LET’S LOOK AT SYSTEMS ARCHITECTURE
  28. 28. TOO MUCH RESPONSIBILITY
  29. 29. “WORKS ON MY LAPTOP”
  30. 30. BUT WAIT…
  31. 31. ALL WE NEED IS SYNC
  32. 32. ONE DATABASE PER CUSTOMER
  33. 33. ONE DOCUMENT PER TRANSACTION
  34. 34. SYNC PROTOCOL REPLICATES TRANSACTION DOC (BI-DIRECTIONAL) = OFFLINE TOLERANCE
  35. 35. CLERK REACTS TO TRANSACTION STATE CHANGES
  36. 36. CLERK INJECTS TRANSACTION STATE CHANGES WHEN BACK- END EVENT OCCURS
  37. 37. SHOW ME THE CODE!
  38. 38. UI
  39. 39. POUCH-REDUX-MIDDLEWARE
  40. 40. BACK-END
  41. 41. POUCH-CLERK
  42. 42. CLERK 1. STATE TRANSITIONS 2. ASYNC UPDATERS
  43. 43. STATE TRANSITIONS
  44. 44. ASYNC UPDATERS
  45. 45. QUICK DEMO
  46. 46. DEMO IS ALSO OPEN SOURCE pgte/pouch-clerk-example-app
  47. 47. MORE 1. How to Build a Reliable Transaction Experience for your Customers (bl post) http://blog.yld.io/2016/06/24/how-to-build-a-reliable-transaction- experience-for-your-customers 2. Delivering a better transaction experience by using Replicated Transaction Documents (video) https://www.youtube.com/watch?v=2yb0tn3Q3Mg
  48. 48. THANK YOU!

×