NotAKeynote

 NotAKeynote

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

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

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

April 28, 2018
Tweet

Transcript

  1. !"?? Radoslav Stankov 28/04/2018

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

  3. None
  4. None
  5. !"??

  6. !

  7. None
  8. "BG"

  9. "BG".replace(/./g, c => String.fromCodePoint(c.charCodeAt(0) + 127397));

  10. "BG".replace(/./g, c => String.fromCodePoint(c.charCodeAt(0) + 127397)); === #

  11. "$" + "\u200D" + "❤" + "\u200D" + "&"

  12. "$" + "\u200D" + "❤" + "\u200D" + "&" ===

    "'"
  13. "$" + "\u200D" + "❤" + "\u200D" + "&" ===

    "'" ZWJ Zero Width Joiner
  14. "$" + "\u200D" + "("

  15. "$" + "\u200D" + "(" === ")"

  16. "$" + "*" + "\u200D" + "(" === "+"

  17. None
  18. ...but I'm not going to talk about emojis today "

  19. <NotAnEmojiTalk />

  20. None
  21. "

  22. !"?? ??

  23. ??

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. , JavaScript Fatigue

  32. None
  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?
 ... !
  34. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart -
  35. Medium easy
 to change Big Medium Small Medium Small Small

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

    fetch data? Which router to use? Which calendar component use? Which chart component use?
 ... !
  40. None
  41. History of JS Ecosystem

  42. History of JS Ecosystem 2005

  43. History of JS Ecosystem 2005 2006

  44. History of JS Ecosystem 2005 2010 2006

  45. History of JS Ecosystem 2005 2010 2006

  46. History of JS Ecosystem 2005 2013 2010 2006

  47. History of JS Ecosystem 2005 2018 2013 2010 2006

  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?
 ... !
  49. None
  50. None
  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?
 ... !
  52. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart -
  53. None
  54. History of React Ecosystem 2013 2018

  55. History of React Ecosystem 2013 2018 2014

  56. History of React Ecosystem 2013 2018 2014 2015

  57. History of React Ecosystem 2013 2018 2014 2015

  58. History of React Ecosystem 2013 2018 2014 2015 2016

  59. History of React Ecosystem 2013 2018 2014 2015 2016 Concepts

  60. History of React Ecosystem 2013 2018 2014 2015 2016 Libraries

  61. History of React Ecosystem 2013 2018 2014 2015 2016

  62. None
  63. None
  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?
 ... !
  65. Medium easy
 to change Big Medium Small Medium Small Small

    Small Small Small hard to change simple complex * totally unscientific chart -
  66. ...imagine starting a new project .

  67. None
  68. None
  69. None
  70. None
  71. None
  72. Who is developer worst enemy?

  73. / The designer Who is developer worst enemy?

  74. / The designer 0 The QA Who is developer worst

    enemy?
  75. / The designer 0 The QA 1 The sys admin

    Who is developer worst enemy?
  76. / The designer 0 The QA 1 The sys admin

    2 The project owner Who is developer worst enemy?
  77. / The designer 0 The QA 1 The sys admin

    2 The project owner 3 Santa Who is developer worst enemy?
  78. / The designer 0 The QA 1 The sys admin

    2 The project owner 3 Santa 4 Code coupling Who is developer worst enemy?
  79. / The designer 0 The QA 1 The sys admin

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

  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>
  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> ); } }
  83. Reasons for change

  84. Component Dependency Dependency Dependency

  85. Component Dependency Dependency Dependency Component Component Dependency Dependency

  86. Component Component Component Dependency nent Comp Dependency Dependency Dependency Dependency

    Dependency Dependency Dep cy
  87. Control changes

  88. Component Dependency Dependency

  89. Component Dependency Dependency Component

  90. Component Dependency Dependency Component Component Component

  91. Time Moment FancyTime Page Page Page

  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> ); } }
  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> ); } }
  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> ); }
  95. Time Moment FancyTime Page Page Page

  96. Time Utils FancyTime Page Page Page Moment

  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); }
  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>
  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> ); } }
  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> ); } }
  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> ); }
  102. // paths.js export default { schedule() { return '/schedule'; },

    venue() { return '/venue'; } };
  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> ); }
  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> ); }
  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> ); }
  106. // components/Link/index.js import { Link } from 'found'; export default

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

  110. None
  111. None
  112. Thanks 5