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

Drawing the line between 3rd party and custom code

Drawing the line between 3rd party and custom code

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

October 11, 2019
Tweet

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