Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado

Fluxos Dinâmicos no Front-end Controlados pelo Back-end

InterCon 2017 - Fluxos Dinâmicos no Front-end Controlados pelo Back-end - Fuad Saud & Thales Machado

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

    Be the first to comment

    Login to see the comments

  • gabrielaugusto

    Apr. 19, 2018
  • adimircolen

    May. 23, 2019
  • rodrigo_drds

    Oct. 24, 2019

Fluxos Dinâmicos no Front-end Controlados pelo Back-end

Views

Total views

802

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

14

Shares

0

Comments

0

Likes

3

×