Dealing With Dependancies in JavaScript

Transcript

1. Dealing with dependencies in JavaScript (like a champ !) Radoslav Stankov 31/10/2019
3. Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov
5. https://speakerdeck.com/rstankov
8. open ./node_modules
11. " JavaScript Fatigue
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?
 ... #
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
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 '
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
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
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
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> ); }
105. Thanks 0
106. https://speakerdeck.com/rstankov