intercon 2017 - fluxos dinâmicos no front-end controlados pelo back-end - fuad saud & thales...
TRANSCRIPT
![Page 1: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/1.jpg)
BE LIKE WATERFRONTEND CONTROLLED BY THE BACKEND
Fuad Saud • Thales Machado
![Page 2: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/2.jpg)
INTRODUCTION Nubank Card
• Documents
• Address
• Shipping Address
• Due date
• Pin
• Etc…
![Page 3: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/3.jpg)
Acquisition
On Nubank
= 24 to 37 screens
(and some with more than one state)
INTRODUCTION Nubank Acquisition
![Page 4: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/4.jpg)
Let’s take a deeper look
INTRODUCTION Nubank Acquisition
![Page 5: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/5.jpg)
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
![Page 6: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/6.jpg)
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?
![Page 7: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/7.jpg)
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
![Page 8: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/8.jpg)
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?
![Page 9: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/9.jpg)
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?
![Page 10: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/10.jpg)
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?
![Page 11: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/11.jpg)
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
![Page 12: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/12.jpg)
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
![Page 13: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/13.jpg)
Don't get set into one form, adapt it and build your own, and let it grow,
BE LIKE WATER- Bruce Lee
![Page 14: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/14.jpg)
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
![Page 15: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/15.jpg)
What is a flow
Init
![Page 16: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/16.jpg)
What is a Chunk
![Page 17: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/17.jpg)
Step
![Page 18: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/18.jpg)
Entry Point
GET /api/flows/<flow-name>/owners/<owner-id>
![Page 19: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/19.jpg)
Flow Graph
A B C
G
D E F
H I
![Page 20: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/20.jpg)
Flow Graph
A B C
G
D E F
H I
![Page 21: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/21.jpg)
Flow Graph
C
G
D E F
H IBA
![Page 22: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/22.jpg)
Flow Graph
C
G
D E F
H IA B
![Page 23: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/23.jpg)
Flow Graph
C
G
D E F
H IA B
![Page 24: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/24.jpg)
Flow Graph
C
G
D E F
H IA B
![Page 25: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/25.jpg)
Flow Graph
C
G
D E F
H I
sync
sync
A B
![Page 26: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/26.jpg)
Flow Graph
C
G
D E F
H I
sync
syncchunk
A B
![Page 27: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/27.jpg)
Acquisition Chunks
CPF PasswordRead Only
Chunk
![Page 28: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/28.jpg)
Submit Responses
POST /api/chunks/<chunk-id>
202 Accepted
![Page 29: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/29.jpg)
Response Processing
async
![Page 30: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/30.jpg)
Polling
GET /api/flows/<flow-name>/owners/<owner-id>
202 Accepted
![Page 31: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/31.jpg)
Finished Processing
GET /api/flows/<flow-name>/owners/<owner-id>
200 OK
![Page 32: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/32.jpg)
Flow Redirect
![Page 33: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/33.jpg)
Flow Graph
C
G
D E F
H I
sync
sync
A B
![Page 34: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/34.jpg)
Flow Graph
C
G
D E F
H I
sync
sync
A B
![Page 35: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/35.jpg)
Flow Graph
C
G
D E F
H I
sync
sync
A B
![Page 36: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/36.jpg)
Flow Graph
C
G
D E F
H I
sync
sync
chunkA B
![Page 37: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/37.jpg)
Flow Graph
C
G
D E F
H I
sync
sync
A B
![Page 38: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/38.jpg)
Flow Graph
C
G
D E F
H I
sync
sync
A B
![Page 39: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/39.jpg)
Flow Graph
C
G
D E F
H I
sync
syncchunk
A B
![Page 40: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/40.jpg)
Backwards Compatibility
C
E
D
F GA B
new step type(unsupported by client)
step typesupported by client
supports destination
step?yes!
no
![Page 41: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/41.jpg)
STEPS DEFINITIONS IN DEEP
![Page 42: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/42.jpg)
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
![Page 43: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/43.jpg)
Step Definition in the Backend
![Page 44: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/44.jpg)
JSON Step
![Page 45: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/45.jpg)
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
![Page 46: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/46.jpg)
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
![Page 47: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/47.jpg)
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
![Page 48: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/48.jpg)
Acquisition Steps Read Only
• Do not generate an answer
• Normally used as warnings
• Can be used to establish decision points (flow bifurcation)
![Page 49: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/49.jpg)
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
![Page 50: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/50.jpg)
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)
![Page 51: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/51.jpg)
Acquisition Steps
And it goes on…
Limit range Summary Pin Photo SlideShow
![Page 52: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/52.jpg)
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
![Page 53: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/53.jpg)
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>
![Page 54: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/54.jpg)
Acquisition Numl
![Page 55: InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado](https://reader030.vdocuments.us/reader030/viewer/2022020411/5a65bd457f8b9aa4758b64fd/html5/thumbnails/55.jpg)
QUESTIONS
WE ARE HIRING!https://nubank.workable.com/