Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drawing the line betweek 3rd party and custom code

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.

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

October 08, 2019
Tweet

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?

  6. None
  7. ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨

  8. None
  9. Open Source ❤

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

    of small things brought together.”
  11. None
  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

  21. None
  22. None
  23. None
  24. None
  25. None
  26. What I need vs
 what my users need

  27. None
  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(' '); }
  44. None
  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

  51. None
  52. None
  53. None
  54. None
  55. On the web
 there's new libraries every day

  56. Use what works best for you

  57. Community Support ❤

  58. Powerful

  59. None
  60. People love solving problems

  61. How are problems solved in web development?

  62. Decisions

  63. How to decide what library to use?

  64. Is it over-engineered?

  65. None
  66. None
  67. Look into the source code

  68. The node_modules folder is your friend

  69. Propose
 ideas & improvements

  70. Should I
 pick the most popular library?

  71. What is
 popularity?

  72. None
  73. ⭐ GitHub stars Active maintenance Active community Platforms

  74. https://npm-stat.com

  75. https://trends.google.com

  76. Should I pick the most popular library?

  77. None
  78. How about
 just roll my own?

  79. ¯\_(ツ)_/¯

  80. Tailor to your exact needs

  81. Full control

  82. Own responsibility

  83. Open vs closed

  84. Where to
 draw the line?

  85. Finding the right
 balance

  86. Importance

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

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

  90. Pareto principle
 80/20

  91. Make decisions

  92. Make good decisions

  93. Make clean decisions

  94. Make right decisions

  95. Make smart decisions

  96. Make reasonable decisions

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

    the spectrum for new bugs
  98. Take risks and
 keep moving forward

  99. Take risks and
 be creative

  100. Always start simple

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

  102. Keep good practices that worked in the past.

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

  104. Don't let new things intimidate you

  105. Write the best code possible

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

    great, we'll enjoy using older code even more.
  107. Keep using what you know best

  108. Never stop
 learning

  109. Never stop
 learning new things

  110. Thank you @glnnrys · glennreyes.com