Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reactjs: Rethinking UI Devel

800 views

Published on

Here I illustrate the basics of React.js, a JavaScript library built by Facebook. I will show how it works and I will explain the main key concepts of React (Components, virtual DOM, one-way data binding)

Published in: Software
  • Be the first to comment

Reactjs: Rethinking UI Devel

  1. 1. R E A C T. J S by Stefano Ceschi Berrini @stecb Rethinking UI Development Programmers in Padua - March 18th, 2015
  2. 2. 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
  3. 3. It’s a JavaScript library for the the UI built by VM C it automa(g|t)ically keeps the interface up-to-date when data changes + As of March, 18th 2015
  4. 4. Instagram
  5. 5. Facebook
  6. 6. • AirBnB • Atlassian • BBC • Imgur • Khan Academy • Pivotal Tracker • Reddit • Whatsapp • Wired • Yahoo • …
  7. 7. Keys • Components (+ JSX) • Virtual DOM • One-way data binding
  8. 8. 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.
  9. 9. 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
  10. 10. key #1: Components
  11. 11. key #1: Components JSX JS optional var HelloWorld = React.createClass({ render: function() { return <div>Hello world, {this.props.name}!</div>; } }); React.render(<HelloWorld name="Bruce" />, 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
  12. 12. key #1: Components JSX JS syntactic sugar: a concise and familiar syntax for defining tree structures with attributes. XML like elements => function + args
  13. 13. 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.
  14. 14. key #1: Components properties var Box = React.createClass({ render: function() { var list = this.props.list.map(function(item) { return <li>{item}</li> }); return ( <div> <h1>{this.props.title}</h1> <ul> {list} </ul> </div> ); } }); React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);
  15. 15. 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)
  16. 16. 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 <li>{item}</li> }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return ( <div> <h1>{this.props.title}</h1> <button onClick={this.handleToggle}>toggle details</button> <ul style={detailsStyle}> {list} </ul> </div> ); } }); React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);
  17. 17. key #1: Components events Just three words Forget about jQuery
  18. 18. 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
  19. 19. 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 <li>{item}</li> }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return ( <div> <h1>{this.props.title}</h1> <button onClick={this.handleToggle}>toggle details</button> <ul style={detailsStyle}> {list} </ul> </div> ); } }); React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);
  20. 20. 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 ( <input type="text" ref="myInput" onChange={this.handleChange} /> ); } }); http://facebook.github.io/react/docs/component-specs.html
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. key #3: One-way Data Binding <ComponentA /> <ComponentB /> <ComponentD /> <ComponentC /> Data (props) flows only in one way. From the Owner to child.
  25. 25. Example
  26. 26. Not just the UI… Architecture: Flux React on the server: React.renderToString(component) drumroll… React Native
  27. 27. 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
  28. 28. Thanks Q&A

×