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

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

    View Slide

  2. @glnnrys

    View Slide

  3. @glnnrys

    View Slide

  4. Glenn Reyes


    @glnnrys

    View Slide

  5. Why do we love building
    apps?
    @glnnrys

    View Slide

  6. View Slide

  7. Open Source is



    @glnnrys

    View Slide

  8. Vincent van Gogh
    “Great things are done by a series
    of small things brought together.”
    @glnnrys

    View Slide

  9. @glnnrys

    View Slide

  10. How do we decide
    on things?
    @glnnrys

    View Slide

  11. Which form library in
    React?
    @glnnrys

    View Slide

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

    View Slide

  13. Which date library?
    @glnnrys

    View Slide

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

    View Slide

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

    View Slide

  16. View Slide

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

    View Slide

  18. Approaches
    @glnnrys

    View Slide

  19. Just
    pick any
    @glnnrys

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

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

    View Slide

  26. View Slide

  27. 👩💻👨💻
    @glnnrys

    View Slide

  28. In any case ...
    @glnnrys

    View Slide

  29. @glnnrys
    🤓 👩💻 👷
    @glnnrys

    View Slide

  30. @glnnrys
    🤓 👩💻 👷


    🐒 👩🎤 🔮 🥑 🍌
    @glnnrys

    View Slide

  31. Architectural Decision
    @glnnrys

    View Slide

  32. Complexity


    Speed


    API


    Size


    Bugs


    Dependency


    Documentation


    Time Constraints


    Development Environment


    License
    @glnnrys

    View Slide

  33. How to measure
    complexity?
    @glnnrys

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  37. @glnnrys

    View Slide

  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

    View Slide

  39. // $(el).toggleClass(className)


    function toggleClass(el, className) {


    el.classList.toggle(className);


    }
    @glnnrys

    View Slide

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

    View Slide

  41. Bundle size
    @glnnrys

    View Slide

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

    View Slide

  43. Import Cost VSCode Extension


    @glnnrys

    View Slide

  44. @glnnrys

    View Slide

  45. @glnnrys

    View Slide

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

    View Slide

  47. Use what works best
    for you
    @glnnrys

    View Slide

  48. Community Support ❤
    @glnnrys

    View Slide

  49. @glnnrys

    View Slide

  50. People love solving problems
    @glnnrys

    View Slide

  51. NO PROBLEMS === NO 🤑 🤑 🤑

    View Slide

  52. View Slide

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

    View Slide

  54. Decisions
    @glnnrys

    View Slide

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

    View Slide

  56. Is it over-engineered?
    @glnnrys

    View Slide

  57. @glnnrys

    View Slide

  58. @glnnrys

    View Slide

  59. Look into the source
    code 🤓
    @glnnrys

    View Slide

  60. The node_modules folder
    is your friend
    @glnnrys

    View Slide

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

    View Slide

  62. It should solve your
    problem
    @glnnrys

    View Slide

  63. Dealing with
    picking the most popular
    library
    @glnnrys

    View Slide

  64. @glnnrys

    View Slide

  65. ⭐ GitHub stars


    🛠 Active maintenance


    🍃 Active community


    💻 Platforms
    @glnnrys

    View Slide

  66. Should I


    pick the most popular library?
    @glnnrys

    View Slide

  67. @glnnrys

    View Slide

  68. How about
    just roll my own?
    @glnnrys

    View Slide

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

    View Slide

  70. Rolling your own code allows you to
    Tailor code to your exact needs
    @glnnrys

    View Slide

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

    View Slide

  72. With full control
    it's your responsibility to
    maintain and keep track of
    your code
    @glnnrys

    View Slide

  73. Where to
    draw the line?
    @glnnrys

    View Slide

  74. Find the right balance
    intuitively
    @glnnrys

    View Slide

  75. Understand the
    importance of decisions
    @glnnrys

    View Slide

  76. Harm reduction
    @glnnrys

    View Slide

  77. Try to get the best outcome
    but reduce potential risks
    @glnnrys

    View Slide

  78. Make decisions
    @glnnrys

    View Slide

  79. Make good decisions
    @glnnrys

    View Slide

  80. Make good decisions


    Make clean decisions
    @glnnrys

    View Slide

  81. Make good decisions


    Make clean decisions


    Make right decisions
    @glnnrys

    View Slide

  82. Make good decisions


    Make clean decisions


    Make right decisions


    Make smart decisions
    @glnnrys

    View Slide

  83. Make good decisions


    Make clean decisions


    Make right decisions


    Make smart decisions


    Make reasonable decisions
    @glnnrys

    View Slide

  84. Everytime we add more code into our library
    we increase the spectrum
    for new bugs
    @glnnrys

    View Slide

  85. Take risks and
    keep moving forward
    @glnnrys

    View Slide

  86. Always start simple
    @glnnrys

    View Slide

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

    View Slide

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

    View Slide

  89. Write the best code possible
    @glnnrys

    View Slide

  90. One day old code becomes legacy.
    And if they are great, we'll enjoy
    using older code even more.
    @glnnrys

    View Slide

  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

    View Slide

  92. Keep using code


    what you know best
    @glnnrys

    View Slide

  93. Never stop
    learning
    @glnnrys

    View Slide

  94. Never stop
    learning new things
    @glnnrys

    View Slide

  95. Thank you


    @glnnrys · glennreyes.com

    View Slide