The document discusses React.js and its uses beyond just web browsers. It explains how React can be used to build mobile apps with React Native, render to canvases instead of the DOM, and even be adapted to run on devices like smartwatches. Examples are given of React being used on Canvas, in React Native apps, and modified to work on a smartwatch. The document argues React's versatility and the ability to "learn once, write anywhere" enable it to be applied in many environments beyond just 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>
)
}
});

28. 😁 Virtual DOM
+
Diffing

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"]

33. 😁 One-way
Reactive Rendering

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

51. https://github.com/garbles/react-pebble-demo

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);
}
});

69. 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

70. THANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKSTHANKS