Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
React.js & Om
A 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 DOM
Virtual DOM
JSX Templates
Components
<ol>
class: ‘people’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Alic...
DOM diff
Virtual DOM
JSX Templates
Components
<ul>
class: ‘folks’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: “Adam”
Synthetic events
Virtual DOM
JSX Templates
Components
<ol>
class: ‘people’
<li>
Text: “Bob”
<li>
Text: “Carol”
<li>
Text: ...
JSX Templates
Virtual DOM
JSX Templates
Components
• An optional XML syntax
• for creating Virtual DOM trees
• that looks ...
JSX Templates
Virtual DOM
JSX Templates
Components
JSX JavaScript
<div className="people"/> React.DOM.div({ className: "pe...
Components
Virtual DOM
JSX Templates
Components
• A JavaScript object
• with properties and explicit state
• that can rend...
Component Object
Virtual DOM
JSX Templates
Components
!
var TodoList = React.createClass({
getInitialState: function() {
r...
Component Data
Virtual DOM
JSX Templates
Components
Only have one authoritative source for each piece of data
!
Two-way bi...
State & Props
Virtual DOM
JSX Templates
Components
TodoList
state: { todos: [{ name: “Make fun of parens”, done: false }]}...
Lifecycle methods
Virtual DOM
JSX Templates
Components
Initialization Update Destruction
getInitialState
getDefaultProps
!...
The big idea
Virtual 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 intro
Om components
CLJS data structures
Om cursors
CLJS compiler
Clojure, that compiles to JavaScript, and is ...
Om cursors
Om components
CLJS data structures
Om cursors
CLJS compiler
A piece of data that knows where it is in a data st...
Om components
Om cursors
CLJS data structures
Om components
CLJS compiler
A React component with a cursor for props
!
(def...
Nächste SlideShare
Wird geladen in …5
×

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

5.616 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, Business
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×