Drawing the line between 3rd party and custom code

Transcript

1. Drawing the line between
   3rd party and custom code
   @glnnrys · glennreyes.com
   

   View Slide

2. @glnnrys
   

   View Slide

3. @glnnrys
   

   View Slide

4. Glenn Reyes
   
   
   @glnnrys
   

   View Slide

5. Why do we love building
   apps?
   @glnnrys
   

   View Slide

6. View Slide

7. Open Source is
   
   
   ❤
   @glnnrys
   

   View Slide

8. Vincent van Gogh
   “Great things are done by a series
   of small things brought together.”
   @glnnrys
   

   View Slide

9. @glnnrys
   

   View Slide

10. How do we decide
    on things?
    @glnnrys
    

    View Slide

11. Which form library in
    React?
    @glnnrys
    

    View Slide

12. Which form library?
    formik
    final-form
    redux-form
    Vanilla
    @glnnrys
    

    View Slide

13. Which date library?
    @glnnrys
    

    View Slide

14. Which date library?
    moment
    dayjs
    date-fns
    Native
    luxon
    @glnnrys
    

    View Slide

15. Which id generator?
    nanoid
    cuid
    shortid
    my own
    @glnnrys
    

    View Slide

16. View Slide

17. Making decisions are
    hard and time consuming.
    @glnnrys
    

    View Slide

18. Approaches
    @glnnrys
    

    View Slide

19. Just
    pick any
    @glnnrys
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. What I need vs
    what my users need
    @glnnrys
    

    View Slide

26. View Slide

27. 👩💻👨💻
    @glnnrys
    

    View Slide

28. In any case ...
    @glnnrys
    

    View Slide

29. @glnnrys
    🤓 👩💻 👷
    @glnnrys
    

    View Slide

30. @glnnrys
    🤓 👩💻 👷
    
    
    🐒 👩🎤 🔮 🥑 🍌
    @glnnrys
    

    View Slide

31. Architectural Decision
    @glnnrys
    

    View Slide

32. Complexity
    
    
    Speed
    
    
    API
    
    
    Size
    
    
    Bugs
    
    
    Dependency
    
    
    Documentation
    
    
    Time Constraints
    
    
    Development Environment
    
    
    License
    @glnnrys
    

    View Slide

33. How to measure
    complexity?
    @glnnrys
    

    View Slide

34. // $(el).toggleClass(className)
    
    
    function toggleClass(el, className) {
    
    
    if (el.classList) {
    
    
    el.classList.toggle(className);
    
    
    } else {
    
    
    var classes = el.className.split(' ');
    
    
    var existingIndex = classes.indexOf(className);
    
    
    
    
    if (existingIndex >= 0)
    
    
    classes.splice(existingIndex, 1);
    
    
    else
    
    
    classes.push(className);
    
    
    
    
    el.className = classes.join(' ');
    
    
    }
    
    
    }
    youmightnotneedjquery.com
    @glnnrys
    

    View Slide

35. // $(el).toggleClass(className)
    
    
    var classes = el.className.split(' ');
    
    
    var existingIndex = classes.indexOf(className);
    
    
    
    
    if (existingIndex >= 0)
    
    
    classes.splice(existingIndex, 1);
    
    
    else
    
    
    classes.push(className);
    
    
    
    
    el.className = classes.join(' ');
    
    
    }
    
    
    @glnnrys
    

    View Slide

36. // $(el).toggleClass(className)
    
    
    var classes = el.className.split(' ');
    
    
    var existingIndex = classes.indexOf(className);
    
    
    
    
    if (existingIndex >= 0)
    
    
    classes.splice(existingIndex, 1);
    
    
    else
    
    
    classes.push(className);
    
    
    
    
    el.className = classes.join(' ');
    
    
    }
    
    
    🧐
    @glnnrys
    

    View Slide

37. @glnnrys
    

    View Slide

38. // $(el).toggleClass(className)
    
    
    function toggleClass(el, className) {
    
    
    if (el.classList) {
    
    
    el.classList.toggle(className);
    
    
    } else {
    
    
    var classes = el.className.split(' ');
    
    
    var existingIndex = classes.indexOf(className);
    
    
    
    
    if (existingIndex >= 0)
    
    
    classes.splice(existingIndex, 1);
    
    
    else
    
    
    classes.push(className);
    
    
    
    
    el.className = classes.join(' ');
    
    
    }
    
    
    }
    @glnnrys
    

    View Slide

39. // $(el).toggleClass(className)
    
    
    function toggleClass(el, className) {
    
    
    el.classList.toggle(className);
    
    
    }
    @glnnrys
    

    View Slide

