Om & React.js

2,355 views

Published on

Introduction to Om and React.js presented at Prague Lambda Meetup.

http://www.meetup.com/Lambda-Meetup-Group

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,355
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
25
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Om & React.js

  1. 1. Om & React.js Kamil Toman (@katox)
  2. 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. 3. 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
  4. 4. Virtual DOM ➔ In-memory data structures ➔ Independent of browser’s DOM ➔ No string concatenation ➔ Optimised for CPU performance ➔ Optimized for memory footprint as well
  5. 5. 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’) ]);
  6. 6. 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);
  7. 7. 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”))
  8. 8. 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” ))))
  9. 9. 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”)))
  10. 10. 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”)))
  11. 11. Into the Code - Clone Omlab! https://github.com/katox/omlab
  12. 12. 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
  13. 13. Thanks for your attention!

×