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
   

   View Slide

2. Michele Bertoli
   Front End Dev at Bizzby (London, UK)
   Member of WEBdeBS
   Follow me @MicheleBertoli
   WHO AM I
   

   View Slide

3. Skeleton Cardboard
   

   View Slide

4. WEB DEVELOPMENT TODAY
   ● Super exciting
   ● Many tools / ideas
   ● Browsers work
   ● Back to JavaScript
   

   View Slide

5. DEVELOPERS TODAY
   ● Innovation breaks rules
   ● We are lazy
   ● We have prejudices
   ● Better keep on doing bad things
   

   View Slide

6. REACT.JS
   

   View Slide

7. Facebook: Rethink established best practices™
   - Ben Alman @cowboy
   

   View Slide

8. WAT
   render() {
   return (
   
   Click me!
   
   );
   }
   

   View Slide

9. WAT
   render() {
   return (
   
   Click me!
   
   );
   }
   

   View Slide

10. JSX
    “I love React because of JSX”, said no one
    ever (before trying it)
    

    View Slide

11. SEPARATION OF CONCERNS
    

    View Slide

12. SEPARATION OF CONCERNS
    React breaks the separation of concerns!!1!
    

    View Slide

13. SEPARATION OF CONCERNS
    [...] components make [...] separation of
    concerns easy.
    Why React?
    

    View Slide

14. SEPARATION OF CONCERNS
    app/partials/button.html
    app/css/button.css
    app/js/directives/button.js
    

    View Slide

15. SEPARATION OF CONCERNS
    
    Click me!
    
    

    View Slide

16. SEPARATION OF CONCERNS
    .button {
    color: blue;
    }
    

    View Slide

17. SEPARATION OF CONCERNS
    $scope.handleClick = function() { … };
    

    View Slide

18. SEPARATION OF CONCERNS
    app/partials/button.html
    app/css/button.css
    app/js/directives/button.js
    

    View Slide

19. SEPARATION OF CONCERNS
    app/partials/button.html
    app/css/button.css
    app/js/directives/button.js
    

    View Slide

20. SEPARATION OF TECHNOLOGIES
    app/partials/button.html
    app/css/button.css
    app/js/directives/button.js
    

    View Slide

21. BRAND NEW LANGUAGE
    
    {{n}}
    
    

    View Slide

22. CSS IN JAVASCRIPT
    

    View Slide

23. CSS ARE BAD
    ● Globals
    ● Dead code
    ● Regressions
    ● Static language
    

    View Slide

24. INLINE STYLE
    There's React Style Webpack plugin which
    extends Webpack with the ability to extract
    styles from your application at build time.
    

    View Slide

25. COMPONENTS
    

    View Slide

26. <3 COMPONENTS
    ● Everything in one place
    ● Small components
    ● Reduce coupling
    ● Separation of concerns
    

    View Slide

27. <3 REACT COMPONENTS
    ● Render to string
    ● Unit test (Jest)
    ● Virtual DOM
    ● The power of JavaScript
    

    View Slide

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
    

    View Slide

29. COMFORT ZONE
    

    View Slide

30. COMFORT ZONE
    Your
    comfort
    zone
    Where the
    magic
    happens
    

    View Slide

31. TWEET THIS
    Don’t let what you learnt, prevent you to take a
    step forward.
    

    View Slide

32. ANY QUESTIONS?
    

    View Slide