40. element.classList.toggle(className);
    @glnnrys
    

    View Slide

41. Bundle size
    @glnnrys
    

    View Slide

42. https://bundlephobia.com/result?p=react
    @glnnrys
    

    View Slide

43. Import Cost VSCode Extension
    
    
    @glnnrys
    

    View Slide

44. @glnnrys
    

    View Slide

45. @glnnrys
    

    View Slide

46. On the web
    there's new libraries every day
    @glnnrys
    

    View Slide

47. Use what works best
    for you
    @glnnrys
    

    View Slide

48. Community Support ❤
    @glnnrys
    

    View Slide

49. @glnnrys
    

    View Slide

50. People love solving problems
    @glnnrys
    

    View Slide

51. NO PROBLEMS === NO 🤑 🤑 🤑
    

    View Slide

52. View Slide

53. How are problems solved
    in web development?
    @glnnrys
    

    View Slide

54. Decisions
    @glnnrys
    

    View Slide

55. How to decide what
    library to use?
    @glnnrys
    

    View Slide

56. Is it over-engineered?
    @glnnrys
    

    View Slide

57. @glnnrys
    

    View Slide

58. @glnnrys
    

    View Slide

59. Look into the source
    code 🤓
    @glnnrys
    

    View Slide

60. The node_modules folder
    is your friend
    @glnnrys
    

    View Slide

61. Let maintainers know about your
    problem, ideas &
    improvements
    @glnnrys
    

    View Slide

62. It should solve your
    problem
    @glnnrys
    

    View Slide

63. Dealing with
    picking the most popular
    library
    @glnnrys
    

    View Slide

64. @glnnrys
    

    View Slide

65. ⭐ GitHub stars
    
    
    🛠 Active maintenance
    
    
    🍃 Active community
    
    
    💻 Platforms
    @glnnrys
    

    View Slide

66. Should I
    
    
    pick the most popular library?
    @glnnrys
    

    View Slide

67. @glnnrys
    

    View Slide

68. How about
    just roll my own?
    @glnnrys
    

    View Slide

69. ¯\_(ツ)_/¯
    @glnnrys
    

    View Slide

70. Rolling your own code allows you to
    Tailor code to your exact needs
    @glnnrys
    

    View Slide

71. Rolling your own code gives you
    full control
    @glnnrys
    

    View Slide

72. With full control
    it's your responsibility to
    maintain and keep track of
    your code
    @glnnrys
    

    View Slide

73. Where to
    draw the line?
    @glnnrys
    

    View Slide

74. Find the right balance
    intuitively
    @glnnrys
    

    View Slide

75. Understand the
    importance of decisions
    @glnnrys
    

    View Slide

76. Harm reduction
    @glnnrys
    

    View Slide

77. Try to get the best outcome
    but reduce potential risks
    @glnnrys
    

    View Slide

78. Make decisions
    @glnnrys
    

    View Slide

79. Make good decisions
    @glnnrys
    

    View Slide

80. Make good decisions
    
    
    Make clean decisions
    @glnnrys
    

    View Slide

81. Make good decisions
    
    
    Make clean decisions
    
    
    Make right decisions
    @glnnrys
    

    View Slide

82. Make good decisions
    
    
    Make clean decisions
    
    
    Make right decisions
    
    
    Make smart decisions
    @glnnrys
    

    View Slide

83. Make good decisions
    
    
    Make clean decisions
    
    
    Make right decisions
    
    
    Make smart decisions
    
    
    Make reasonable decisions
    @glnnrys
    

    View Slide

84. Everytime we add more code into our library
    we increase the spectrum
    for new bugs
    @glnnrys
    

    View Slide

85. Take risks and
    keep moving forward
    @glnnrys
    

    View Slide

86. Always start simple
    @glnnrys
    

    View Slide

87. Keep good practices
    that worked in the past.
    @glnnrys
    

    View Slide

88. Don't let new things
    intimidate you
    @glnnrys
    

    View Slide

89. Write the best code possible
    @glnnrys
    

    View Slide

90. One day old code becomes legacy.
    And if they are great, we'll enjoy
    using older code even more.
    @glnnrys
    

    View Slide

91. “ ”
    Kent C. Dodds
    We should be mindful of the fact that we
    don't really know what requirements will
    be placed upon our code in the future.
    @glnnrys
    

    View Slide

92. Keep using code
    
    
    what you know best
    @glnnrys
    

    View Slide

93. Never stop
    learning
    @glnnrys
    

    View Slide

94. Never stop
    learning new things
    @glnnrys
    

    View Slide

95. Thank you
    
    
    @glnnrys · glennreyes.com
    

    View Slide