Dealing With Dependancies in JavaScript

Transcript

1. Dealing with dependencies in JavaScript (like a champ !) Radoslav

   Stankov 31/10/2019
2. None

3. Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov

4. None

5. https://speakerdeck.com/rstankov

6. None
7. None

8. open ./node_modules

9. None
10. None

11. " JavaScript Fatigue

12. None
13. None
14. None
15. None

16. 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?
 ... #

17. Agenda

18. $ Dependency types % Picking dependencies & Handling dependencies

19. Dependency types

20. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '

21. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '

22. 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?
 ... #

23. 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?
 ... #

24. What ecosystem to choose? How to manage state? How to

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... #

25. What ecosystem to choose? How to manage state? How to

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... #
26. None

27. History of JS Ecosystem

28. History of JS Ecosystem 2005

29. History of JS Ecosystem 2005 2006

30. History of JS Ecosystem 2005 2010 2006

31. History of JS Ecosystem 2005 2010 2006

32. History of JS Ecosystem 2005 2013 2010 2006

33. History of JS Ecosystem 2005 2019 2013 2010 2006

34. None
35. None
36. None

37. What ecosystem to choose? How to manage state? How to

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... #

38. What ecosystem to choose? How to manage state? How to

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... #

39. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '
40. None
41. None

42. History of React Ecosystem 2013 2019

43. History of React Ecosystem 2013 2019 2014

44. History of React Ecosystem 2013 2019 2014 2015

45. History of React Ecosystem 2013 2019 2014 2015

46. History of React Ecosystem 2013 2019 2014 2015 2016

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

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

49. History of React Ecosystem 2013 2019 2014 2015 2016

50. None
51. None

52. What ecosystem to choose? How to manage state? How to

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... #

53. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '

54. Picking Dependencies

55. ⏹ 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

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

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

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

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

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

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

62. https://bundlephobia.com/result?p=draft-js@0.11.0

63. None

64. Handling dependencies

65. Who is developer worst enemy?

66. * The designer Who is developer worst enemy?

67. * The designer + The QA Who is developer worst

    enemy?

68. * The designer + The QA , The sys admin

    Who is developer worst enemy?

69. * The designer + The QA , The sys admin

    - The project owner Who is developer worst enemy?

70. * The designer + The QA , The sys admin

    - The project owner . Santa Who is developer worst enemy?

71. * The designer + The QA , The sys admin

    - The project owner . Santa / Code coupling Who is developer worst enemy?

72. * The designer + The QA , The sys admin

    - The project owner . Santa / Code coupling Who is developer worst enemy?

73. / Code coupling

74. None
75. None

