Drawing the line between 3rd party and custom code

Transcript

1. Drawing the line between 3rd party and custom code @glnnrys · glennreyes.com
2. @glnnrys
3. @glnnrys
4. Glenn Reyes @glnnrys
5. Why do we love building apps? @glnnrys
7. Open Source is ❤ @glnnrys
8. Vincent van Gogh “Great things are done by a series of small things brought together.” @glnnrys
9. @glnnrys
10. How do we decide on things? @glnnrys
11. Which form library in React? @glnnrys
12. Which form library? formik final-form redux-form Vanilla @glnnrys
13. Which date library? @glnnrys
14. Which date library? moment dayjs date-fns Native luxon @glnnrys
15. Which id generator? nanoid cuid shortid my own @glnnrys
17. Making decisions are hard and time consuming. @glnnrys
18. Approaches @glnnrys
19. Just pick any @glnnrys
25. What I need vs what my users need @glnnrys
27. 👩💻👨💻 @glnnrys
28. In any case ... @glnnrys
29. @glnnrys 🤓 👩💻 👷 @glnnrys
30. @glnnrys 🤓 👩💻 👷 🐒 👩🎤 🔮 🥑 🍌 @glnnrys
31. Architectural Decision @glnnrys
32. Complexity Speed API Size Bugs Dependency Documentation Time Constraints Development Environment License @glnnrys
33. How to measure complexity? @glnnrys
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
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
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
37. @glnnrys
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
39. // $(el).toggleClass(className) function toggleClass(el, className) { el.classList.toggle(className); } @glnnrys
40. element.classList.toggle(className); @glnnrys
41. Bundle size @glnnrys
42. https://bundlephobia.com/result?p=react @glnnrys
43. Import Cost VSCode Extension @glnnrys
44. @glnnrys
45. @glnnrys
46. On the web there's new libraries every day @glnnrys
47. Use what works best for you @glnnrys
48. Community Support ❤ @glnnrys
49. @glnnrys
50. People love solving problems @glnnrys
51. NO PROBLEMS === NO 🤑 🤑 🤑
53. How are problems solved in web development? @glnnrys
54. Decisions @glnnrys
55. How to decide what library to use? @glnnrys
56. Is it over-engineered? @glnnrys
57. @glnnrys
58. @glnnrys
59. Look into the source code 🤓 @glnnrys
60. The node_modules folder is your friend @glnnrys
61. Let maintainers know about your problem, ideas & improvements @glnnrys
62. It should solve your problem @glnnrys
63. Dealing with picking the most popular library @glnnrys
64. @glnnrys
65. ⭐ GitHub stars 🛠 Active maintenance 🍃 Active community 💻 Platforms @glnnrys
66. Should I pick the most popular library? @glnnrys
67. @glnnrys
68. How about just roll my own? @glnnrys
69. ¯\_(ツ)_/¯ @glnnrys
70. Rolling your own code allows you to Tailor code to your exact needs @glnnrys
71. Rolling your own code gives you full control @glnnrys
72. With full control it's your responsibility to maintain and keep track of your code @glnnrys
73. Where to draw the line? @glnnrys
74. Find the right balance intuitively @glnnrys
75. Understand the importance of decisions @glnnrys
76. Harm reduction @glnnrys
77. Try to get the best outcome but reduce potential risks @glnnrys
78. Make decisions @glnnrys
79. Make good decisions @glnnrys
80. Make good decisions Make clean decisions @glnnrys
81. Make good decisions Make clean decisions Make right decisions @glnnrys
82. Make good decisions Make clean decisions Make right decisions Make smart decisions @glnnrys
83. Make good decisions Make clean decisions Make right decisions Make smart decisions Make reasonable decisions @glnnrys
84. Everytime we add more code into our library we increase the spectrum for new bugs @glnnrys
85. Take risks and keep moving forward @glnnrys
86. Always start simple @glnnrys
87. Keep good practices that worked in the past. @glnnrys
88. Don't let new things intimidate you @glnnrys
89. Write the best code possible @glnnrys
90. One day old code becomes legacy. And if they are great, we'll enjoy using older code even more. @glnnrys
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
92. Keep using code what you know best @glnnrys
93. Never stop learning @glnnrys
94. Never stop learning new things @glnnrys
95. Thank you @glnnrys · glennreyes.com