how to build a reliable checkout experience
TRANSCRIPT
HI!
WHO AM I?
▸Pedro Teixeira
▸@pgte
▸Partner and Chief Futurist @ YLD
▸Node.js Developer
▸Offline-first enthusiast
HOW TO BUILD A RELIABLE CHECKOUT
EXPERIENCE
…USING NODE.JS, POUCHDB AND
REPLICATED TRANSACTION DOCUMENTS
E-COMMERCE
THE CHECKOUT
EXPERIENCE
IS A JOURNEY THAT BEGINS WITH THE OPTIMISTIC
CHECKOUT BUTTON
BUT ONLY REALLY BEGINS WITH THE
CONFIRMATION BUTTON
BEHIND THE SCENES…
WHICH EVENTUALLY END
IN SUCCESS
AND A CONFIRMATION
WHAT CAN GO
WRONG?
DUPLICATE TRANSACTIONS
UNDEFINED STATE
CLIENT CRASHES
LET’S TALK ABOUT MOBILE
https://youtu.be/aqvz5Oqs238
(LAST SLIDE TAKEN FROM ILYA GRIGORIK’S GOOGLE IO TALK)
MAIN TAKEAWAY IS
DEVELOPING RELIABLE MOBILE APPS IS
PARTICULARLY DIFFICULT
LET’S GRADE HOW APPS DEAL WITH
NETWORKING FAILURES
E NO ERROR HANDLING
D CUSTOMER IS NOTIFIED
OF THE ERROR
C CUSTOMER CAN RECOVER
FROM ERROR
B APP CAN RECOVER FROM SOME SYSTEM ERRORS
A APP CAN RECOVER FROM SOME
SYSTEM AND USER ERRORS
LAST STAGE IS PARTICULARLY
EXPENSIVE
WHY?
LET’S LOOK AT
SYSTEMS ARCHITECTURE
TOO MUCH RESPONSIBILITY
“WORKS ON MY LAPTOP”
BUT WAIT…
ALL WE NEED IS SYNC
ONE DATABASE PER CUSTOMER
ONE DOCUMENT PER TRANSACTION
SYNC PROTOCOL REPLICATES TRANSACTION DOC (BI-DIRECTIONAL)
= OFFLINE TOLERANCE
CLERK REACTS TO TRANSACTION
STATE CHANGES
CLERK INJECTS TRANSACTION STATE
CHANGES WHEN BACK-END EVENT OCCURS
SHOW ME THE CODE!
UI
POUCH-REDUX-MIDDLEWARE
BACK-END
POUCH-CLERK
CLERK
1. STATE TRANSITIONS 2. ASYNC UPDATERS
STATE TRANSITIONS
ASYNC UPDATERS
QUICK DEMO
DEMO IS ALSO OPEN SOURCE
pgte/pouch-clerk-example-app
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
THANK YOU!