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 full-size slide

  2. Glenn Reyes


    @glnnrys

    View full-size slide

  3. Why do we love building
    apps?
    @glnnrys

    View full-size slide

  4. Open Source is



    @glnnrys

    View full-size slide

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

    View full-size slide

  6. How do we decide
    on things?
    @glnnrys

    View full-size slide

  7. Which form library in
    React?
    @glnnrys

    View full-size slide

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

    View full-size slide

  9. Which date library?
    @glnnrys

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Approaches
    @glnnrys

    View full-size slide

  14. Just
    pick any
    @glnnrys

    View full-size slide

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

    View full-size slide

  16. 👩💻👨💻
    @glnnrys

    View full-size slide

  17. In any case ...
    @glnnrys

    View full-size slide

  18. @glnnrys
    🤓 👩💻 👷
    @glnnrys

    View full-size slide

  19. @glnnrys
    🤓 👩💻 👷


    🐒 👩🎤 🔮 🥑 🍌
    @glnnrys

    View full-size slide

  20. Architectural Decision
    @glnnrys

    View full-size slide

  21. Complexity


    Speed


    API


    Size


    Bugs


    Dependency


    Documentation


    Time Constraints


    Development Environment


    License
    @glnnrys

    View full-size slide

  22. How to measure
    complexity?
    @glnnrys

    View full-size slide

  23. // $(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 full-size slide

  24. // $(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 full-size slide

  25. // $(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 full-size slide

  26. // $(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 full-size slide

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


    function toggleClass(el, className) {


    el.classList.toggle(className);


    }
    @glnnrys

    View full-size slide

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

    View full-size slide

  29. Bundle size
    @glnnrys

    View full-size slide

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

    View full-size slide

  31. Import Cost VSCode Extension


    @glnnrys

    View full-size slide

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

    View full-size slide

  33. Use what works best
    for you
    @glnnrys

    View full-size slide

  34. Community Support ❤
    @glnnrys

    View full-size slide

  35. People love solving problems
    @glnnrys

    View full-size slide

  36. NO PROBLEMS === NO 🤑 🤑 🤑

    View full-size slide

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

    View full-size slide

  38. Decisions
    @glnnrys

    View full-size slide

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

    View full-size slide

  40. Is it over-engineered?
    @glnnrys

    View full-size slide

  41. Look into the source
    code 🤓
    @glnnrys

    View full-size slide

  42. The node_modules folder
    is your friend
    @glnnrys

    View full-size slide

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

    View full-size slide

  44. It should solve your
    problem
    @glnnrys

    View full-size slide

  45. Dealing with
    picking the most popular
    library
    @glnnrys

    View full-size slide

  46. ⭐ GitHub stars


    🛠 Active maintenance


    🍃 Active community


    💻 Platforms
    @glnnrys

    View full-size slide

  47. Should I


    pick the most popular library?
    @glnnrys

    View full-size slide

  48. How about
    just roll my own?
    @glnnrys

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Where to
    draw the line?
    @glnnrys

    View full-size slide

  54. Find the right balance
    intuitively
    @glnnrys

    View full-size slide

  55. Understand the
    importance of decisions
    @glnnrys

    View full-size slide

  56. Harm reduction
    @glnnrys

    View full-size slide

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

    View full-size slide

  58. Make decisions
    @glnnrys

    View full-size slide

  59. Make good decisions
    @glnnrys

    View full-size slide

  60. Make good decisions


    Make clean decisions
    @glnnrys

    View full-size slide

  61. Make good decisions


    Make clean decisions


    Make right decisions
    @glnnrys

    View full-size slide

  62. Make good decisions


    Make clean decisions


    Make right decisions


    Make smart decisions
    @glnnrys

    View full-size slide

  63. Make good decisions


    Make clean decisions


    Make right decisions


    Make smart decisions


    Make reasonable decisions
    @glnnrys

    View full-size slide

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

    View full-size slide

  65. Take risks and
    keep moving forward
    @glnnrys

    View full-size slide

  66. Always start simple
    @glnnrys

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. Write the best code possible
    @glnnrys

    View full-size slide

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

    View full-size slide

  71. “ ”
    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 full-size slide

  72. Keep using code


    what you know best
    @glnnrys

    View full-size slide

  73. Never stop
    learning
    @glnnrys

    View full-size slide

  74. Never stop
    learning new things
    @glnnrys

    View full-size slide

  75. Thank you


    @glnnrys · glennreyes.com

    View full-size slide