React.js & Om: A hands-on walkthrough of better ways to build web UIs
-
Upload
adam-solove -
Category
Technology
-
view
3.395 -
download
0
description
Transcript of React.js & Om: A hands-on walkthrough of better ways to build web UIs
![Page 1: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/1.jpg)
React.js & OmA hands-on walkthrough of better ways to build web UIs !!Adam Solove March 12, 2014
![Page 2: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/2.jpg)
Who am I?
1998 - First JavaScript
2011 - SiteBuilder
2012 - Dashboard
2013 - ???
2014 - Post Designer
![Page 3: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/3.jpg)
What is React.js?
A responsive html5 MVC framework
![Page 4: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/4.jpg)
What is React.js?
A responsive html5 MVC framework
![Page 5: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/5.jpg)
What is React.js?
Virtual DOM
JSX Templates
Components
![Page 6: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/6.jpg)
What is Om?
Virtual DOM
JSX Templates
Components
Om components
CLJS data structures
Om cursors
CLJS compiler
![Page 7: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/7.jpg)
Virtual DOMVirtual DOM
JSX Templates
Components
<ol>
class: ‘people’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Alice”
![Page 8: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/8.jpg)
DOM diffVirtual DOM
JSX Templates
Components
<ul>
class: ‘folks’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Adam”
![Page 9: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/9.jpg)
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
![Page 10: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/10.jpg)
JSX TemplatesVirtual DOM
JSX Templates
Components
• An optional XML syntax
• for creating Virtual DOM trees
• that looks sorta like HTML
• and is optional
![Page 11: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/11.jpg)
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));
![Page 12: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/12.jpg)
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
![Page 13: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/13.jpg)
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> ); } });
![Page 14: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/14.jpg)
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
![Page 15: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/15.jpg)
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.
![Page 16: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/16.jpg)
Lifecycle methodsVirtual DOM
JSX Templates
Components
Initialization Update Destruction
getInitialState getDefaultProps !componentWillMount render componentDidMount
componentWillReceiveProps shouldComponentUpdate !componentWillUpdate render componentDidUpdate
componentWillUnmount
![Page 17: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/17.jpg)
The big ideaVirtual DOM
JSX Templates
Components
MVC
DOM
View
Model
React
Data
DOM
![Page 18: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/18.jpg)
What is Om?
Virtual DOM
JSX Templates
Components
Om components
CLJS data structures
Om cursors
CLJS compiler
![Page 19: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/19.jpg)
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")))))
![Page 20: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/20.jpg)
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
![Page 21: React.js & Om: A hands-on walkthrough of better ways to build web UIs](https://reader033.fdocuments.net/reader033/viewer/2022060108/554f97acb4c90586258b463b/html5/thumbnails/21.jpg)
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)))))