Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NYC React meetup - Jun 2015

NYC React meetup - Jun 2015

Abstract:

Tom from the ADP Innovation Lab spoke about tools, techniques and tips for managing state and UI performance when using React to build rich data-intensive UIs for web based applications at global scale.

Speaker:

Tom is a Principal Architect in the ADP Innovation Lab in NYC, where he and his teams are responsible for architecting and implementing the firm's next generation cloud based HCM platform to serve their clients globally. Tom has over 12 years experience as a technologist across a variety of industries and from startups to Fortune 500 companies including Barclays, Getty Images and others.

The ADP Innovation Lab is a startup-style R&D operation to accelerate new innovation across UI, Search, Big Data, Social and other fields, delivering highly automated, intelligent and predictive solutions to clients. With more than $11 billion in revenues, ADP serves over 600,000 clients in more than 130 countries and is one of the world's largest providers of business outsourcing and Human Capital Management solutions.

Links:

https://twitter.com/tomrogers5
https://linkedin.com/in/tomrogers3
http://www.meetup.com/NYC-Javascript-React-Group/events/221468194/

Tom Rogers

June 25, 2015
Tweet

Other Decks in Programming

Transcript

  1. Overview • About the Lab! • Why we use React!

    • State management! • Baobab
  2. 490 thousand cloud clients 5 million logins a day 19.5

    thousand logins a sec 35 million active users SaaS
  3. Connecting data to UI (and back again) • Where should

    data live • Which component mutates (owns) state • Decentralized or centralized (e.g. Om, Morearty, Baobab and others) • Some data flow approaches • Flux / CQRS / DDD (and which implementation?) • Relay References http://facebook.github.io/react/docs/thinking-in-react.html https://github.com/enaqx/awesome-react#flux-implementations https://github.com/enaqx/awesome-react#relay https://github.com/uberVU/react-guide/blob/master/props-vs-state.md http://jaysoo.ca/2015/02/06/what-the-flux/
  4. Flux overview • Different types of changes • Initial data

    load • User interaction • Navigation and routing • Interaction & sync with server • Dependencies across stores and UI components (minimize & avoid reentrancy) • Functional Reactive Programming (FRP) (more advanced) References https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
  5. Baobab • Persistent and optionally immutable data tree with cursors

    • Centralized model for application state • Feature highlights • Cursors, efficient mutations, events, flexible selection and traversal, facets, undo/redo and more • Can be paired with React easily (baobab-react)
  6. Create a tree and a cursor var Baobab = require('baobab');

    var stateTree = new Baobab({ admin: { users: [] }, home: { news: [] } }); ! var adminCursor = stateTree.select('admin'); var admin = adminCursor.get(); // { users: [] }
  7. Listen to updates (on nested data) var notificationsCursor = adminCursor.select('notifications');

    var feedsCursor = stateTree.select('home', 'feeds'); ! adminCursor.on('update', function () { console.log('I saw a change'); // I will trigger }); ! notificationsCursor.on('update', function () { console.log('I saw a change'); // I will trigger }); ! feedsCursor.on('update', function () { console.log('I saw a change'); // Won’t trigger, on a different branch }); ! notificationsCursor.push('foo');
  8. Connect cursor(s) to a component var stateTree = require('./stateTree.js'); var

    React = require('react'); ! var listCursor = stateTree.select('admin', 'notifications', 'list'); var MyComponent = React.createClass({ mixins: [listCursor.mixin], renderNotification: function (notification) { return ( <li>{notification.title}</li> ); }, render: function () { return ( <ul> {this.state.cursor.map(this.renderNotification)} </ul> ); } });
  9. State changes var Baobab = require('baobab'); var stateTree = new

    Baobab({ query: '', onlyProductsInStock: false, products: [] }); ! module.exports = stateTree; var stateTree = require('./stateTree'); var ajax = require('ajax'); module.exports = { showOnlyProductsInStock: function () { stateTree.set('onlyProductsInStock', true); }, showAllProducts: function () { stateTree.set('onlyProductsInStock', false); }, searchProducts: function (query) { stateTree.set('query', query); ajax.get('/products', query) .done(function (products) { stateTree.set('products', products); }); } }; stateTree.js main.js
  10. Optimizing rendering var Baobab = require('baobab'); var ReactAddons = require('react/addons');

    ! var stateTree = new Baobab({ notifications: [] }, { mixins: [ReactAddons.PureRenderMixin], shiftReferences: true }); ! module.exports = stateTree;
  11. Undo / redo var baobab = new Baobab({colors: ['blue']}, {asynchronous:

    false}), cursor = baobab.select('colors'); ! // Starting to record state, with 10 records maximum cursor.startRecording(10); ! cursor.push('yellow'); cursor.push('purple'); cursor.push('orange'); ! cursor.get(); >>> ['blue', 'yellow', 'purple', 'orange'] ! cursor.undo(); cursor.get(); >>> ['blue', 'yellow', 'purple'] ! cursor.undo(2); cursor.get(); >>> ['blue']
  12. React integration Root Branch import React, {Component} from 'react'; import

    Baobab from 'baobab'; import {root} from 'baobab-react/higher-order'; ! var tree = new Baobab({ name: 'John', surname: 'Talbot' }); ! class Application extends Component { render() { return ( <div> <OtherComponent /> </div> ); } } ! var ComposedComponent = root(Application, tree); ! React.render(<ComposedComponent />, mountNode); import React, {Component} from 'react'; import {branch} from 'baobab-react/higher-order'; ! class MyComponent extends Component { render() { ! // Cursor data is passed through props return ( <span> Hello {this.props.name} {this.props.surname} </span> ); } } ! export default branch(MyComponent, { cursors: { name: ['name'], surname: ['surname'] } });
  13. Resources • https://github.com/tomrogers3/react-webgl-globe-viz • https://www.youtube.com/watch?v=x7cQ3mrcKaY (highly recommended) • http://facebook.github.io/react/docs/thinking-in-react.html •

    https://github.com/enaqx/awesome-react • https://github.com/Yomguithereal/baobab • http://christianalfoni.github.io/javascript/2015/02/06/plant-a-baobab-tree-in-your-flux-application.html • https://github.com/uberVU/react-guide/blob/master/props-vs-state.md • http://jaysoo.ca/2015/02/06/what-the-flux/ • https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 • https://github.com/wiktor256/react-state-router