d3.md

d3

• Riesen-datenverarbeitungs- und utility-Bibliothek
• Wenig Fokus auf bestimmte Technologie (SVG, DOM, …), aber ein paar SVG-Helfer (z.B. Achsen). Auch Zusammenarbeit mit Canvas möglich
• Viele viele Beispiele auf http://bl.ocks.org/mbostock
• Beliebt

Design

• Code over configuration
• databinding an DOM → Insertion/Deletion Billig (ähnliche Vorteile wie react)
• Animation
• Graph layout, statistische Algorithmen, …

react.md

React

• Kleine API-Oberfläche, aber alles relativ wichtig

• “Das V in MVC” → kann auch in existente Anwendungen eingebunden werden, ohne alles zu vereinnahmen

• Kein Dataflow-Modell.

  • Top-down-Ansatz (Re)Flux:

    Action → Data Store → Component

• Render to string, render on server, …

var Actions = {
  addItem: Reflux.createAction()
}

var ItemStore = Reflux.createStore({
    init: function() {
        this.items = []
        this.listenTo(Actions.addItem, this.handleAddItem)
    },
    handleAddItem: function(item) {
        this.items.push(item)
        this.trigger(item)  // everyting listening to this store will be notified
    }
})

var TodoList = React.createClass({
  render: function() {
    return <ul>{this.props.items.map(function(item) {
      return <li>{item}</li>
    })}</ul>
  }
})

var TodoApp = React.createClass({
  mixins: [
    Reflux.listenTo(ItemStore, 'forceUpdate'),
  ],
  getInitialState: function() {
    return {text: ''} //,items: []
  },
  onChange: function(e) {
    this.setState({text: e.target.value})  // update!
  },
  handleSubmit: function(e) {
    e.preventDefault()
    Actions.addItem(this.state.text)  // listened to by the store
    //nextItems = ...; this.setState({items: nextItems})
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={ItemStore.items} />  //this.state.items
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (ItemStore.items.length + 1)}</button>
        </form>
      </div>
    )
  }
})

React.render(<TodoApp />, mountNode)

Prinzip

• Component-specs werden gerendert → virtuelles DOM
• Virtuelles DOM diff mit echtem → nur die nötigen updates am echten DOM
• ⇒ Gute Performance, scrollstatus nicht weg

Lektionen

• Komponenten klein halten → updates betreffen nur kleine parts

• Performance-Verlust gegenüber idealem updaten gering → Merklich bei z.B. Graphen mit 100k Punkten.

• setState merged nur 1 Level tief: Wenn man komplexeren state will, muss man mehr tun. z.B.:

  this.state = {a: 1, b: {x: 2, y: 3}}
  this.setState({a: 4})  // OK, state.b bleibt unberührt
  this.setState({b: {x: 5}})  // Nicht OK, state.b.y verschwindet