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.

1. React.js & Om
A hands-on walkthrough of
better ways to build web UIs
!
!
Adam Solove
March 12, 2014

2. Who am I?
1998 - First JavaScript
2011 - SiteBuilder
2012 - Dashboard
2013 - ???
2014 - Post Designer

3. What is React.js?
A responsive html5 MVC framework

4. What is React.js?
A responsive html5 MVC framework

5. What is React.js?
Virtual DOM
JSX Templates
Components

6. What is Om?
Virtual DOM
JSX Templates
Components
Om components
CLJS data structures
Om cursors
CLJS
compiler

7. Virtual DOM
Virtual DOM
JSX Templates
Components
<ol>
class: ‘people’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Alice”

8. DOM diff
Virtual DOM
JSX Templates
Components
<ul>
class: ‘folks’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Adam”

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. 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. 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. 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. 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. 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. 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. Lifecycle methods
Virtual DOM
JSX Templates
Components
Initialization Update Destruction
getInitialState
getDefaultProps
!
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
!
componentWillUpdate
render
componentDidUpdate
componentWillUnmount

17. The big idea
Virtual DOM
JSX Templates
Components
MVC
DOM
View
Model
React
Data
DOM

18. What is Om?
Virtual DOM
JSX Templates
Components
Om components
CLJS data structures
Om cursors
CLJS
compiler

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. 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. 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)))))