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

Making Good Decisions About Javascript Dependencies

Making Good Decisions About Javascript Dependencies

Lighting talk presented at BeerJS Sofia.

Sites for the shown tools:

* https://www.npmjs.com
* https://github.com
* http://npm.broofa.com
* https://bundlephobia.com

Radoslav Stankov

August 01, 2019
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

  1. Making Good Decisions
    About
    Javascript Dependencies
    Radoslav Stankov 01/08/2019

    View Slide

  2. Radoslav Stankov
    @rstankov

    http://rstankov.com

    http://github.com/rstankov

    View Slide

  3. https://speakerdeck.com/rstankov

    View Slide

  4. View Slide

  5. ...imagine starting a new project !

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. " JavaScript Fatigue

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. What framework to use?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component to use?
    Which chart component to use?

    ...
    #

    View Slide

  19. Agenda

    View Slide

  20. $ Dependency types
    % Picking dependencies

    View Slide

  21. Dependency types

    View Slide

  22. Medium
    easy

    to change
    Big
    Medium
    Small
    Medium
    Small
    Small
    Small
    Small Small
    hard
    to change
    simple complex
    * totally unscientific chart &

    View Slide

  23. Medium
    easy

    to change
    Big
    Medium
    Small
    Medium
    Small
    Small
    Small
    Small Small
    hard
    to change
    simple complex
    * totally unscientific chart &

    View Slide

  24. What framework to use?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component to use?
    Which chart component to use?

    ...
    #

    View Slide

  25. What framework to use?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component to use?
    Which chart component to use?

    ...
    #

    View Slide

  26. What ecosystem to choose?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component use?
    Which chart component use?

    ...
    #

    View Slide

  27. What ecosystem to choose?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component use?
    Which chart component use?

    ...
    #

    View Slide

  28. View Slide

  29. History of JS Ecosystem

    View Slide

  30. History of JS Ecosystem
    2005

    View Slide

  31. History of JS Ecosystem
    2005 2006

    View Slide

  32. History of JS Ecosystem
    2005 2010
    2006

    View Slide

  33. History of JS Ecosystem
    2005 2010
    2006

    View Slide

  34. History of JS Ecosystem
    2005 2013
    2010
    2006

    View Slide

  35. History of JS Ecosystem
    2005 2019
    2013
    2010
    2006

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. What ecosystem to choose?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component use?
    Which chart component use?

    ...
    #

    View Slide

  40. What ecosystem to choose?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component use?
    Which chart component use?

    ...
    #

    View Slide

  41. Medium
    easy

    to change
    Big
    Medium
    Small
    Medium
    Small
    Small
    Small
    Small Small
    hard
    to change
    simple complex
    * totally unscientific chart &

    View Slide

  42. View Slide

  43. View Slide

  44. History of React Ecosystem
    2013 2019

    View Slide

  45. History of React Ecosystem
    2013 2019
    2014

    View Slide

  46. History of React Ecosystem
    2013 2019
    2014 2015

    View Slide

  47. History of React Ecosystem
    2013 2019
    2014 2015

    View Slide

  48. History of React Ecosystem
    2013 2019
    2014 2015 2016

    View Slide

  49. History of React Ecosystem
    2013 2019
    2014 2015 2016
    Concepts

    View Slide

  50. History of React Ecosystem
    2013 2019
    2014 2015 2016
    Libraries

    View Slide

  51. History of React Ecosystem
    2013 2019
    2014 2015 2016

    View Slide

  52. View Slide

  53. View Slide

  54. What ecosystem to choose?
    How to manage state?
    How to fetch data?
    Which router to use?
    Which calendar component use?
    Which chart component use?

    ...
    #

    View Slide

  55. Medium
    easy

    to change
    Big
    Medium
    Small
    Medium
    Small
    Small
    Small
    Small Small
    hard
    to change
    simple complex
    * totally unscientific chart &

    View Slide

  56. Picking Dependencies

    View Slide

  57. ⏹ Do we really need it?
    ⏹ Can something we already have do the task we are searching for?
    ⏹ Can we implement this ourselves?
    ⏹ Is this properly maintained?
    ⏹ Is it well documented?
    ⏹ When was the last version?
    ⏹ When was the last commit?
    ⏹ How often does it get a new version?
    ⏹ Does it have CHANGELOG?
    ⏹ Were there breaking changes recently?
    ⏹ Does it have security issues past or present?
    ⏹ How many dependencies does it come from?
    ⏹ What the dependency size?
    ⏹ What is its license?
    ⏹ Do you use this in any other project?
    ✅ Questions

    View Slide

  58. https://www.npmjs.com/package/lodash

    View Slide

  59. https://www.npmjs.com/package/lodash

    View Slide

  60. https://www.npmjs.com/package/draft-js

    View Slide

  61. https://github.com/facebook/draft-js

    View Slide

  62. https://github.com/facebook/draft-js/issues

    View Slide

  63. http://npm.broofa.com/?q=draft-js

    View Slide

  64. https://bundlephobia.com/[email protected]

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. Thanks )

    View Slide

  69. https://speakerdeck.com/rstankov

    View Slide