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.

React.js: Beyond the Browser

1,198 views

Published on

With the advent of libraries like React Canvas and React Native, it is obvious that rendering views in React is not limited to the DOM.

Published in: Technology
  • Be the first to comment

React.js: Beyond the Browser

  1. 1. REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYOND THE BROWSER REACT.JS: BEYON THE BROWSER REACT.JS: BEYONREACT.JS: BEYONREACT.JS: BEYONREACT.JS: BEYONREACT.JS: BEYONREACT.JS: BEYONREACT.JS: BEYONREACT.JS: BEYOREACT.JS: BEYOREACT.JS: BEYOREACT.JS: BEYOREACT.JS: BEYOREACT.JS: BEYO REACT.JS: BEYOND THE BROWSER @gabescholz
  2. 2. “just remember I am going after you” - Godfrey Chan, wannabe Thought Leader
  3. 3. “the whole reason I am doing the talk is to go after you”
  4. 4. JAVASCRIPT
  5. 5. “… the latest and greatest JavaScript framework comes around every sixteen minutes.” - Allen Pike, King of VanJS http://www.allenpike.com/2015/javascript-framework-fatigue/
  6. 6. “Helping you select an MV* framework” ! (with 64 different choices!!) http://todomvc.com/
  7. 7. CHOICE PARALYSIS /noun/ ! ! the state of being unable to select a proper JavaScript framework ! “I literally can’t feel my legs due to this choice paralysis.” http://www.sitepoint.com/drowning-in-tools-web-development-industry/
  8. 8. “… people come from a wide variety of backgrounds, and have a wide variety of goals. This constant inflow of new ideas and interests has made the JavaScript community unusually diverse.” http://www.allenpike.com/2015/javascript-framework-fatigue/
  9. 9. FOAM“FOAM is a full-stack, reactive, deeply MVC metaprogramming Javascript framework.” <meta name=“description” … />
  10. 10. @gabescholz
  11. 11. e
  12. 12. 2. “Learn once, Write anywhere” 1. Why React?
  13. 13. 😍 Everything is JavaScript
  14. 14. <!-- template.html --> ! <weather-widget forecast=“forecast”> <weather-link href=“http://weather.ca”> sherr, bud </weather-link> </weather-widget>
  15. 15. // component.js ! <WeatherWidget forecast={forecast}> <WeatherLink href=“http://weather.ca”> sherr, bud </WeatherLink> </WeatherWidget>
  16. 16. // component.js ! React.createElement(WeatherWidget, { forecast: forecast }, React.createElement(WeatherLink, { href: “http://weather.ca” }, “sherr, bud” ) ) Dat JSX, tho
  17. 17. // component.js ! React.createElement(“div”, {}, React.createElement(“a”, { href: “http://weather.ca” }, “sherr, bud” ) ) Dat JSX, tho FEELS GOOD MAN
  18. 18. var WeatherApp = React.createClass({ getInitialState () { return { forecast: ‘sunny’ }; }, 
 render () { var forecast = this.state.forecast; ! return ( <WeatherWidget forecast={forecast}> <WeatherLink href=“http://weather.ca”> sherr, bud </WeatherLink> </WeatherWidget> ) } });
  19. 19. 😁 Virtual DOM + Diffing
  20. 20. renderA: <div /> renderB: <span /> [removeNode <div />], [insertNode <span />]
  21. 21. renderA: <PuttyPatrol /> renderB: <Goldar /> [removeNode <PuttyPatrol />], [insertNode <Goldar />]
  22. 22. renderA: <div id="ahHhhhHh" /> renderB: <div id=“after-10000-years-im-free” /> [replaceAttribute id "after-10000-years-im-free"]
  23. 23. 😁 One-way Reactive Rendering
  24. 24. STATE vs PROPS in TWO MINUTES
  25. 25. var Parent = React.createClass({ // ... render () { return ( <div> <Son name={this.state.sonsName} /> <Daughter name={this.state.daughtersName} /> </div> ); } }); ! var Daughter = React.createClass({ // ... render () { return ( <div> <div>{this.props.name}</div> <div>{this.state.favouriteColor}</div> <Dog name=`Mini ${this.props.name}` /> </div> ); } });
  26. 26. var Parent = React.createClass({ // … ! updateToLaquesha () { this.setState({ daughtersName: “Laquesha” }); }, ! render () { return ( <div> <button onClick={this.updateToLaquesha} /> <Son name={this.state.sonsName} /> <Daughter name={this.state.daughtersName} /> </div> ); } });
  27. 27. Going beyond the DOM
  28. 28. React Canvas Created by Flipboard 60 fps on mobile browsers Last commit ~1 week after React Native released publicly
  29. 29. <Surface> <Layer> <Text style={{ fontFace: ‘Calibri’, fontSize: ‘40pt’ }}>{this.state.text}</Text> </Layer> </Surface> ` var context = canvas.getContext(‘2d’); context.font = '40pt Calibri'; context.fillText(text, 0, 0);
  30. 30. React Native Created by Facebook All of your business logic is written and runs in JavaScript using JavaScriptCore on iOS UI Kit instead of DOM Nodes
  31. 31. <div> <img src=“http://i.imgur.com/OBB7tLg.gif” /> <input type=“text” /> <span>sherrr, bud</span> </div> <View> <Image source={{uri: “http://i.imgur.com/ OBB7tLg.gif”}} /> <TextInput /> <Text>sherrr, bud</Text> </View> React Native *style required but not included
  32. 32. ReactGibbon Created by Netflix Runs on their Gibbon platform Renders JSON instead of DOM
  33. 33. ` I SHOULD PUT REACT ON SOMETHINGI SHOULD PUT REACT ON SOMETHING
  34. 34. https://github.com/garbles/react-pebble-demo
  35. 35. var card = UI.Card({ title: “Fetching movies list”, subtitle: “Just a minute..”, body: “1 sec..” }); card.show(); // ... card.hide(); ! ! ! ! ! ! ! <Card title=“Fetching movies list” subtitle=“Just a minute..” body=“1 sec..” />
  36. 36. var list = UI.List(); list.sections([{}]); // for every item var items = list.items(0); list.items(0, items.concat(item)); ! list.show(); // ... list.hide(); ! ! ! ! ! <List onSelect={this.handleSelect}> <Item title=“..” ... />
 <Item title=“..” ... /> <Item title=“..” ... /> <Item title=“..” ... /> </List>
  37. 37. var App = React.createClass({ getInitialState () { }, selectItem (item) { }, ! componentDidMount () { ajax(apiUrl, (response) => { this.setState({ movies: response[1].movies }) }); }, ! render () { var movies = this.state.movies.map( movie => { return (<Item title={movie.title} data={movie} />); }); ! if (movies.length) { return <List onSelect={this.selectItem}>{movies}</List>; } else { return <Card ... />; } } });
  38. 38. var App = React.createClass({ getInitialState () { return { movies: [] } }, selectItem (item) { }, ! componentDidMount () { ajax(apiUrl, (response) => { this.setState({ movies: response[1].movies }) }); }, ! render () { var movies = this.state.movies.map( movie => { return (<Item title={movie.title} data={movie} />); }); ! if (movies.length) { return <List onSelect={this.selectItem}>{movies}</List>; } else { return <Card ... />; } } });
  39. 39. var App = React.createClass({ getInitialState () { }, selectItem (item) { }, ! componentDidMount () { ajax(apiUrl, (response) => { this.setState({ movies: response[1].movies }) }); }, ! render () { var movies = this.state.movies.map( movie => { return (<Item title={movie.title} data={movie} />); }); ! if (movies.length) { return <List onSelect={this.selectItem}>{movies}</List>; } else { return <Card ... />; } } });
  40. 40. var App = React.createClass({ getInitialState () { }, selectItem (item) { }, ! componentDidMount () { ajax(apiUrl, (response) => { this.setState({ movies: response[1].movies }) }); }, ! render () { var movies = this.state.movies.map( movie => { return (<Item title={movie.title} data={movie} />); }); ! if (movies.length) { return <List onSelect={this.selectItem}>{movies}</List>; } else { return <Card ... />; } } });
  41. 41. 😛 Becoming a React trickster
  42. 42. function createComponent(name) { ! var CustomComponent = function(props) { this.node = new PebbleNode(); this.subscriptions = null; this.listeners = null; this._mountImage = null; this._renderedChildren = null; }; ! CustomComponent.displayName = name; ! for (var i = 1, l = arguments.length; i < l; i++) { assign(CustomComponent.prototype, arguments[i]); } ! return CustomComponent; }
  43. 43. function createComponent(name) { ! var CustomComponent = function(props) { this.node = new PebbleNode(); this.subscriptions = null; this.listeners = null; this._mountImage = null; this._renderedChildren = null; }; ! CustomComponent.displayName = name; ! for (var i = 1, l = arguments.length; i < l; i++) { assign(CustomComponent.prototype, arguments[i]); } ! return CustomComponent; }
  44. 44. function createComponent(name) { ! var CustomComponent = function(props) { this.node = new PebbleNode(); this.subscriptions = null; this.listeners = null; this._mountImage = null; this._renderedChildren = null; }; ! CustomComponent.displayName = name; ! for (var i = 1, l = arguments.length; i < l; i++) { assign(CustomComponent.prototype, arguments[i]); } ! return CustomComponent; }
  45. 45. var Card = createComponent( ‘Card’, NodeMixin, ComponentMixin, ..., { /* additional behaviours */ } ); ! var PebbleApp = React.createClass({ render () { return ( <Card title=“Hello World!”/> ); } }); ! renderPebble(<PebbleApp />);
  46. 46. var NodeMixin = { putEventListener (...) { /* ... */ }, handleEvent (...) { /* ... */ }, destroyEventListeners (...) { /* ... */ }, applyNodeProps (...) { /* ... */ } }; ! var ContainerMixin = assign({}, ReactMultiChild.Mixin, { moveChild (...) { /* ... */ }, createChild (...) { /* ... */ }, replaceChild (...) { /* ... */ }, updateChildrenAtRoot (...) { /* ... */ }, mountAndInjectChildren (...) { /* ... */ } }); ! // per component { construct (...) { /* ... */ }, mountComponent (...) { /* ... */ }, unmountComponent (...) { /* ... */ }, receiveComponent (...) { /* ... */ } };
  47. 47. var Card = createComponent(‘Card’, NodeMixin, { construct (element) { this._currentElement = element; this.__instance = new UI.Card(); }, mountComponent (rootID, transaction, context) { var props = this._currentElement.props; this._rootNodeID = rootID; ! this.__instance.prop(props); this.__instance.show(); ! return this.node; }, unmountComponent () { this.__instance.hide(); }, receiveComponent (element) { this._currentElement = element; this.__instance.prop(element.props); } });
  48. 48. var Card = createComponent(‘Card’, NodeMixin, { construct (element) { this._currentElement = element; this.__instance = new UI.Card(); }, mountComponent (rootID, transaction, context) { var props = this._currentElement.props; this._rootNodeID = rootID; ! this.__instance.prop(props); this.__instance.show(); ! return this.node; }, unmountComponent () { this.__instance.hide(); }, receiveComponent (element) { this._currentElement = element; this.__instance.prop(element.props); } });
  49. 49. var Card = createComponent(‘Card’, NodeMixin, { construct (element) { this._currentElement = element; this.__instance = new UI.Card(); }, mountComponent (rootID, transaction, context) { var props = this._currentElement.props; this._rootNodeID = rootID; ! this.__instance.prop(props); this.__instance.show(); ! return this.node; }, unmountComponent () { this.__instance.hide(); }, receiveComponent (element) { this._currentElement = element; this.__instance.prop(element.props); } });
  50. 50. var Card = createComponent(‘Card’, NodeMixin, { construct (element) { this._currentElement = element; this.__instance = new UI.Card(); }, mountComponent (rootID, transaction, context) { var props = this._currentElement.props; this._rootNodeID = rootID; ! this.__instance.prop(props); this.__instance.show(); ! return this.node; }, unmountComponent () { this.__instance.hide(); }, receiveComponent (element) { this._currentElement = element; this.__instance.prop(element.props); } });
  51. 51. var Card = createComponent(‘Card’, NodeMixin, { construct (element) { this._currentElement = element; this.__instance = new UI.Card(); }, mountComponent (rootID, transaction, context) { var props = this._currentElement.props; this._rootNodeID = rootID; ! this.__instance.prop(props); this.__instance.show(); ! return this.node; }, unmountComponent () { this.__instance.hide(); }, receiveComponent (element) { this._currentElement = element; this.__instance.prop(element.props); } });
  52. 52. Resources: ! https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/edit#slide=id.g380053cce_179 ! https://fivejs.codeschool.com/episodes/72-episode-65-march-5th-2015/stories/463-framework-fatigue ! http://www.sitepoint.com/drowning-in-tools-web-development-industry/ ! http://www.allenpike.com/2015/javascript-framework-fatigue/ ! http://www.todomvc.com ! Prior Art: ! https://github.com/reactjs/react-art ! https://github.com/Flipboard/react-canvas ! https://github.com/facebook/react ! https://github.com/facebook/react-native
  53. 53. THANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKS

×