• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Om & React.js
 

Om & React.js

on

  • 952 views

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

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

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

Statistics

Views

Total Views
952
Views on SlideShare
934
Embed Views
18

Actions

Likes
3
Downloads
7
Comments
0

2 Embeds 18

http://www.slideee.com 17
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Om & React.js Om & React.js Presentation Transcript

    • Om & React.js Kamil 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!