Embed Size (px)
DESCRIPTION
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.
Citation preview
React.js & OmA hands-on walkthrough of better ways to build web UIs !!Adam Solove March 12, 2014
Who am I?
1998 - First JavaScript
2011 - SiteBuilder
2012 - Dashboard
2013 - ???
2014 - Post Designer
What is React.js?
A responsive html5 MVC framework
What is React.js?
A responsive html5 MVC framework
What is React.js?
Virtual DOM
JSX Templates
Components
What is Om?
Virtual DOM
JSX Templates
Components
Om components
CLJS data structures
Om cursors
CLJS compiler
Virtual DOMVirtual DOM
JSX Templates
Components
<ol>
class: ‘people’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Alice”
DOM diffVirtual DOM
JSX Templates
Components
<ul>
class: ‘folks’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Adam”
Synthetic eventsVirtual DOM
JSX Templates
Components
<ol>
class: ‘people’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Alice”
onTap: … onTap: … onTap: …
• Custom event plugins • Implicit delegation
JSX TemplatesVirtual DOM
JSX Templates
Components
• An optional XML syntax
• for creating Virtual DOM trees
• that looks sorta like HTML
• and is optional
JSX TemplatesVirtual 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));
ComponentsVirtual DOM
JSX Templates
Components
• A JavaScript object
• with properties and explicit state
• that can render itself to the DOM
• within a managed life-cycle
Component ObjectVirtual 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> ); } });
Component DataVirtual 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
State & PropsVirtual 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.
Lifecycle methodsVirtual DOM
JSX Templates
Components
Initialization Update Destruction
getInitialState getDefaultProps !componentWillMount render componentDidMount
componentWillReceiveProps shouldComponentUpdate !componentWillUpdate render componentDidUpdate
componentWillUnmount
The big ideaVirtual DOM
JSX Templates
Components
MVC
DOM
View
Model
React
Data
DOM
What is Om?
Virtual DOM
JSX Templates
Components
Om components
CLJS data structures
Om cursors
CLJS compiler
Quick CLJS introOm 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")))))
Om cursorsOm 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
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)))))
