Drawing the line between 3rd party and custom code

Transcript

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

   · glennreyes.com

2. Decisions @glnnrys

3. @glnnrys

4. Glenn Reyes @glnnrys

5. Why do we love building apps? @glnnrys

6. None

7. ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ @glnnrys

8. None

9. Open Source is ❤ @glnnrys

10. Vincent van Gogh “Great things are done by a series

    of small things brought together.” @glnnrys

11. @glnnrys

12. How do we decide on things? @glnnrys

13. Which form library in React? @glnnrys

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

15. Which date library? @glnnrys

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

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

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

19. Approaches @glnnrys

20. Just pick the whatever @glnnrys

21. None
22. None
23. None
24. None
25. None

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

27. None

28. @glnnrys

29. In any case ... @glnnrys

30. @glnnrys @glnnrys

31. @glnnrys @glnnrys

32. Architectural Decision @glnnrys

33. Complexity Speed API Size Bugs Dependency Documentation Time Constraints Development

    Environment License @glnnrys

34. How to measure complexity? @glnnrys

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

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

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

38. @glnnrys

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

40. // $(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); } @glnnrys

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

42. How to determine bundle size? @glnnrys

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

44. Import Cost VSCode Extension @glnnrys

45. Measuring performance @glnnrys

46. @glnnrys

47. @glnnrys

48. @glnnrys

49. @glnnrys

50. ⏰ @glnnrys

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

52. Use what works best for you @glnnrys

53. Community Support ❤ @glnnrys

54. Powerful @glnnrys

55. @glnnrys

56. People love solving problems @glnnrys

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

58. Decisions @glnnrys

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

60. Is it over-engineered? @glnnrys

61. @glnnrys

62. @glnnrys

63. Look into the source code @glnnrys

64. The node_modules folder is your friend @glnnrys

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

66. Dealing with picking the most popular library @glnnrys

67. @glnnrys

68. ⭐ GitHub stars Active maintenance Active community Platforms @glnnrys

69. https://npm-stat.com @glnnrys

70. https://trends.google.com @glnnrys

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

72. @glnnrys

73. How about just roll my own? @glnnrys

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

75. Rolling your own code allows you to Tailor code to

    your exact needs @glnnrys

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

77. With full control it's your respobility to maintain and keep

    track of your code @glnnrys

78. Where to draw the line? @glnnrys

79. Find the right balance intuitively @glnnrys

80. Understand the importance of decisions @glnnrys

81. Harm reduction @glnnrys

82. Try to get the best outcome but reduce potential risks

    @glnnrys

83. Make decisions @glnnrys

84. Make good decisions @glnnrys

85. Make good decisions Make clean decisions @glnnrys

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

87. Make good decisions Make clean decisions Make right decisions Make

    smart decisions @glnnrys

88. Make good decisions Make clean decisions Make right decisions Make

    smart decisions Make reasonable decisions @glnnrys

89. Everytime we add more code into our library we increase

    the spectrum for new bugs @glnnrys

90. Take risks and keep moving forward @glnnrys

91. Take risks and be creative @glnnrys

92. Always start simple @glnnrys

93. There's a reason why things are being open-sourced. @glnnrys

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

95. You don't have to use it because it's new. @glnnrys

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

97. Write the best code possible @glnnrys

98. One day old code becomes legacy. And if they are

    great, we'll enjoy using older code even more. @glnnrys

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

100. Keep using code what you know best @glnnrys

101. Never stop learning @glnnrys

102. Never stop learning new things @glnnrys

103. Thank you @glnnrys · glennreyes.com