React.js & Om: A hands-on walkthrough of better ways to build web UIs

5,201 views

Published on

This presentation introduces React, a library that makes it easier to reason about and build complex user interfaces for the web. The slides will take you through enough of React's structure and API that you can write a simple app and learn more from the React online documentation.

In part two, the slides describe Om, a ClojureScript wrapper around React that also provides a model-level abstraction for managing the data in your web application using ClojuresScript's immutable data structures. This makes it easy to test, to add undo/redo, and many other tricks hard to achieve using stateful models.

Published in: Technology, Business
1 Comment
12 Likes
Statistics
Notes
  • To cut right to the important stuff, may I ask what code font that is you're using?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,201
On SlideShare
0
From Embeds
0
Number of Embeds
1,722
Actions
Shares
0
Downloads
68
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

React.js & Om: A hands-on walkthrough of better ways to build web UIs

  1. 1. React.js & Om A hands-on walkthrough of better ways to build web UIs ! ! Adam Solove March 12, 2014
  2. 2. Who am I? 1998 - First JavaScript 2011 - SiteBuilder 2012 - Dashboard 2013 - ??? 2014 - Post Designer
  3. 3. What is React.js? A responsive html5 MVC framework
  4. 4. What is React.js? A responsive html5 MVC framework
  5. 5. What is React.js? Virtual DOM JSX Templates Components
  6. 6. What is Om? Virtual DOM JSX Templates Components Om components CLJS data structures Om cursors CLJS compiler
  7. 7. Virtual DOM Virtual DOM JSX Templates Components <ol> class: ‘people’ <li> Text: “Bob” <li> Text: “Carol” <li> Text: “Alice”
  8. 8. DOM diff Virtual DOM JSX Templates Components <ul> class: ‘folks’ <li> Text: “Bob” <li> Text: “Carol” <li> Text: “Adam”
  9. 9. Synthetic events Virtual DOM JSX Templates Components <ol> class: ‘people’ <li> Text: “Bob” <li> Text: “Carol” <li> Text: “Alice” onTap: … onTap: … onTap: … • Custom event plugins • Implicit delegation
  10. 10. JSX Templates Virtual DOM JSX Templates Components • An optional XML syntax • for creating Virtual DOM trees • that looks sorta like HTML • and is optional
  11. 11. JSX Templates Virtual DOM JSX Templates Components JSX JavaScript <div className="people"/> React.DOM.div({ className: "people" }); <div>Hello {this.name}</div> React.DOM.div(null, "Hello ", this.name); <HelloMessage name="John" /> HelloMessage({name: "John"}); <HelloMessage name="John"> <div></div> <span></span> </HelloMessage> HelloMessage({name: "John"}, React.DOM.div(null), React.DOM.span(null));
  12. 12. Components Virtual DOM JSX Templates Components • A JavaScript object • with properties and explicit state • that can render itself to the DOM • within a managed life-cycle
  13. 13. Component Object Virtual DOM JSX Templates Components ! var TodoList = React.createClass({ getInitialState: function() { return {items: ['prepare talk', ‘charge laptop', 'make fun of rails']}; }, ! handleRemove: function() { /* … */ }, ! render: function() { var items = this.state.items.map(function(item, i) { return ( <div key={item} onClick={this.handleRemove.bind(this, i)}> {item} </div> ); }.bind(this)); return ( <div>{items}</div> ); } });
  14. 14. Component Data Virtual DOM JSX Templates Components Only have one authoritative source for each piece of data ! Two-way bindings are the source of (most) all evil ! Distinguish multiple readers of data from single writer ! State v. props
  15. 15. State & Props Virtual DOM JSX Templates Components TodoList state: { todos: [{ name: “Make fun of parens”, done: false }]} props: {} ! TodoListHeader props: { done: 0, undone: 1 } ! TodoItem props: { item: { name: “Eat pizza”, done: false } } state: { editing: false } State has data you own. Props has data you borrow. You can change your own state. You have to ask someone else to change your props.
  16. 16. Lifecycle methods Virtual DOM JSX Templates Components Initialization Update Destruction getInitialState getDefaultProps ! componentWillMount render componentDidMount componentWillReceiveProps shouldComponentUpdate ! componentWillUpdate render componentDidUpdate componentWillUnmount
  17. 17. The big idea Virtual DOM JSX Templates Components MVC DOM View Model React Data DOM
  18. 18. What is Om? Virtual DOM JSX Templates Components Om components CLJS data structures Om cursors CLJS compiler
  19. 19. Quick CLJS intro Om components CLJS data structures Om cursors CLJS compiler Clojure, that compiles to JavaScript, and is still really fast ! Immutable data structures: [1 2 3] {:a 1 :b 2} #{1 2 3} ! Some code: ! (defn contact-view [contact owner] (reify om/IRenderState (render-state [this {:keys [delete]}] (dom/li nil (dom/span nil (display-name contact)) (dom/button #js {:onClick (fn [e] (put! delete contact))} "Delete")))))
  20. 20. Om cursors Om components CLJS data structures Om cursors CLJS compiler A piece of data that knows where it is in a data structure ! (def todos {:todos [ {:done false :text “Make a macro”} {:done true :text “Confuse the ruby folks”}]}) ! (get-in todos [:todos 0 :done]) #=> false (update-in todos [:todos 0 :done] not) #=> new version of todos where first item is done
  21. 21. Om components Om cursors CLJS data structures Om components CLJS compiler A React component with a cursor for props ! (defn my-widget [data owner] (reify om/IInitState (init-state [_] {:text "Hello world!"}) om/IRenderState (render-state [_ state] (dom/h1 nil (:text state)))))

×