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

Dealing With Dependancies in JavaScript

Dealing With Dependancies in JavaScript

Radoslav Stankov

October 27, 2019
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

  1. 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?
 ... #
  2. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '
  3. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '
  4. 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?
 ... #
  5. 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?
 ... #
  6. What ecosystem to choose? How to manage state? How to

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

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

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

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... #
  10. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '
  11. What ecosystem to choose? How to manage state? How to

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... #
  12. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart '
  13. ⏹ 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
  14. * The designer + The QA , The sys admin

    Who is developer worst enemy?
  15. * The designer + The QA , The sys admin

    - The project owner Who is developer worst enemy?
  16. * The designer + The QA , The sys admin

    - The project owner . Santa Who is developer worst enemy?
  17. * The designer + The QA , The sys admin

    - The project owner . Santa / Code coupling Who is developer worst enemy?
  18. * The designer + The QA , The sys admin

    - The project owner . Santa / Code coupling Who is developer worst enemy?
  19. // 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>
  20. 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> ); } }
  21. 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> ); } }
  22. 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> ); } }
  23. // 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> ); }
  24. // 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); }
  25. // 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>
  26. // 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> ); } }
  27. // 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> ); } }
  28. // 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> ); }
  29. // 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> ); }
  30. // 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> ); }
  31. // components/Link/index.js import { Link } from 'react-router'; export default

    function Link({ to, className, children }) { return ( <Link to={to} className={className}>{children}</Link> ); }
  32. // components/Link/index.js import { Link } from 'found'; export default

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