Pro Yearly is on sale from $80 to $50! »

How to React Appropriately

02cd14759ba3327f68f737131947781f?s=47 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

02cd14759ba3327f68f737131947781f?s=128

Glen Mailer

October 22, 2014
Tweet

Transcript

  1. How to
 React
 Appropriately

  2. React

  3. •  JavaScript Library •  Facebook Engineering •  Open Sourced May

    2013 •  Internal use since 2011 •  The "V" in MVC
  4. Router   Controller   Model   View   Server-side Rendering

  5. Router   Controller   Model   View   DHTML Rendering

    jQuery  
  6. Router   Controller   Model   View   DHTML+Ajax Rendering

    jQuery  
  7. Router   Controller   Model   Template  &   Interac:on

      Angular.js Rendering Model   Template  &   Interac:on   $scope   $scope  
  8. Router   Controller   Model   View   Server-side Rendering

  9. Router  &   Interac:on   Controller   Model   React

      React Rendering
  10. React   React Rendering

  11. Separation of Concerns
 vs
 Separation of Languages

  12. HTML   JavaScript   CSS  

  13.   Component   HTML   JavaScript   CSS  

  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  
  15. The Component Tree

  16. App   Gallery   Slideshow   Menu   Menu  Item

      Photo  
  17. Claim:
 State changing over
 time is the root
 of all

    evil
  18. JSX

  19. JSX /** @jsx React.DOM */ var HelloMessage = React.createClass({ render:

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

    function() { return <div>Hello {this.props.name}</div>; } }); var HelloMessage = React.createClass({ render: function() { return React.DOM.div(null, "Hello ", this.props.name); } });
  21. Functional Purity

  22. f(x) = y

  23. component(props) = DOM

  24.     render()   Props  

  25.     render()   State   Props  

  26. getInitialState()
 setState()

  27. component(props, state) = DOM

  28. DOM Diffing

  29. <ul> <li>Lemon</li> <li>Pear</li> <li>Orange</li> </ul> <ul> <li>Pear</li> <li>Apple</li> </ul>

  30. <ul> <li>Lemon</li> <li>Pear</li> <li>Orange</li> </ul> <ul> <li>Pear</li> <li>Apple</li> </ul>

  31. <ul> <li>Lemon</li> <li>Pear</li> <li>Orange</li> </ul> <ul> <li>Pear</li> <li>Apple</li> </ul> ul.removeChild(ul.childNodes[0])

    ul.childNodes[1].innerText = 'Apple'
  32. Virtual DOM

  33. Component.render()
 ê
 [ReactElement]

  34. React.renderComponent(
 Component
 )
 ê
 [ReactElement]
 ê
 [DOM & Component State]

  35. [ReactElement]
 +
 [DOM & Component State]
 ê
 [DOM & Component

    State]
  36. Isn't this slow?

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

  39. http://www.slideshare.net/floydophone/react-preso-v2 Game  State   &  Input   Game  Logic  

    Scene  IR   OpenGL   Opera:ons   Graphics   Cards  
  40. http://www.slideshare.net/floydophone/react-preso-v2 App  State   &  Events   React   Components

      Virtual   DOM   DOM  Diff   Opera:ons   Browsers  
  41. JS is Fast, DOM is slow
 Minimal DOM operations
 Batched

    DOM read/write
 Enables simple optimisations
  42. DOM Events

  43. Synthetic Events
 Custom Bubbling
 IE8+ Consistency

  44. <button onClick={this.handleIt}>
 Click Me
 </button>

  45. Flux
 
 React-flavoured client-side architecture

  46. React   React Rendering

  47. Ac:ons   Dispatcher   Stores   React   Flux Rendering

  48. Webpack
 
 Fancy little module bundler

  49. Create Browser Bundles
 CommonJS Modules
 Lazy load bundles
 Pluggable Preprocessors


    Can bundle CSS & images
  50. Demo & Code
 
 https://github.com/glenjamin/react-calendar
 
 Each step of the

    demo is tagged step1, step2 etc
  51. Devtools Demo
 
 http://facebook.github.io/react/blog/2014/01/02/ react-chrome-developer-tools.html

  52. Why use React?

  53. Battle-tested in production on
 facebook.com and
 instagram.com

  54. Evolved & extracted
 from real code,
 not designed in
 a

    vacuum
  55. Active and
 growing community

  56. Extremely simple
 to get started
 
 stays out of
 your

    way
  57. Can be used ad-hoc
 in an existing application

  58. Can be used to
 render on the
 server with Node.js

  59. In dev mode you gets loads of handy hints

  60. Downsides?

  61. You have to bring your own models / controllers

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

    boilerplate
  63. Flux is still in flux, many implementations exist

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

  65. Give it 5 minutes

  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
  67. Questions?
 
 @glenathan