UNLEARN EVERYTHING

React has changed the way we write web applications.
To begin with, React is not easy because it requires an open mind.
In this session I will talk about the "best practices" put in discussion by React giving, for each one, the answers I gave myself to accept the change and some ideas to work out of the comfort zone.

Transcript

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