Michele Bertoli
Front End Dev at Bizzby (London, UK)
Member of WEBdeBS
Follow me @MicheleBertoli
WHO AM I
Slide 3
Slide 3 text
Skeleton Cardboard
Slide 4
Slide 4 text
WEB DEVELOPMENT TODAY
● Super exciting
● Many tools / ideas
● Browsers work
● Back to JavaScript
Slide 5
Slide 5 text
DEVELOPERS TODAY
● Innovation breaks rules
● We are lazy
● We have prejudices
● Better keep on doing bad things
Slide 6
Slide 6 text
REACT.JS
Slide 7
Slide 7 text
Facebook: Rethink established best practices™
- Ben Alman @cowboy
Slide 8
Slide 8 text
WAT
render() {
return (
Click me!
);
}
Slide 9
Slide 9 text
WAT
render() {
return (
Click me!
);
}
Slide 10
Slide 10 text
JSX
“I love React because of JSX”, said no one
ever (before trying it)
Slide 11
Slide 11 text
SEPARATION OF CONCERNS
Slide 12
Slide 12 text
SEPARATION OF CONCERNS
React breaks the separation of concerns!!1!
Slide 13
Slide 13 text
SEPARATION OF CONCERNS
[...] components make [...] separation of
concerns easy.
Why React?
Slide 14
Slide 14 text
SEPARATION OF CONCERNS
app/partials/button.html
app/css/button.css
app/js/directives/button.js
Slide 15
Slide 15 text
SEPARATION OF CONCERNS
Click me!
Slide 16
Slide 16 text
SEPARATION OF CONCERNS
.button {
color: blue;
}
Slide 17
Slide 17 text
SEPARATION OF CONCERNS
$scope.handleClick = function() { … };
Slide 18
Slide 18 text
SEPARATION OF CONCERNS
app/partials/button.html
app/css/button.css
app/js/directives/button.js
Slide 19
Slide 19 text
SEPARATION OF CONCERNS
app/partials/button.html
app/css/button.css
app/js/directives/button.js
Slide 20
Slide 20 text
SEPARATION OF TECHNOLOGIES
app/partials/button.html
app/css/button.css
app/js/directives/button.js
Slide 21
Slide 21 text
BRAND NEW LANGUAGE
{{n}}
Slide 22
Slide 22 text
CSS IN JAVASCRIPT
Slide 23
Slide 23 text
CSS ARE BAD
● Globals
● Dead code
● Regressions
● Static language
Slide 24
Slide 24 text
INLINE STYLE
There's React Style Webpack plugin which
extends Webpack with the ability to extract
styles from your application at build time.
Slide 25
Slide 25 text
COMPONENTS
Slide 26
Slide 26 text
<3 COMPONENTS
● Everything in one place
● Small components
● Reduce coupling
● Separation of concerns
Slide 27
Slide 27 text
<3 REACT COMPONENTS
● Render to string
● Unit test (Jest)
● Virtual DOM
● The power of JavaScript
Slide 28
Slide 28 text
So, we're putting logic, markup, styles and data
fetching inside of a React component. Running
out of ideas, what else should we put there?
- Christophe Chedeau @vjeux
Slide 29
Slide 29 text
COMFORT ZONE
Slide 30
Slide 30 text
COMFORT ZONE
Your
comfort
zone
Where the
magic
happens
Slide 31
Slide 31 text
TWEET THIS
Don’t let what you learnt, prevent you to take a
step forward.