Om & React.js
-
Upload
kamil-toman -
Category
Technology
-
view
1.211 -
download
2
description
Transcript of Om & React.js
![Page 1: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/1.jpg)
Om & React.jsKamil Toman (@katox)
![Page 2: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/2.jpg)
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
![Page 3: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/3.jpg)
![Page 4: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/4.jpg)
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
![Page 5: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/5.jpg)
Virtual DOM
➔ In-memory data structures➔ Independent of browser’s DOM➔ No string concatenation
➔ Optimised for CPU performance➔ Optimized for memory footprint as well
![Page 6: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/6.jpg)
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’) ]);
![Page 7: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/7.jpg)
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);
![Page 8: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/8.jpg)
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”))
![Page 9: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/9.jpg)
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”))))
![Page 10: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/10.jpg)
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”)))
![Page 11: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/11.jpg)
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”)))
![Page 12: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/12.jpg)
Into the Code - Clone Omlab!
https://github.com/katox/omlab
![Page 13: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/13.jpg)
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
![Page 14: Om & React.js](https://reader036.fdocuments.net/reader036/viewer/2022073013/5406c4068d7f7288088b475d/html5/thumbnails/14.jpg)
Thanks for your attention!