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

React does not dictate

Battle Tested!

Facebook && Instagram

In conclusion...

thank you


@ncthis
nadeeshacabral.com

ReactJS on Colmobo JS Meetup

By Nadeesha Cabral

ReactJS on Colmobo JS Meetup

This is a slide deck for a presentation I did for Colombo JS Meetup on ReactJS

  • 1,120