76. // pages/Home/index.js import * as React from 'react'; import {

    Jumbotron } from 'react-bootstrap'; import { Link } from 'react-router'; import moment from 'moment'; import styles from './styles.css'; import globalStyles from 'styles/global.css'; import classNames from 'classNames'; import FancyTime from 'fancy-time' export default class Page extends React.Component { state = { time: new Date(), }; componentDidMount() { this.interval = setInterval(this.updateTime, 1000); } componentWillUnmount() { clearInterval(this.interval); this.interval = null; } updateTime = () => { this.setState({ time: new Date() }); } render() { const { time } = this.state.time; return ( <Jumbotron> <h1 className={className(styles.header, globalStyles.header)}>Conference</h1> <p>

77. export default class Page extends React.Component { state = {

    time: new Date(), }; componentDidMount() { this.interval = setInterval(this.updateTime, 1000); } componentWillUnmount() { clearInterval(this.interval); this.interval = null; } updateTime = () => { this.setState({ time: new Date() }); } render() { const { time } = this.state.time; return ( <Jumbotron> <h1 className={className(styles.header, globalStyles.header)}>Conference</h1> <p> <FancyTime className={className(styles.clock, globalStyles.time)} datetime={moment(time).format()}> {moment(time).format('HH:mm')} </FancyTime> <Link to="/schedule">Schedule</Link> <Link to="/venue">Venue</Link> </p> </Jumbotron> ); } }

78. Reasons for change

79. Component Dependency Dependency Dependency

80. Component Dependency Dependency Dependency Component Component Dependency Dependency

81. Component Component Component Dependency nent Comp Dependency Dependency Dependency Dependency

    Dependency Dependency Dep cy

82. Control changes

83. Component Dependency Dependency

84. Component Dependency Dependency Component

85. Component Dependency Dependency Component Component Component

86. Time Moment FancyTime Page Page Page

87. export default class Page extends React.Component { state = {

    time: new Date(), }; componentDidMount() { this.interval = setInterval(this.updateTime, 1000); } componentWillUnmount() { clearInterval(this.interval); this.interval = null; } updateTime = () => { this.setState({ time: new Date() }); } render() { const { time } = this.state.time; return ( <Jumbotron> <h1 className={className(styles.header, globalStyles.header)}>Conference</h1> <p> <FancyTime className={className(styles.clock, globalStyles.time)} datetime={moment(time).format()}> {moment(time).format('HH:mm')} </FancyTime> <Link to="/schedule">Schedule</Link> <Link to="/venue">Venue</Link> </p> </Jumbotron> ); } }

88. export default class Page extends React.Component { state = {

    time: new Date(), }; componentDidMount() { this.interval = setInterval(this.updateTime, 1000); } componentWillUnmount() { clearInterval(this.interval); this.interval = null; } updateTime = () => { this.setState({ time: new Date() }); } render() { const { time } = this.state.time; return ( <Jumbotron> <h1 className={className(styles.header, globalStyles.header)}>Conference</h1> <p> <Time className={styles.clock} time={time} /> <Link to="/schedule">Schedule</Link> <Link to="/venue">Venue</Link> </p> </Jumbotron> ); } }

89. // components/Time/index.js import * as React from 'react'; import classNames

    from 'classNames'; import styles from './styles.css'; import moment from 'moment'; import FancyTime from 'fancy-time'; export default function Time({ className, time }) { return ( <FancyTime className={className(styles.time, className)} datetime={moment(time).format()}> {moment(time).format('HH:mm')} </FancyTime> ); }

90. Time Moment FancyTime Page Page Page

91. Time Utils FancyTime Page Page Page Moment

92. // components/Time/index.js import * as React from 'react'; import classNames

    from 'classNames'; import styles from './styles.css'; import { formatTime } from './utils'; import FancyTime from 'fancy-time'; export default function Time({ className, time }) { return ( <FancyTime className={className(styles.time, className)} datetime={formatTime('full'}> {formatTime('clock')} </FancyTime> ); } // components/Time/utils.js import moment from 'moment'; const FORMATS = { 'full': null, 'clock': 'HH:mm', }; export function formatTime(time, kind) { const format = FORMATS[kind] return moment(time).format(format); }

93. // pages/Home/index.js import * as React from 'react'; import {

    Jumbotron } from 'react-bootstrap'; import { Link } from 'react-router'; import styles from './styles.css'; import globalStyles from 'styles/global.css'; import classNames from 'classNames';
 import Time from 'components/Time'; export default class Page extends React.Component { state = { time: new Date(), }; componentDidMount() { this.interval = setInterval(this.updateTime, 1000); } componentWillUnmount() { clearInterval(this.interval); this.interval = null; } updateTime = () => { this.setState({ time: new Date() }); } render() { const { time } = this.state.time; return ( <Jumbotron> <h1 className={className(styles.header, globalStyles.header)}>Conference</h1> <p>

94. // pages/Home/index.js import * as React from 'react'; import {

    Jumbotron } from 'react-bootstrap'; import { Link } from 'react-router'; import styles from './styles.css'; import globalStyles from 'styles/global.css'; import classNames from 'classNames'; import Time from 'components/Time'; import Clock from 'components/Clock'; export default class Page extends React.Component { render() { return ( <Jumbotron> <h1 className={className(styles.header, globalStyles.header)}>Conference</h1> <p> <Clock> {(time) => <Time time={time} />} </Clock> <Link to="/schedule">Schedule</Link> <Link to="/venue">Venue</Link> </p> </Jumbotron> ); } }

95. // pages/Home/index.js import * as React from 'react'; import {

    Jumbotron } from 'react-bootstrap'; import { Link } from 'react-router'; import styles from './styles.css'; import globalStyles from 'styles/global.css'; import classNames from 'classNames'; import Time from 'components/Time'; import Clock from 'components/Clock'; export default class Page extends React.Component { render() { return ( <Jumbotron> <h1 className={className(styles.header, globalStyles.header)}>Conference</h1> <p> <Clock> {(time) => <Time time={time} />} </Clock> <Link to="/schedule">Schedule</Link> <Link to="/venue">Venue</Link> </p> </Jumbotron> ); } }

96. // pages/Home/index.js import * as React from 'react'; import {

    Link } from 'react-router'; import Time from 'components/Time'; import Clock from 'components/Clock'; import Jumbotron from 'components/Jumbotron'; export default function Page() { return ( <Jumbotron title="Conference"> <Clock> {(time) => <Time time={time} />} </Clock> <Link to="/schedule">Schedule</Link> <Link to="/venue">Venue</Link> </Jumbotron> ); }

97. // paths.js export default { schedule() { return '/schedule'; },

    venue() { return '/venue'; } };

98. // pages/Home/index.js import * as React from 'react'; import {

    Link } from 'react-router'; import paths from 'paths'; import Time from 'components/Time'; import Clock from 'components/Clock'; import Jumbotron from 'components/Jumbotron'; export default function Page() { return ( <Jumbotron title="Conference"> <Clock> {(time) => <Time time={time} />} </Clock> <Link to={paths.schedule()}>Schedule</Link> <Link to={paths.venue()}>Venue</Link> </Jumbotron> ); }

99. // pages/Home/index.js import * as React from 'react'; import {

    Link } from 'react-router'; import paths from 'paths'; import Time from 'components/Time'; import Clock from 'components/Clock'; import Jumbotron from 'components/Jumbotron'; export default function Page() { return ( <Jumbotron title="Conference"> <Clock> {(time) => <Time time={time} />} </Clock> <Link to={paths.schedule()}>Schedule</Link> <Link to={paths.venue()}>Venue</Link> </Jumbotron> ); }

100. // components/Link/index.js import { Link } from 'react-router'; export default

     function Link({ to, className, children }) { return ( <Link to={to} className={className}>{children}</Link> ); }

101. // components/Link/index.js import { Link } from 'found'; export default

     function Link({ to, className, children }) { return ( <Link to={to} className={className}>{children}</Link> ); }
102. None
103. None
104. None

105. Thanks 0

106. https://speakerdeck.com/rstankov