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
   

   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