Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UNLEARN EVERYTHING

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.

Michele Bertoli

May 13, 2015
Tweet

More Decks by Michele Bertoli

Other Decks in Programming

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