JS@PayPal - Specialization with Dynamic React Forms

Transcript

1. Specialization with dynamic React forms
2. @brunopsanches Bruno Sanches
3. Scaling merchant onboarding Lessons and updates Usability tests Current status
4. Scaling merchant onboarding Lessons and updates Usability tests Current status
5. page1.dust email.dust email.js email.css name.dust name.js name.css address.dust address.js address.css page1.js page1.css
6. Flow
7. Default flow Team 1 Group flow 1 Flow 1.1 Flow 1.2 Team 2 Group flow 2 Flow 2.1 Flow 2.2 Team 3 Flow 3 Team 4 Flow 4
8. Scaling merchant onboarding Lessons and updates Usability tests Current status
9. Rewrite
10. Rewrite Client && Server side
11. Rewrite Client && Server side F0 && Named Hooks
12. Rewrite Client && Server side F0 && Named Hooks React forms && Specialization
13. React forms
14. Minimize client side code Flexibility++ Built for open source
23. Okay, that’s a lot of
25. "email": { "component": "TextInput", "validations": [ "required", "emailCheck" ], "attributes": { "title": "email.title", "placeholder": "email.placeholder", "name": "email" }, "wrapperAttributes": { "className": "col-md-12" } }
26. "email": { "component": "TextInput", "validations": [ "required", "emailCheck" ], "attributes": { "title": "email.title", "placeholder": "email.placeholder", "name": "email" }, "wrapperAttributes": { "className": "col-md-12" } }
27. "email": { "component": "TextInput", "validations": [ "required", "emailCheck" ], "attributes": { "title": "email.title", "placeholder": "email.placeholder", "name": "email" }, "wrapperAttributes": { "className": "col-md-12" } }
28. "email": { "component": "TextInput", "validations": [ "required", "emailCheck" ], "attributes": { "title": "email.title", "placeholder": "email.placeholder", "name": "email" }, "wrapperAttributes": { "className": "col-md-12" } }
29. "email": { "component": "TextInput", "validations": [ "required", "emailCheck" ], "attributes": { "title": "email.title", "placeholder": "email.placeholder", "name": "email" }, "wrapperAttributes": { "className": "col-md-12" } }
32. Rewrite Client && Server side F0 && Named Hooks React forms && Specialization
33. Specialization On the server side Eliminate if (country === 'US') statements
34. if (country === 'US') { }
35. if (country === 'US') { if (product === 'product1') { } }
36. if (country === 'US') { if (product === 'product1') { } else if (product === 'product2') { } }
37. if (country === 'US') { if (product === 'product1') { } else if (product === 'product2') { } } else if (group === 'EU') { }
38. if (country === 'US') { if (product === 'product1') { } else if (product === 'product2') { } } else if (group === 'EU') { if (country === 'GB') { } }
39. if (country === 'US') { if (product === 'product1') { } else if (product === 'product2') { } } else if (group === 'EU') { if (country === 'GB') { if (product === 'product1') { } } }
40. if (country === 'US') { if (product === 'product1') { } else if (product === 'product2') { } } else if (group === 'EU') { if (country === 'GB') { if (product === 'product1') { if (experiment === 'exp1') { } } } }
43. Named Hooks to the rescue Isolates business logic
44. Named Hooks to the rescue Isolates business logic Open source module https://github.com/brunops/named-hooks
45. Demo
46. 1. Load base form 2. Resolve abstractions 3. Call hooks 4. Render
47. [ 'hookName', 'hookName_Group', 'hookName_Prod', 'hookName_Country', 'hookName_Country_Prod', 'hookName_Exp', 'hookName_Country_Exp', 'hookName_Country_Prod_Exp' ]
48. [ 'preRenderForm', 'preRenderForm_Group', 'preRenderForm_Prod', 'preRenderForm_Country', 'preRenderForm_Country_Prod', 'preRenderForm_Exp', 'preRenderForm_Country_Exp', 'preRenderForm_Country_Prod_Exp' ]
49. [ 'preRenderForm', 'preRenderForm_EU', 'preRenderForm_prod', 'preRenderForm_GB', 'preRenderForm_GB_prod', 'preRenderForm_exp', 'preRenderForm_GB_exp', 'preRenderForm_GB_prod_exp' ]
50. Scaling merchant onboarding Lessons and updates Usability tests Current status
51. Usability tests - Objective Tested with developers
52. Usability tests - Objective Tested with developers Configuration driven forms
53. Usability tests - Objective Tested with developers Configuration driven forms Documentation discovery
54. Usability tests - Setup Script
55. Usability tests - Setup Script 1. Create a form with text fields 2. Add a dropdown 3. Configure validations 4. Abstract fields 5. Create new page
56. Usability tests - Setup Script Six developers
57. Usability tests - Setup Script Six developers 30 minutes each
58. :(
59. Scaling merchant onboarding Lessons and updates Usability tests Current status
60. Current status 4 teams currently working with F0 Working towards open sourcing https://github.paypal.com/f0/f0/issues
61. @brunopsanches Thank you