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

More Decks by Glenn Reyes

Other Decks in Programming

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

  6. None
  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

  16. None
  17. Making decisions are hard and time consuming. @glnnrys

  18. Approaches @glnnrys

  19. Just pick any @glnnrys

  20. None
  21. None
  22. None
  23. None
  24. None
  25. What I need vs what my users need @glnnrys

  26. None
  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 🤑 🤑 🤑

  52. None
  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