The how and why of flexible React components

Transcript

1. The how and why of flexible React components THE HOW AND WHY OF FLEXIBLE REACT COMPONENTS
2. Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode
3. @gurlcode
4. flexible @gurlcode
5. @gurlcode
6. @gurlcode
7. with Tooltip withTooltip @gurlcode
8. with Tooltip with Dot withTooltip withDot @gurlcode
9. with Tooltip with Dot with Modal withDot withModal withTooltip @gurlcode
10. <BlockComponent className=“block block-md block—orange” message={message} withTooltip={false} withModal modalProps={modalProps} userId={userId} userName={userName} withDot={false} experimentRunning experimentId={experimentId} colorChange={false} showMessageOnLoad onModalClose={() => {}} hasRoundedCorners withAnalytics analyticsProps={analyticsProps} /> BEWARE THE APROPSCALYPSE <BlockComponent className=“block block—md block—orange” withTooltip={false} withDot={false} withModal modalProps={modalProps} onModalClose={onModalClose} onMouseOver={onMouseOver} withExperiment experimentId={experimentId} userName={userName} userId={userId} analyticsProps={analyticsProps} roundedCorners /> @gurlcode
11. @gurlcode
12. @gurlcode
13. You have another reservation at this time. @gurlcode
14. Is the user logged in? State of subscription? State of class? yes unsubscribed subscribed available unavailable reserved cancelled no join reactivate reserve disable cancel join
16. @gurlcode
17. reusable !== flexible @gurlcode
18. Flexibility is about more than reusability. It’s about the ability understand and augment. @gurlcode
19. @gurlcode
20. @gurlcode
21. <ScheduleCta type={?} /> @gurlcode
22. @gurlcode
23. @gurlcode
24. @gurlcode
25. @gurlcode
26. Keep business logic out of your components. @gurlcode
27. @gurlcode
28. Centralized logic is easier to reason about @gurlcode
29. Test the component separate from the logic @gurlcode
30. @gurlcode
31. <ScheduleCta type={?} /> @gurlcode
32. @gurlcode
33. @gurlcode
34. @gurlcode
35. @gurlcode
39. @gurlcode
40. @gurlcode
42. @gurlcode
43. @gurlcode
44. @gurlcode
45. @gurlcode
46. <ScheduleCta type={?} /> @gurlcode
47. components[type] @gurlcode
48. components = { reserve: ReserveCta, join: JoinCta, cancel: CancelCta, disable: DisableCta, reactivate: ReactivateCta } @gurlcode
49. const Component = components[type]; @gurlcode
50. const Component =`${left || right}Sidebar`; @gurlcode
51. const Component = props.isCard ? ( <Card> <Content /> </Card> ) : (<Content />); @gurlcode
52. @gurlcode
53. @gurlcode
54. @gurlcode
55. @gurlcode
56. @gurlcode
57. <ScheduleCta type={?} className=“” />
58. @gurlcode
59. Decreased prop complexity Use whatever logic we want Use individual CTAs alone Add & remove CTAs with ease Use whatever logic we want Use individual CTAs alone Add & remove CTAs with ease @gurlcode
60. CTAs added and removed for A/B tests Removing Disable CTA on some pages Classnames changed Messaging changed for ReserveCta Ask for specific CTA on specific page @gurlcode
61. Hmm… @gurlcode
62. Render Props* *children as a function @gurlcode
63. … so what if children were a function? @gurlcode
64. @gurlcode
65. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?? ?? ? ? ?? ? ? ? ? ?? @gurlcode
66. @gurlcode
67. @gurlcode
68. @gurlcode
69. @gurlcode
70. @gurlcode
71. @gurlcode
72. Render Props === state delegate children function === UI handler @gurlcode
73. https://reactjs.org/docs/render-props.html https://github.com/paypal/downshift @gurlcode
74. @gurlcode
75. you === flexible @gurlcode
76. @gurlcode
77. Know your traps. @gurlcode
78. Kill your darlings. @gurlcode
79. Start with the ideal API Let the API inform the component design Decide what level of magic you want Business logic does not belong in components Render Props is awesome (use it!) Be flexible as an engineer (know your traps, kill your darlings) @gurlcode
80. Thank you! Content by Jenn Creighton Illustrations by Janny Ji (jannyji.com) @gurlcode