How to React Appropriately

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

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?
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