Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The how and why of flexible React components

The how and why of flexible React components

Jenn Creighton

October 14, 2018
Tweet

More Decks by Jenn Creighton

Other Decks in Programming

Transcript

  1. The how and why of flexible
    React components
    THE HOW AND WHY
    OF FLEXIBLE REACT
    COMPONENTS

    View Slide

  2. Hi! I’m Jenn.
    Senior Frontend Engineer, ClassPass
    @gurlcode

    View Slide

  3. @gurlcode

    View Slide

  4. flexible
    @gurlcode

    View Slide

  5. @gurlcode

    View Slide

  6. @gurlcode

    View Slide

  7. with Tooltip
    withTooltip
    @gurlcode

    View Slide

  8. with Tooltip
    with Dot
    withTooltip
    withDot
    @gurlcode

    View Slide

  9. with Tooltip
    with Dot
    with Modal
    withDot
    withModal
    withTooltip
    @gurlcode

    View Slide

  10. 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
    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

    View Slide

  11. @gurlcode

    View Slide

  12. @gurlcode

    View Slide

  13. You have another
    reservation at this time.
    @gurlcode

    View Slide

  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

    View Slide

  15. View Slide

  16. @gurlcode

    View Slide

  17. reusable !== flexible
    @gurlcode

    View Slide

  18. Flexibility is about more than reusability.
    It’s about the ability understand and augment.
    @gurlcode

    View Slide

  19. @gurlcode

    View Slide

  20. @gurlcode

    View Slide


  21. @gurlcode

    View Slide

  22. @gurlcode

    View Slide

  23. @gurlcode

    View Slide

  24. @gurlcode

    View Slide

  25. @gurlcode

    View Slide

  26. Keep business logic out of your components.
    @gurlcode

    View Slide

  27. @gurlcode

    View Slide

  28. Centralized logic is easier to reason about
    @gurlcode

    View Slide

  29. Test the component separate from the logic
    @gurlcode

    View Slide

  30. @gurlcode

    View Slide


  31. @gurlcode

    View Slide

  32. @gurlcode

    View Slide

  33. @gurlcode

    View Slide

  34. @gurlcode

    View Slide

  35. @gurlcode

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. @gurlcode

    View Slide

  40. @gurlcode

    View Slide

  41. View Slide

  42. @gurlcode

    View Slide

  43. @gurlcode

    View Slide

  44. @gurlcode

    View Slide

  45. @gurlcode

    View Slide


  46. @gurlcode

    View Slide

  47. components[type]
    @gurlcode

    View Slide

  48. components = {
    reserve: ReserveCta,
    join: JoinCta,
    cancel: CancelCta,
    disable: DisableCta,
    reactivate: ReactivateCta
    }
    @gurlcode

    View Slide

  49. const Component = components[type];
    @gurlcode

    View Slide

  50. const Component =`${left || right}Sidebar`;
    @gurlcode

    View Slide

  51. const Component = props.isCard ? (



    ) : ();
    @gurlcode

    View Slide

  52. @gurlcode

    View Slide

  53. @gurlcode

    View Slide

  54. @gurlcode

    View Slide

  55. @gurlcode

    View Slide

  56. @gurlcode

    View Slide

  57. type={?}
    className=“”
    />

    View Slide

  58. @gurlcode

    View Slide

  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

    View Slide

  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

    View Slide

  61. Hmm…
    @gurlcode

    View Slide

  62. Render Props*
    *children as a function
    @gurlcode

    View Slide

  63. … so what if children were a function?
    @gurlcode

    View Slide

  64. @gurlcode

    View Slide

  65. ?
    ?
    ?
    ? ?
    ?
    ?
    ?
    ? ?
    ?
    ? ?
    ?
    ?
    ??
    ??
    ??
    ?
    ?
    ??
    ?
    ?
    ?
    ? ?? @gurlcode

    View Slide

  66. @gurlcode

    View Slide

  67. @gurlcode

    View Slide

  68. @gurlcode

    View Slide

  69. @gurlcode

    View Slide

  70. @gurlcode

    View Slide

  71. @gurlcode

    View Slide

  72. Render Props === state delegate
    children function === UI handler
    @gurlcode

    View Slide

  73. https://reactjs.org/docs/render-props.html
    https://github.com/paypal/downshift
    @gurlcode

    View Slide

  74. @gurlcode

    View Slide

  75. you === flexible
    @gurlcode

    View Slide

  76. @gurlcode

    View Slide

  77. Know your traps.
    @gurlcode

    View Slide

  78. Kill your darlings.
    @gurlcode

    View Slide

  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

    View Slide

  80. Thank you!
    Content by Jenn Creighton
    Illustrations by Janny Ji (jannyji.com)
    @gurlcode

    View Slide