![renderA: <div />
renderB: <span />
[removeNode <div />],
[insertNode <span />]](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-30-320.jpg)
![renderA: <PuttyPatrol />
renderB: <Goldar />
[removeNode <PuttyPatrol />],
[insertNode <Goldar />]](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-31-320.jpg)
![renderA: <div id="ahHhhhHh" />
renderB: <div id=“after-10000-years-im-free” />
[replaceAttribute id "after-10000-years-im-free"]](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-32-320.jpg)
![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>](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-53-320.jpg)
![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 ... />;
}
}
});](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-54-320.jpg)
![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 ... />;
}
}
});](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-55-320.jpg)
![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 ... />;
}
}
});](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-56-320.jpg)
![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 ... />;
}
}
});](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-57-320.jpg)
![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;
}](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-59-320.jpg)
![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;
}](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-60-320.jpg)
![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;
}](https://cdn.statically.io/img/image.slidesharecdn.com/presentation-150508185029-lva1-app6891/85/React-js-Beyond-the-Browser-61-320.jpg)
React.js: Beyond the Browser
- 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
- 3. “just remember I am going after you” - Godfrey Chan, wannabe Thought Leader
- 4. “the whole reason I am doing the talk is to go after you”
- 6. JAVASCRIPT
- 7. “… the latest and greatest JavaScript framework comes around every sixteen minutes.” - Allen Pike, King of VanJS http://www.allenpike.com/2015/javascript-framework-fatigue/
- 8. “Helping you select an MV* framework” ! (with 64 different choices!!) http://todomvc.com/
- 9. 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/
- 10. “… 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/
- 11. FOAM“FOAM is a full-stack, reactive, deeply MVC metaprogramming Javascript framework.” <meta name=“description” … />
- 15. @gabescholz
- 16. e
- 21. 2. “Learn once, Write anywhere” 1. Why React?
- 22. 😍 Everything is JavaScript
- 23. <!-- template.html --> ! <weather-widget forecast=“forecast”> <weather-link href=“http://weather.ca”> sherr, bud </weather-link> </weather-widget>
- 24. // component.js ! <WeatherWidget forecast={forecast}> <WeatherLink href=“http://weather.ca”> sherr, bud </WeatherLink> </WeatherWidget>
- 25. // component.js ! React.createElement(WeatherWidget, { forecast: forecast }, React.createElement(WeatherLink, { href: “http://weather.ca” }, “sherr, bud” ) ) Dat JSX, tho
- 26. // component.js ! React.createElement(“div”, {}, React.createElement(“a”, { href: “http://weather.ca” }, “sherr, bud” ) ) Dat JSX, tho FEELS GOOD MAN
- 27. 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> ) } });
- 30. renderA: <div /> renderB: <span /> [removeNode <div />], [insertNode <span />]
- 31. renderA: <PuttyPatrol /> renderB: <Goldar /> [removeNode <PuttyPatrol />], [insertNode <Goldar />]
- 32. renderA: <div id="ahHhhhHh" /> renderB: <div id=“after-10000-years-im-free” /> [replaceAttribute id "after-10000-years-im-free"]
- 34. STATE vs PROPS in TWO MINUTES
- 42. 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> ); } });
- 43. 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> ); } });
- 44. Going beyond the DOM
- 45. React Canvas Created by Flipboard 60 fps on mobile browsers Last commit ~1 week after React Native released publicly
- 46. <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);
- 47. 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
- 48. <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
- 49. ReactGibbon Created by Netflix Runs on their Gibbon platform Renders JSON instead of DOM
- 50. ` I SHOULD PUT REACT ON SOMETHINGI SHOULD PUT REACT ON SOMETHING
- 52. 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..” />
- 53. 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>
- 54. 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 ... />; } } });
- 55. 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 ... />; } } });
- 56. 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 ... />; } } });
- 57. 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 ... />; } } });
- 58. 😛 Becoming a React trickster
- 59. 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; }
- 60. 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; }
- 61. 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; }
- 62. var Card = createComponent( ‘Card’, NodeMixin, ComponentMixin, ..., { /* additional behaviours */ } ); ! var PebbleApp = React.createClass({ render () { return ( <Card title=“Hello World!”/> ); } }); ! renderPebble(<PebbleApp />);
- 63. var NodeMixin = { putEventListener (...) { /* ... */ }, handleEvent (...) { /* ... */ }, destroyEventListeners (...) { /* ... */ }, applyNodeProps (...) { /* ... */ } }; ! var ContainerMixin = assign({}, ReactMultiChild.Mixin, { moveChild (...) { /* ... */ }, createChild (...) { /* ... */ }, replaceChild (...) { /* ... */ }, updateChildrenAtRoot (...) { /* ... */ }, mountAndInjectChildren (...) { /* ... */ } }); ! // per component { construct (...) { /* ... */ }, mountComponent (...) { /* ... */ }, unmountComponent (...) { /* ... */ }, receiveComponent (...) { /* ... */ } };
- 64. 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); } });
- 65. 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); } });
- 66. 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); } });
- 67. 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); } });
- 68. 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); } });