NotAKeynote

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

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

Transcript

1. !"?? Radoslav Stankov 28/04/2018
2. Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov
5. !"??
6. !
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" + "(" === "+"
18. ...but I'm not going to talk about emojis today "
19. <NotAnEmojiTalk />
21. "
22. !"?? ??
23. ??
31. , JavaScript Fatigue
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?
 ... !
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?
 ... !
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 -
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
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 .
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> ); }
109. "
112. Thanks 5