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.

414db81dca21f468b4d7acd88172370c?s=128

Michele Bertoli

May 13, 2015
Tweet

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?