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
2. Decisions
3. !"
4. Glenn Reyes @glnnrys
5. Why do we love building apps?
7. ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨
9. Open Source ❤
10. Vincent van Gogh “Great things are done by a series of small things brought together.”
12. How do we decide on things?
13. Which form library in React?
14. Which form library? formik final-form redux-form Vanilla
15. Which date library?
16. Which date library? moment dayjs date-fns Native luxon
17. Which id generator? nanoid cuid shortid my own
18. Making decisions are
 hard and time consuming.
19. Approaches
20. Just
 pick the first
26. What I need vs
 what my users need
28. !"
29. In any case ...
30. @glnnrys
31. @glnnrys !
32. @glnnrys !
33. @glnnrys !
34. @glnnrys ! (
35. @glnnrys ! (
36. @glnnrys ! (
37. @glnnrys ! (
38. Architectural Decision
39. Complexity Speed API Size Bugs Dependency Documentation Time Constraints Development Environment License
40. How to measure complexity?
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
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(' '); }
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(' '); }
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(' '); } }
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); }
47. element.classList.toggle(className);
48. How to determine
 bundle size?
49. https://bundlephobia.com/result?p=react
50. Measuring performance
55. ⏰
56. On the web
 there's new libraries every day
57. Use what works best for you
58. Community Support ❤
59. Powerful
61. People love solving problems
62. How are problems solved in web development?
63. Decisions
64. How to decide what library to use?
65. Is it over-engineered?
68. Look into the source code
69. The node_modules folder is your friend
70. Propose
 ideas & improvements
71. Should I
 pick the most popular library?
72. What is
 popularity?
74. ⭐ GitHub stars Active maintenance Active community Platforms
75. https://npm-stat.com
76. https://trends.google.com
77. Should I pick the most popular library?
79. How about
 just roll my own?
80. ¯\_(ツ)_/¯
81. Tailor to your exact needs
82. Full control
83. Own responsibility
84. Open vs closed
85. Where to
 draw the line?
86. Finding the right
 balance
87. Importance
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.
89. Harm reduction
90. Try to get the best outcome
 but reduce potential risks
91. Pareto principle
 80/20
92. Make decisions
93. Make good decisions
94. Make clean decisions
95. Make right decisions
96. Make smart decisions
97. Make reasonable decisions
98. Everytime we add more code into our library
 we increase the spectrum for new bugs
99. Take risks and
 keep moving forward
100. Take risks and
 be creative
101. Always start simple
102. There's a reason why things are being open-sourced.
103. Keep good practices that worked in the past.
104. You don't have to use it because it's new.
105. Don't let new things intimidate you
106. Write the best code possible
107. One day old code becomes legacy.
 And if they are great, we'll enjoy using older code even more.
108. Keep using what you know best
109. Never stop
 learning
110. Never stop
 learning new things
111. Thank you @glnnrys · glennreyes.com