Om & React.jsKamil Toman (@katox)

Is React.js another NiH framework?

➔ Templates are underpowered◆ Low power leads to new DSLs◆ Poor composition

➔ Models are central to UIs◆ View needs to be in sync with its model

➔ Setup bi-di binding and observe changes◆ Observable models encourage mutation◆ Mutation creates additional complexity◆ Can’t use immutable data structures

React.js key features

➔ No templates◆ Component objects

➔ No dirty checking◆ Re-render the whole app on every update◆ Diff the output not DOM

➔ No explicit DOM manipulation◆ Virtual DOM and synthetic events◆ Minimal set of changes computation◆ Batch execution of all updates

Virtual DOM

➔ In-memory data structures➔ Independent of browser’s DOM➔ No string concatenation

➔ Optimised for CPU performance➔ Optimized for memory footprint as well

Reading React JSX (1)<div>inner</div>

<div><span>a</span><span>b</span>

</div>

React.DOM.div({}, ‘inner’);

React.DOM.div({},[ React.DOM.span({},’a’), React.DOM.span({},’b’) ]);

Reading React JSX (2)<div id=”myId”>text</div>

var MyC = React.createClass({/*...*/});var tree = <MyC><span /></MyC>;

React.DOM.div({ id: “myId” },‘text’);

var MyC = React.createClass({/*...*/});var tree = MyC(null, React.DOM.span(null);

Reading Om (1)React.DOM.div(

{ id: “myId” },‘text’);

React.DOM.div({},[ React.DOM.span({},’a’), React.DOM.span({},’b’) ]);

(dom/div #js { :id “myId” } “text”)

(dom/div nil (dom/span nil “a”) (dom/span nil “b”))

Reading Om (2)var CommentBox = React.createClass({ render: function() { return React.DOM.div( {className: "cmBox"}, "I am a CommentBox"); }});

(def CommentBox (js/React.createClass #js {:render (fn [] (this-as this (js/React.DOM.div #js {:className “cmBox”} “I am a CommentBox”))))

Reading Om (3)(def CommentBox (js/React.createClass #js {:render (fn [] (this-as this (js/React.DOM.div #js {:className “cmBox”} “I am a CommentBox”))))

(defn CommentBox [app] (om/component (dom/div #js {:className “cmBox”} “I am a CommentBox”)))

Reading Om (4)(defn CommentBox [app] (om/component (dom/div #js {:className “cmBox”} “I am a CommentBox”)))

(defn CommentBox [app] (reify om/IRender (render [this] (dom/div #js {:className “cmBox”} “I am a CommentBox”)))

Into the Code - Clone Omlab!

https://github.com/katox/omlab

What To See

➔ React: Rethinking best practices➔ Introduction to React.js➔ High performance functional programming

with React and Meteor➔ React Developer Tools➔ React.js Components

Thanks for your attention!