In the 90s it was easy
Fast forward to 2015
Web apps are still slow
What impedes DOM speed
React overview
React component basics
var Title = React.createClass({
render: function() {
return <h2>Form title</h2>
}
});
var TextInput = React.createClass({
render: function() {
return (
<div>
<input type="text" />
</div>
);
}
});
var Form = React.createClass({
render: function() {
return (
<div className="form">
<Title />
<TextInput />
</div>
);
}
});
var Title = React.createClass({
render: function() {
return <h2>{this.props.title}</h2>
}
});
var TextInput = React.createClass({
render: function() {
return (
<div>
<input type="text" />
</div>
);
}
});
var Form = React.createClass({
render: function() {
var title = 'Custom title';
return (
<div className="form">
<Title title={title} />
<TextInput />
</div>
);
}
});
var TextInput = React.createClass({
render: function() {
return (
<input type="text"
value={this.props.value}
onChange={this.props.changeHandler} />
);
}
});
var Form = React.createClass({
getInitialState: function() {
return { inputValue: 'Initial input value' };
},
changeInputValue: function(event) {
this.setState( { inputValue: event.target.value } );
},
render: function() {
var title = 'Custom title';
return (
<div className="form">
<Title title={title} />
<TextInput
value={this.state.inputValue}
changeHandler={this.changeInputValue} />
</div>
);
}
});
Why one-way binding?
What about performance?
var Form = React.createClass({
// ...
shouldComponentUpdate: function(nextProps, nextState) {
},
// ...
});
The case for immutability
Immutable.js in action
var Form = React.createClass({
// ...
shouldComponentUpdate: function(nextProps, nextState) {
return this.props.items !== nextProps.items;
},
// ...
});
Virtual DOM
First level properties of <div />
align, onwaiting, onvolumechange, ontimeupdate, onsuspend, onsubmit, onstalled, onshow, onselect, onseeking, onseeked, onscroll, onresize, onreset, onratechange, onprogress, onplaying, onplay, onpause, onmousewheel, onmouseup, onmouseover, onmouseout, onmousemove, onmouseleave, onmouseenter, onmousedown, onloadstart, onloadedmetadata, onloadeddata, onload, onkeyup, onkeypress, onkeydown, oninvalid, oninput, onfocus, onerror, onended, onemptied, ondurationchange, ondrop, ondragstart, ondragover, ondragleave, ondragenter, ondragend, ondrag, ondblclick, oncuechange, oncontextmenu, onclose, onclick, onchange, oncanplaythrough, oncanplay, oncancel, onblur, onabort, spellcheck, isContentEditable, contentEditable, outerText, innerText, accessKey, hidden, webkitdropzone, draggable, tabIndex, dir, translate, lang, title, childElementCount, lastElementChild, firstElementChild, children, nextElementSibling, previousElementSibling, onwheel, onwebkitfullscreenerror, onwebkitfullscreenchange, onselectstart, onsearch, onpaste, oncut, oncopy, onbeforepaste, onbeforecut, onbeforecopy, webkitShadowRoot, dataset, classList, className, outerHTML, innerHTML, scrollHeight, scrollWidth, scrollTop, scrollLeft, clientHeight, clientWidth, clientTop, clientLeft, offsetParent, offsetHeight, offsetWidth, offsetTop, offsetLeft, localName, prefix, namespaceURI, id, style, attributes, tagName, parentElement, textContent, baseURI, ownerDocument, nextSibling, previousSibling, lastChild, firstChild, childNodes, parentNode, nodeType, nodeValue, nodeName
Virtual DOM first level props
props, _owner, _lifeCycleState, _pendingProps, _pendingCallbacks, _pendingOwner
Virtual DOM
Testing components
React Native
Native Components
React is:
Thank you