Dealing With Dependancies in JavaScript

Dealing With Dependancies in JavaScript

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

October 27, 2019
Tweet

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