Introduction to Om and React.js presented at Prague Lambda Meetup. http://www.meetup.com/Lambda-Meetup-Group

1. Om & React.js
Kamil Toman (@katox)

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

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

5. Virtual DOM
➔ In-memory data structures
➔ Independent of browser’s DOM
➔ No string concatenation
➔ Optimised for CPU performance
➔ Optimized for memory footprint as well

6. 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’) ]);

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

8. 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”))

9. 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”
))))

10. 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”)))

11. 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”)))

12. Into the Code - Clone Omlab!
https://github.com/katox/omlab

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

14. Thanks for your attention!