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

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/result?p=draft-js@0.11.0
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. Thanks )
    

    View Slide

69. https://speakerdeck.com/rstankov
    

    View Slide