how to build a reliable checkout experience

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

E-MAIL

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!