Fixing the V in MV*:
The Reactive Way
@ncthis
nadeeshacabral.com
WSO2 | hirewire.lk
MVC, MVVM, MVW
Observable Objects
Loops (Digest Loop, Run Loop)
Wiring up of Objects to Controllers
They all still have a few problems
State
Poor Separation of Concerns
DOM Mutation
Enter React.js
"A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES"
React.js
We build our UI as components
Components can come together and build bigger components
A component can have a state
When state changes, we tear down and re-create the DOM
Rebuild the DOM on the fly?
How React "recreates" the DOM
Intelligent DOM Reconciliation
Using heuristics and what you know about your app
DOM Representation in JS
faster parsing, validation
easier testing
faster server side rendering
Autobinding and Event Delegation
Caching bound methods and One Event Listener
<div class="commentBox">
Hello, world! I am at #CMBJS.
</div>
var CommentBox = React.createClass({
render: function() {
return (
React.DOM.div({
className: 'commentBox',
children: 'Hello, world! I am at #CMBJS.'
})
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am at #CMBJS.
</div>
);
}
});
Battle Tested!
Facebook && Instagram
thank you
@ncthis
nadeeshacabral.com