Your SlideShare is downloading. ×
0
Om & React.js
Kamil Toman (@katox)
Is React.js another NiH framework?
➔ Templates are underpowered
◆ Low power leads to new DSLs
◆ Poor composition
➔ Models ...
React.js key features
➔ No templates
◆ Component objects
➔ No dirty checking
◆ Re-render the whole app on every update
◆ D...
Virtual DOM
➔ In-memory data structures
➔ Independent of browser’s DOM
➔ No string concatenation
➔ Optimised for CPU perfo...
Reading React JSX (1)
<div>inner</div>
<div>
<span>a</span>
<span>b</span>
</div>
React.DOM.div({}, ‘inner’);
React.DOM.di...
Reading React JSX (2)
<div id=”myId”>text</div>
var MyC =
React.createClass({/*...*/});
var tree =
<MyC><span /></MyC>;
Re...
Reading Om (1)
React.DOM.div(
{ id: “myId” },
‘text’);
React.DOM.div({},
[ React.DOM.span({},’a’),
React.DOM.span({},’b’) ...
Reading Om (2)
var CommentBox = React.
createClass(
{ render: function() {
return React.DOM.div(
{className: "cmBox"},
"I ...
Reading Om (3)
(def CommentBox
(js/React.createClass
#js {:render (fn []
(this-as this
(js/React.DOM.div
#js {:className
“...
Reading Om (4)
(defn CommentBox [app]
(om/component
(dom/div
#js {:className
“cmBox”}
“I am a CommentBox”)))
(defn Comment...
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 R...
Thanks for your attention!
Om & React.js
Upcoming SlideShare
Loading in...5
×

Om & React.js

1,917

Published on

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

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

Published in: Technology

Transcript of "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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×