NotAKeynote

 NotAKeynote

My <React.NotAConf /> Keynote: 🤔😅⁇

http://react-not-a-conf.com/

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

April 28, 2018
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 6.

    !

  5. 7.
  6. 8.
  7. 13.
  8. 17.
  9. 20.
  10. 21.

    "

  11. 22.
  12. 23.

    ??

  13. 24.
  14. 25.
  15. 26.
  16. 27.
  17. 28.
  18. 29.
  19. 30.
  20. 32.
  21. 33.

    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?
 ... !
  22. 34.

    Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart -
  23. 35.

    Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart -
  24. 36.

    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?
 ... !
  25. 37.

    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?
 ... !
  26. 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?
 ... !
  27. 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?
 ... !
  28. 40.
  29. 48.

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

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... !
  30. 49.
  31. 50.
  32. 51.

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

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... !
  33. 52.

    Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart -
  34. 53.
  35. 62.
  36. 63.
  37. 64.

    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. 65.

    Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart -
  39. 67.
  40. 68.
  41. 69.
  42. 70.
  43. 71.
  44. 75.

    / The designer 0 The QA 1 The sys admin

    Who is developer worst enemy?
  45. 76.

    / The designer 0 The QA 1 The sys admin

    2 The project owner Who is developer worst enemy?
  46. 77.

    / The designer 0 The QA 1 The sys admin

    2 The project owner 3 Santa Who is developer worst enemy?
  47. 78.

    / The designer 0 The QA 1 The sys admin

    2 The project owner 3 Santa 4 Code coupling Who is developer worst enemy?
  48. 79.

    / The designer 0 The QA 1 The sys admin

    2 The project owner 3 Santa 4 Code coupling Who is developer worst enemy?
  49. 81.

    // 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>
  50. 82.

    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> ); } }
  51. 92.

    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> ); } }
  52. 93.

    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> ); } }
  53. 94.

    // 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> ); }
  54. 97.

    // 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); }
  55. 98.

    // 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>
  56. 99.

    // 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> ); } }
  57. 100.

    // 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> ); } }
  58. 101.

    // 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> ); }
  59. 103.

    // 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> ); }
  60. 104.

    // 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> ); }
  61. 105.

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

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

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

    function Link({ to, className, children }) { return ( <Link to={to} className={className}>{children}</Link> ); }
  63. 107.
  64. 108.
  65. 109.

    "

  66. 110.
  67. 111.
  68. 112.