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 full-size slide

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

    View full-size slide

  3. Skeleton Cardboard

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. WAT
    render() {
    return (

    Click me!

    );
    }

    View full-size slide

  8. WAT
    render() {
    return (

    Click me!

    );
    }

    View full-size slide

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

    View full-size slide

  10. SEPARATION OF CONCERNS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. SEPARATION OF CONCERNS

    Click me!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. BRAND NEW LANGUAGE

    {{n}}

    View full-size slide

  21. CSS IN JAVASCRIPT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. COMFORT ZONE

    View full-size slide

  28. COMFORT ZONE
    Your
    comfort
    zone
    Where the
    magic
    happens

    View full-size slide

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

    View full-size slide

  30. ANY QUESTIONS?

    View full-size slide