Download - How to build a reliable checkout experience
![Page 1: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/1.jpg)
HI!
![Page 2: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/2.jpg)
WHO AM I?
▸Pedro Teixeira
▸@pgte
▸Partner and Chief Futurist @ YLD
▸Node.js Developer
▸Offline-first enthusiast
![Page 3: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/3.jpg)
![Page 4: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/4.jpg)
![Page 5: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/5.jpg)
HOW TO BUILD A RELIABLE CHECKOUT
EXPERIENCE
![Page 6: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/6.jpg)
…USING NODE.JS, POUCHDB AND
REPLICATED TRANSACTION DOCUMENTS
![Page 7: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/7.jpg)
E-COMMERCE
![Page 8: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/8.jpg)
THE CHECKOUT
EXPERIENCE
![Page 9: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/9.jpg)
IS A JOURNEY THAT BEGINS WITH THE OPTIMISTIC
CHECKOUT BUTTON
![Page 10: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/10.jpg)
BUT ONLY REALLY BEGINS WITH THE
CONFIRMATION BUTTON
![Page 11: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/11.jpg)
BEHIND THE SCENES…
![Page 12: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/12.jpg)
WHICH EVENTUALLY END
IN SUCCESS
![Page 13: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/13.jpg)
AND A CONFIRMATION
![Page 14: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/14.jpg)
WHAT CAN GO
WRONG?
![Page 15: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/15.jpg)
DUPLICATE TRANSACTIONS
![Page 16: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/16.jpg)
UNDEFINED STATE
![Page 17: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/17.jpg)
CLIENT CRASHES
![Page 18: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/18.jpg)
LET’S TALK ABOUT MOBILE
![Page 19: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/19.jpg)
![Page 20: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/20.jpg)
https://youtu.be/aqvz5Oqs238
(LAST SLIDE TAKEN FROM ILYA GRIGORIK’S GOOGLE IO TALK)
![Page 21: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/21.jpg)
MAIN TAKEAWAY IS
DEVELOPING RELIABLE MOBILE APPS IS
PARTICULARLY DIFFICULT
![Page 22: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/22.jpg)
LET’S GRADE HOW APPS DEAL WITH
NETWORKING FAILURES
![Page 23: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/23.jpg)
E NO ERROR HANDLING
![Page 24: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/24.jpg)
D CUSTOMER IS NOTIFIED
OF THE ERROR
![Page 25: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/25.jpg)
C CUSTOMER CAN RECOVER
FROM ERROR
![Page 26: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/26.jpg)
B APP CAN RECOVER FROM SOME SYSTEM ERRORS
![Page 27: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/27.jpg)
A APP CAN RECOVER FROM SOME
SYSTEM AND USER ERRORS
![Page 28: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/28.jpg)
LAST STAGE IS PARTICULARLY
EXPENSIVE
![Page 29: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/29.jpg)
WHY?
![Page 30: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/30.jpg)
LET’S LOOK AT
SYSTEMS ARCHITECTURE
![Page 31: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/31.jpg)
![Page 32: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/32.jpg)
![Page 33: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/33.jpg)
![Page 34: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/34.jpg)
![Page 35: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/35.jpg)
TOO MUCH RESPONSIBILITY
![Page 36: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/36.jpg)
“WORKS ON MY LAPTOP”
![Page 37: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/37.jpg)
BUT WAIT…
![Page 38: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/38.jpg)
ALL WE NEED IS SYNC
![Page 39: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/39.jpg)
![Page 40: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/40.jpg)
![Page 41: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/41.jpg)
![Page 42: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/42.jpg)
![Page 43: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/43.jpg)
![Page 44: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/44.jpg)
ONE DATABASE PER CUSTOMER
![Page 45: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/45.jpg)
ONE DOCUMENT PER TRANSACTION
![Page 46: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/46.jpg)
SYNC PROTOCOL REPLICATES TRANSACTION DOC (BI-DIRECTIONAL)
= OFFLINE TOLERANCE
![Page 47: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/47.jpg)
CLERK REACTS TO TRANSACTION
STATE CHANGES
![Page 48: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/48.jpg)
![Page 49: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/49.jpg)
CLERK INJECTS TRANSACTION STATE
CHANGES WHEN BACK-END EVENT OCCURS
![Page 50: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/50.jpg)
SHOW ME THE CODE!
![Page 51: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/51.jpg)
UI
![Page 52: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/52.jpg)
POUCH-REDUX-MIDDLEWARE
![Page 53: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/53.jpg)
![Page 54: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/54.jpg)
BACK-END
![Page 55: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/55.jpg)
POUCH-CLERK
![Page 56: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/56.jpg)
CLERK
1. STATE TRANSITIONS 2. ASYNC UPDATERS
![Page 57: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/57.jpg)
STATE TRANSITIONS
![Page 58: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/58.jpg)
![Page 59: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/59.jpg)
ASYNC UPDATERS
![Page 60: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/60.jpg)
![Page 61: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/61.jpg)
QUICK DEMO
![Page 62: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/62.jpg)
DEMO IS ALSO OPEN SOURCE
pgte/pouch-clerk-example-app
![Page 63: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/63.jpg)
MORE1. How to Build a Reliable Transaction Experience for your Customers (blog 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
![Page 64: How to build a reliable checkout experience](https://reader031.vdocument.in/reader031/viewer/2022030305/587585cd1a28ab901c8b4b6f/html5/thumbnails/64.jpg)
THANK YOU!