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

How to React Appropriately

Glen Mailer
October 22, 2014

How to React Appropriately

An introduction to React's concepts, with associated code demo of building https://github.com/glenjamin/react-calendar

Glen Mailer

October 22, 2014
Tweet

More Decks by Glen Mailer

Other Decks in Technology

Transcript

  1. How to

    React

    Appropriately

    View Slide

  2. React

    View Slide

  3. •  JavaScript Library
    •  Facebook Engineering
    •  Open Sourced May 2013
    •  Internal use since 2011
    •  The "V" in MVC

    View Slide

  4. Router  
    Controller  
    Model  
    View  
    Server-side Rendering

    View Slide

  5. Router  
    Controller  
    Model  
    View  
    DHTML Rendering
    jQuery  

    View Slide

  6. Router  
    Controller  
    Model  
    View  
    DHTML+Ajax Rendering
    jQuery  

    View Slide

  7. Router  
    Controller  
    Model  
    Template  &  
    Interac:on  
    Angular.js Rendering
    Model  
    Template  &  
    Interac:on  
    $scope  
    $scope  

    View Slide

  8. Router  
    Controller  
    Model  
    View  
    Server-side Rendering

    View Slide

  9. Router  &  
    Interac:on  
    Controller  
    Model  
    React  
    React Rendering

    View Slide

  10. React  
    React Rendering

    View Slide

  11. Separation of Concerns

    vs

    Separation of Languages

    View Slide

  12. HTML   JavaScript   CSS  

    View Slide

  13.  
    Component  
    HTML   JavaScript   CSS  

    View Slide

  14.  
    Component  
    HTML   JavaScript   CSS  
     
    Component  
    HTML   JavaScript   CSS  
     
    Component  
    HTML   JavaScript   CSS  
     
    Component  
    HTML   JavaScript   CSS  
     
    Component  
    HTML   JavaScript   CSS  
     
    Component  
    HTML   JavaScript   CSS  

    View Slide

  15. The Component Tree

    View Slide

  16. App  
    Gallery  
    Slideshow  
    Menu  
    Menu  Item  
    Photo  

    View Slide

  17. Claim:

    State changing over

    time is the root

    of all evil

    View Slide

  18. JSX

    View Slide

  19. JSX
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return Hello {this.props.name};
    }
    });

    View Slide

  20. JSX
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return Hello {this.props.name};
    }
    });
    var HelloMessage = React.createClass({
    render: function() {
    return React.DOM.div(null, "Hello ", this.props.name);
    }
    });

    View Slide

  21. Functional
    Purity

    View Slide

  22. f(x) = y

    View Slide

  23. component(props) = DOM

    View Slide

  24.  
     
    render()  
    Props  

    View Slide

  25.  
     
    render()  
    State  
    Props  

    View Slide

  26. getInitialState()

    setState()

    View Slide

  27. component(props, state)
    = DOM

    View Slide

  28. DOM Diffing

    View Slide


  29. Lemon
    Pear
    Orange


    Pear
    Apple

    View Slide


  30. Lemon
    Pear
    Orange


    Pear
    Apple

    View Slide


  31. Lemon
    Pear
    Orange


    Pear
    Apple

    ul.removeChild(ul.childNodes[0])
    ul.childNodes[1].innerText = 'Apple'

    View Slide

  32. Virtual DOM

    View Slide

  33. Component.render()

    ê

    [ReactElement]

    View Slide

  34. React.renderComponent(

    Component

    )

    ê

    [ReactElement]

    ê

    [DOM & Component State]

    View Slide

  35. [ReactElement]

    +

    [DOM & Component State]

    ê

    [DOM & Component State]

    View Slide

  36. Isn't this slow?

    View Slide

  37. View Slide

  38. http://fabiensanglard.net/doom3/renderer.php
    id's Game Engines

    View Slide

  39. http://www.slideshare.net/floydophone/react-preso-v2
    Game  State  
    &  Input  
    Game  Logic   Scene  IR  
    OpenGL  
    Opera:ons  
    Graphics  
    Cards  

    View Slide

  40. http://www.slideshare.net/floydophone/react-preso-v2
    App  State  
    &  Events  
    React  
    Components  
    Virtual  
    DOM  
    DOM  Diff  
    Opera:ons  
    Browsers  

    View Slide

  41. JS is Fast, DOM is slow

    Minimal DOM operations

    Batched DOM read/write

    Enables simple optimisations

    View Slide

  42. DOM Events

    View Slide

  43. Synthetic Events

    Custom Bubbling

    IE8+ Consistency

    View Slide


  44. Click Me


    View Slide

  45. Flux


    React-flavoured client-side architecture

    View Slide

  46. React  
    React Rendering

    View Slide

  47. Ac:ons  
    Dispatcher  
    Stores  
    React  
    Flux Rendering

    View Slide

  48. Webpack


    Fancy little module bundler

    View Slide

  49. Create Browser Bundles

    CommonJS Modules

    Lazy load bundles

    Pluggable Preprocessors

    Can bundle CSS & images

    View Slide

  50. Demo & Code


    https://github.com/glenjamin/react-calendar


    Each step of the demo is tagged step1, step2 etc

    View Slide

  51. Devtools Demo


    http://facebook.github.io/react/blog/2014/01/02/
    react-chrome-developer-tools.html

    View Slide

  52. Why use React?

    View Slide

  53. Battle-tested in
    production on

    facebook.com and

    instagram.com

    View Slide

  54. Evolved & extracted

    from real code,

    not designed in

    a vacuum

    View Slide

  55. Active and

    growing community

    View Slide

  56. Extremely simple

    to get started


    stays out of

    your way

    View Slide

  57. Can be used ad-hoc

    in an existing
    application

    View Slide

  58. Can be used to

    render on the

    server with Node.js

    View Slide

  59. In dev mode you gets
    loads of handy hints

    View Slide

  60. Downsides?

    View Slide

  61. You have to bring your
    own models / controllers

    View Slide

  62. Having to be explicit
    about data flow can lead
    to boilerplate

    View Slide

  63. Flux is still in flux,
    many implementations
    exist

    View Slide

  64. It's very different,
    which can be off-putting

    View Slide

  65. Give it 5
    minutes

    View Slide

  66. Further Reading
    •  Facebook's React docs
    http://facebook.github.io/react/docs/why-
    react.html
    •  The original React announcement talk
    http://www.youtube.com/watch?v=x7cQ3mrcKaY
    •  Flux introduction with more about React's thinking
    http://www.youtube.com/watch?v=nYkdrAPrdcw
    •  The React github repo
    https://github.com/facebook/react

    View Slide

  67. Questions?


    @glenathan

    View Slide