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

Drawing the line between 3rd party and handcrafted code

Drawing the line between 3rd party and handcrafted code

Often when we write new components, 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

April 25, 2019
Tweet

Transcript

  1. 3rd party handcrafted @glnnrys

  2. Glenn Reyes @glnnrys

  3. @glnnrys What should I use?

  4. @glnnrys formik final-form formsy redux-form, duh! What form library should

    I use?
  5. @glnnrys react-datepicker react-date-picker react-day-picker material-ui What date picker should I

    use?
  6. @glnnrys moment date-fns dayjs luxon None, just native Date API

    What date library should I use?
  7. @glnnrys nanoid cuid shortid None, just write my own What

    id generator should I use?
  8. @glnnrys lodash ramda underscore What utility library should I use?

  9. @glnnrys

  10. @glnnrys Approaches

  11. @glnnrys

  12. @glnnrys

  13. @glnnrys Awesome!! Now we have collected all 534 different options!

    
 Let's setup a 3-day meeting in two weeks to talk about that and make a constructive bikeshedding workshop!
  14. @glnnrys In any case ...

  15. @glnnrys

  16. @glnnrys "

  17. @glnnrys "

  18. @glnnrys "

  19. @glnnrys "

  20. @glnnrys "

  21. @glnnrys Architectural decision

  22. @glnnrys Complexity Speed API Size Bugs Dependency Documentation Time Constraints

    Development Environment License https://stackoverflow.com/q/1236256/4149575
  23. @glnnrys How to decide what library to use?

  24. @glnnrys How to decide what library to use? GitHub stars

    Active maintenance Active community Platforms
  25. None
  26. None
  27. None
  28. @glnnrys Is it over-engineered?

  29. @glnnrys Look into the source code.

  30. @glnnrys 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(' '); }
  31. @glnnrys 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(' '); }
  32. @glnnrys 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(' '); }
  33. @glnnrys el.classList.toggle(className);

  34. @glnnrys Should I pick the lib with highest popularity?

  35. @glnnrys How to measure popularity?

  36. @glnnrys GitHub stars

  37. @glnnrys npm downloads

  38. @glnnrys npm downloads

  39. @glnnrys Google Trends

  40. @glnnrys Google Trends

  41. @glnnrys Should I pick the lib with highest popularity?

  42. @glnnrys No.

  43. @glnnrys Why not just write my own?

  44. @glnnrys Tailor to your exact needs.

  45. @glnnrys Full control

  46. @glnnrys Own responsibility

  47. @glnnrys Where to draw the line?

  48. @glnnrys It depends.

  49. @glnnrys It's a complex problem.

  50. @glnnrys Importance

  51. @glnnrys Complexity Speed API Size Bugs Dependency Documentation Time Constraints

    Development Environment License
  52. “ ” @glnnrys 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.
  53. Harm reduction

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

  55. @glnnrys 80/20

  56. Always have an answer.

  57. Always have a reason.

  58. Kiitos. @glnnrys