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