The how and why of flexible React components

The how and why of flexible React components

Aaaf75447dba53a3de9a5c41d6c2e060?s=128

Jenn Creighton

October 14, 2018
Tweet

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
  15. None
  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

  36. None
  37. None
  38. None
  39. @gurlcode

  40. @gurlcode

  41. None
  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