Date post: | 03-Sep-2014 |
Category: |
Technology |
Upload: | kamil-toman |
View: | 1,197 times |
Download: | 2 times |
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!