Tweet
Tweet

Slide 1

Slide 1 text

How to
 React
 Appropriately

Slide 2

Slide 2 text

React

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Router   Controller   Model   View   Server-side Rendering

Slide 5

Slide 5 text

Router   Controller   Model   View   DHTML Rendering jQuery  

Slide 6

Slide 6 text

Router   Controller   Model   View   DHTML+Ajax Rendering jQuery  

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Router   Controller   Model   View   Server-side Rendering

Slide 9

Slide 9 text

Router  &   Interac:on   Controller   Model   React   React Rendering

Slide 10

Slide 10 text

React   React Rendering

Slide 11

Slide 11 text

Separation of Concerns
 vs
 Separation of Languages

Slide 12

Slide 12 text

HTML   JavaScript   CSS  

Slide 13

Slide 13 text

  Component   HTML   JavaScript   CSS  

Slide 14

Slide 14 text

  Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS  

Slide 15

Slide 15 text

The Component Tree

Slide 16

Slide 16 text

App   Gallery   Slideshow   Menu   Menu  Item   Photo  

Slide 17

Slide 17 text

Claim:
 State changing over
 time is the root
 of all evil

Slide 18

Slide 18 text

JSX

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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); } });

Slide 21

Slide 21 text

Functional Purity

Slide 22

Slide 22 text

f(x) = y

Slide 23

Slide 23 text

component(props) = DOM

Slide 24

Slide 24 text

    render()   Props  

Slide 25

Slide 25 text

    render()   State   Props  

Slide 26

Slide 26 text

getInitialState()
 setState()

Slide 27

Slide 27 text

component(props, state) = DOM

Slide 28

Slide 28 text

DOM Diffing

Slide 29

Slide 29 text

  • Lemon
  • Pear
  • Orange
  • Pear
  • Apple

Slide 30

Slide 30 text

  • Lemon
  • Pear
  • Orange
  • Pear
  • Apple

Slide 31

Slide 31 text

  • Lemon
  • Pear
  • Orange
  • Pear
  • Apple
ul.removeChild(ul.childNodes[0]) ul.childNodes[1].innerText = 'Apple'

Slide 32

Slide 32 text

Virtual DOM

Slide 33

Slide 33 text

Component.render()
 ê
 [ReactElement]

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Isn't this slow?

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

JS is Fast, DOM is slow
 Minimal DOM operations
 Batched DOM read/write
 Enables simple optimisations

Slide 42

Slide 42 text

DOM Events

Slide 43

Slide 43 text

Synthetic Events
 Custom Bubbling
 IE8+ Consistency

Slide 44

Slide 44 text


 Click Me


Slide 45

Slide 45 text

Flux
 
 React-flavoured client-side architecture

Slide 46

Slide 46 text

React   React Rendering

Slide 47

Slide 47 text

Ac:ons   Dispatcher   Stores   React   Flux Rendering

Slide 48

Slide 48 text

Webpack
 
 Fancy little module bundler

Slide 49

Slide 49 text

Create Browser Bundles
 CommonJS Modules
 Lazy load bundles
 Pluggable Preprocessors
 Can bundle CSS & images

Slide 50

Slide 50 text

Demo & Code
 
 https://github.com/glenjamin/react-calendar
 
 Each step of the demo is tagged step1, step2 etc

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Why use React?

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Evolved & extracted
 from real code,
 not designed in
 a vacuum

Slide 55

Slide 55 text

Active and
 growing community

Slide 56

Slide 56 text

Extremely simple
 to get started
 
 stays out of
 your way

Slide 57

Slide 57 text

Can be used ad-hoc
 in an existing application

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

In dev mode you gets loads of handy hints

Slide 60

Slide 60 text

Downsides?

Slide 61

Slide 61 text

You have to bring your own models / controllers

Slide 62

Slide 62 text

Having to be explicit about data flow can lead to boilerplate

Slide 63

Slide 63 text

Flux is still in flux, many implementations exist

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Give it 5 minutes

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Questions?
 
 @glenathan