Slide 1

Slide 1 text

R E A C T. J S by Stefano Ceschi Berrini @stecb Rethinking UI Development May 20th, 2015

Slide 2

Slide 2 text

I’m a Software Engineer @ Timerepublik. I’m not a React expert. I’m still learning it, I’m hacking/experimenting with it and I’m really LOVING IT. So, let’s share this learning process. http://stecb.ninja

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

It’s a JavaScript library for the the UI built by V M C it automa(g|t)ically keeps the interface up-to-date when data changes + As of May, 20th 2015

Slide 5

Slide 5 text

Instagram

Slide 6

Slide 6 text

Facebook

Slide 7

Slide 7 text

• AirBnB • Atlassian • BBC • Imgur • Khan Academy • Pivotal Tracker • Reddit • Whatsapp • Wired • Yahoo • …

Slide 8

Slide 8 text

Keys • Components (+ JSX) • Virtual DOM • One-way data binding

Slide 9

Slide 9 text

key #1: Components Everything in React is a modular/reusable component: • react HTML elements • Custom react components • Collections/composition of the above Think about a component as a state-machine. Don’t think about the DOM.

Slide 10

Slide 10 text

key #1: Components A component is a React class. It can take input data, it can have a state and you can: • define methods • render a tree of functions When you add a component to your UI, you’re just invoking a function. mandatory

Slide 11

Slide 11 text

key #1: Components

Slide 12

Slide 12 text

key #1: Components JSX JS optional var HelloWorld = React.createClass({ render: function() { return
Hello world, {this.props.name}!
; } }); React.render(, document.getElementById('main')); var HelloWorld = React.createClass({ render: function() { return React.createElement("div", null, "Hello world, ", this.props.name, "!"); } }); React.render(React.createElement(HelloWorld, {name: "Bruce"}), document.getElementById('main')); ?harmony for ES6

Slide 13

Slide 13 text

key #1: Components JSX JS syntactic sugar: a concise and familiar syntax for defining tree structures with attributes. XML like elements => function + args

Slide 14

Slide 14 text

key #1: Components properties Props are the options/configuration of a component, they are data passed from parents to children and they are immmutable. If you think a property of a component could changed over time, then that should be part of its state.

Slide 15

Slide 15 text

key #1: Components properties var Box = React.createClass({ render: function() { var list = this.props.list.map(function(item) { return
  • {item}
  • }); return (

    {this.props.title}

      {list}
    ); } }); React.render(, document.body);

    Slide 16

    Slide 16 text

    key #1: Components state State is mutable and should contain data that a component's event handlers may change to trigger a UI update (i.e. User interactions, Server responses etc) State is optional and you should avoid it as much as possible, to reduce complexity! setState(data, callback)

    Slide 17

    Slide 17 text

    key #1: Components state var Box = React.createClass({ getInitialState: function() { return { hasDetailsVisible: false }; }, handleToggle: function() { this.setState({ hasDetailsVisible: !this.state.hasDetailsVisible }); }, render: function() { var list = this.props.list.map(function(item) { return
  • {item}
  • }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return (

    {this.props.title}

    toggle details
      {list}
    ); } }); React.render(, document.body);

    Slide 18

    Slide 18 text

    key #1: Components events Just three words Forget about jQuery

    Slide 19

    Slide 19 text

    key #1: Components events http://facebook.github.io/react/docs/events.html Synthetic events. They work identically on every browser Clipboard, Keyboard, Focus, Form, Mouse, Touch, UI, Wheel

    Slide 20

    Slide 20 text

    key #1: Components events var Box = React.createClass({ getInitialState: function() { return { hasDetailsVisible: false }; }, handleToggle: function(event) { this.setState({ hasDetailsVisible: !this.state.hasDetailsVisible }); }, render: function() { var list = this.props.list.map(function(item) { return
  • {item}
  • }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return (

    {this.props.title}

    toggle details
      {list}
    ); } }); React.render(, document.body);

    Slide 21

    Slide 21 text

    key #1: Components DOM elements var Input = React.createClass({ handleChange: function(event) { console.log(event.target.value); }, componentDidMount: function() { React.findDOMNode(this.refs.myInput).focus(); }, render: function() { return ( ); } }); http://facebook.github.io/react/docs/component-specs.html

    Slide 22

    Slide 22 text

    React internally uses a virtual representation of the DOM It mutates the real DOM by using a tree diff algorithm + heuristic O(n^3) => O(n) You can think about re-rendering your entire application on every update without worrying about performance! key #2: Virtual DOM

    Slide 23

    Slide 23 text

    https://www.flickr.com/photos/usnavy/5815022252 Why is it so fast? JS execution is FAST, real DOM mutations are SLOW So, being able to re-render the entire application by mutating JUST what changed on the UI is the most important thing key #2: Virtual DOM

    Slide 24

    Slide 24 text

    State N State N+1 Changed attributes, just update them on the real DOM The NodeType has changed, throw away that node (+subtree) and replace it with a new node! key #2: Virtual DOM

    Slide 25

    Slide 25 text

    key #3: One-way Data Binding Data (props) flows only in one way. From the Owner to child.

    Slide 26

    Slide 26 text

    Example

    Slide 27

    Slide 27 text

    Not just the UI… Architecture: Flux React on the server: React.renderToString(component) React Native

    Slide 28

    Slide 28 text

    Useful resources Official React website https://github.com/enaqx/awesome-react React VS ember/angular/backbone React.js Conf 2015 videos Starter kit for Isomorphic webapps with React and Flux

    Slide 29

    Slide 29 text

    Thanks Q&A