InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado
Report
iMastersFollow
Nov. 10, 2017•0 likes•1,012 views
3 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado
Nov. 10, 2017•0 likes•1,012 views
3 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Fluxos Dinâmicos no Front-end Controlados pelo Back-end
iMastersFollow
Recommended
NZNOG 2019: The State of Routing (In)SecurityAPNIC
Apama, Terracotta, webMethods Upgrade: Avoiding Common Pitfalls Software AG
Tripleseat Software PresentationJonathan Morse
Software Company Profile -Corporate services Corporate Services
The State of Front End Web Development 2011Pascal Rettig
New company presentation slidesharesolutions-2
InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado
- BE LIKE WATER FRONTEND CONTROLLED BY THE BACKEND Fuad Saud • Thales Machado
- INTRODUCTION Nubank Card • Documents • Address • Shipping Address • Due date • Pin • Etc…
- Acquisition On Nubank = 24 to 37 screens (and some with more than one state) INTRODUCTION Nubank Acquisition
- Let’s take a deeper look INTRODUCTION Nubank Acquisition
- Acquisition Features • CPF • Password • Account created warning • RG • RG issuer • Marital Status • Cell phone number • Location Permission Warning • CEP • Address • Neighborhood • City • State • Camera Permission Warning • Docs Front • Docs Back • Selfie • Income • Limit range • Due day • PIN • Summary • Signature • Terms n Conditions • Date of birth
- Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth WHAT DO THEY HAVE IN COMMON?
- Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth THEY ARE SIMPLE QUESTION AND ANSWER SCREENS
- Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth DO WE NEED THAT MANY?
- Acquisition Features CPF Password RG CEP Address City State Camera Permission Warning Docs Front Docs Back Selfie Limit range Due day PIN Terms n Conditions Date of birth DO WE NEED THAT MANY?
- Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth HOW CAN THE APP DECIDE?
- Acquisition Features CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth CHANGES ALWAYS REQUIRE A NEW VERSION + PEOPLE UPDATING THE APP
- Acquisition Desired Solution The backend can know all this information • Easy to add, change or remove one STEP in the flow • Easy to do A/B testing • Centralized logic • Changes do not need to depend on customers updating the app
- Don't get set into one form, adapt it and build your own, and let it grow, BE LIKE WATER - Bruce Lee
- Navigational flow • A flow is divided in chunks, which is a set of steps • A flow is non linear, that is, it can have bifurcations • A flow should follow a communication protocol in order to navigate
- What is a flow nit
- What is a Chunk
- Step
- Entry Point GET /api/flows/<flow-name>/owners/<owner-id>
- Flow Graph A B C G D E F H I
- Flow Graph A B C G D E F H I
- Flow Graph C G D E F H IBA
- Flow Graph C G D E F H IA B
- Flow Graph C G D E F H IA B
- Flow Graph C G D E F H IA B
- Flow Graph C G D E F H I sync sync A B
- Flow Graph C G D E F H I sync sync chunk A B
- Acquisition Chunks CPF PasswordRead Only Chunk
- Submit Responses POST /api/chunks/<chunk-id> 202 Accepted
- Response Processing async
- Polling GET /api/flows/<flow-name>/owners/<owner-id> 202 Accepted
- Finished Processing GET /api/flows/<flow-name>/owners/<owner-id> 200 OK
- Flow Redirect
- Flow Graph C G D E F H I sync sync A B
- Flow Graph C G D E F H I sync sync A B
- Flow Graph C G D E F H I sync sync A B
- Flow Graph C G D E F H I sync sync chunk A B
- Flow Graph C G D E F H I sync sync A B
- Flow Graph C G D E F H I sync sync A B
- Flow Graph C G D E F H I sync sync chunk A B
- Backwards Compatibility C E D F GA B new step type (unsupported by client) step type supported by client supports destination step? yes! no
- STEPS DEFINITIONS IN DEEP
- Acquisition Steps Steps • Represent a single piece of information on the flow • Can be a question or an announcement • Can generate an answer • Is the base of all the flow • Is represented as a JSON document
- Step Definition in the Backend
- JSON Step
- Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Text Inputs
- Acquisition Steps Text Inputs • Need to conform to different masks: • Phone • CEP • CPF • Date of Birth • etc… • Can have more than one per Screen • Complex validation
- Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Read Only
- Acquisition Steps Read Only • Do not generate an answer • Normally used as warnings • Can be used to establish decision points (flow bifurcation)
- Acquisition Steps CPF Password Account created warning RG RG issuer Marital Status Cell phone number Location Permission Warning CEP Address Neighborhood City State Camera Permission Warning Docs Front Docs Back Selfie Income Limit range Due day PIN Summary Signature Terms n Conditions Date of birth Multiple Choice
- Acquisition Steps Multiple Choice • Can be restricted into one or more selections • A cell click can redirect • Can be shown as a list or a matrix (e.g due day)
- Acquisition Steps And it goes on… Limit range Summary Pin Photo SlideShow
- Acquisition Steps Steps • Represent a single piece of information on the flow • Can be a question or an announcement • Can generate an answer • Is the base of all the flow • Is represented as a JSON document • Can have it’s text fully customizable inside a guideline
- Acquisition Numl • Some are base tags, which define the base color, font and size for that text • The others define the emphasis they will act upon Separated into a semantical meaning <h1> <h2> <h6> <label> <p> <small> ColorEmphasis FontEmphasis StyleEmphasis <i> <em> <b> <span> <strong> <a>
- Acquisition Numl
- QUESTIONS WE ARE HIRING! https://nubank.workable.com/
- THANKS! thales.machado@nubank.com.br fuad.saud@nubank.com.br