Drawing the line betweek 3rd party and custom code

Often when we write new code, we might be like: Come on, there must be something out there! And most times there was already someone who faced the same problem... only that it's not quite the same. Should I use the 3rd party lib? Or go with my own? Let's find out the differences and drawbacks in this session.

Transcript

1. Drawing the line between

   3rd party and custom code
   @glnnrys
   

   View Slide

2. Decisions
   

   View Slide

3. !"
   

   View Slide

4. Glenn Reyes
   @glnnrys
   

   View Slide

5. Why do we love building
   apps?
   

   View Slide

6. View Slide

7. ✨
   ✨
   ✨
   ✨
   ✨
   ✨
   ✨
   ✨
   ✨
   

   View Slide

8. View Slide

9. Open Source ❤
   

   View Slide

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

    View Slide

11. View Slide

12. How do we decide
    on things?
    

    View Slide

13. Which form library in
    React?
    

    View Slide

14. Which form library?
    formik
    final-form
    redux-form
    Vanilla
    

    View Slide

15. Which date library?
    

    View Slide

16. Which date library?
    moment
    dayjs
    date-fns
    Native
    luxon
    

    View Slide

17. Which id generator?
    nanoid
    cuid
    shortid
    my own
    

    View Slide

18. Making decisions are

    hard and time consuming.
    

    View Slide

19. Approaches
    

    View Slide

20. Just

    pick the first
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. What I need vs

    what my users need
    

    View Slide

27. View Slide

28. !"
    

    View Slide

29. In any case ...
    

    View Slide

30. @glnnrys
    
    

    View Slide

31. @glnnrys
    !
    

    View Slide

32. @glnnrys
    !
    

    View Slide

33. @glnnrys
    !
    

    View Slide

34. @glnnrys
    !
    (
    

    View Slide

35. @glnnrys
    !
    (
    

    View Slide

36. @glnnrys
    !
    (
    

    View Slide

37. @glnnrys
    !
    (
    

    View Slide

38. Architectural Decision
    

    View Slide

39. Complexity
    Speed
    API
    Size
    Bugs
    Dependency
    Documentation
    Time Constraints
    Development Environment
    License
    

    View Slide

40. How to measure
    complexity?
    

    View Slide

41. // $(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
    

    View Slide

42. // $(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(' ');
    }
    }
    } 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(' ');
    }
    

    View Slide

43. // $(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(' ');
    }
    }
    } 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(' ');
    }
    
    

    View Slide

44. View Slide

45. // $(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(' ');
    }
    }
    

    View Slide

46. // $(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(' ');
    }
    }
    // $(el).toggleClass(className)
    function toggleClass(el, className) {
    el.classList.toggle(className);
    }
    

    View Slide

47. element.classList.toggle(className);
    

    View Slide

48. How to determine

    bundle size?
    

    View Slide

49. https://bundlephobia.com/result?p=react
    

    View Slide

50. Measuring
    performance
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. ⏰
    

    View Slide

56. On the web

    there's new libraries every day
    

    View Slide

57. Use what works best
    for you
    

    View Slide

58. Community Support ❤
    

    View Slide

59. Powerful
    

    View Slide

60. View Slide

61. People love solving problems
    

    View Slide

62. How are problems solved
    in web development?
    

    View Slide

63. Decisions
    

    View Slide

64. How to decide what
    library to use?
    

    View Slide

65. Is it over-engineered?
    

    View Slide

66. View Slide

67. View Slide

68. Look into the source
    code
    

    View Slide

69. The node_modules folder
    is your friend
    

    View Slide

70. Propose

    ideas & improvements
    

    View Slide

71. Should I

    pick the most popular
    library?
    

    View Slide

72. What is

    popularity?
    

    View Slide

73. View Slide

74. ⭐ GitHub stars
    Active maintenance
    Active community
    Platforms
    

    View Slide

75. https://npm-stat.com
    

    View Slide

76. https://trends.google.com
    

    View Slide

77. Should I
    pick the most popular library?
    

    View Slide

78. View Slide

79. How about

    just roll my own?
    

    View Slide

80. ¯\_(ツ)_/¯
    

    View Slide

81. Tailor to your exact
    needs
    

    View Slide

82. Full control
    

    View Slide

83. Own responsibility
    

    View Slide

84. Open vs closed
    

    View Slide

85. Where to

    draw the line?
    

    View Slide

86. Finding the right

    balance
    

    View Slide

87. Importance
    

    View Slide

88. “ ”
    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.
    

    View Slide

89. Harm reduction
    

    View Slide

90. Try to get the best outcome

    but reduce potential risks
    

    View Slide

91. Pareto principle

    80/20
    

    View Slide

92. Make decisions
    

    View Slide

93. Make good decisions
    

    View Slide

94. Make clean decisions
    

    View Slide

95. Make right decisions
    

    View Slide

96. Make smart decisions
    

    View Slide

97. Make reasonable decisions
    

    View Slide

98. Everytime we add more code into our library

    we increase the spectrum
    for new bugs
    

    View Slide

99. Take risks and

    keep moving forward
    

    View Slide

100. Take risks and

     be creative
     

     View Slide

101. Always start simple
     

     View Slide

102. There's a reason
     why things are being open-sourced.
     

     View Slide

103. Keep good practices
     that worked in the past.
     

     View Slide

104. You don't have to use it
     because it's new.
     

     View Slide

105. Don't let new things
     intimidate you
     

     View Slide

106. Write the best code possible
     

     View Slide

107. One day old code becomes legacy.

     And if they are great, we'll enjoy
     using older code even more.
     

     View Slide

108. Keep using
     what you know best
     

     View Slide

109. Never stop

     learning
     

     View Slide

110. Never stop

     learning new things
     

     View Slide

111. Thank you
     @glnnrys · glennreyes.com
     

     View Slide