React

Rethinking best practices

What

Library/framework for building UIs

• Components
• Virtual DOM
• Unidirectional data flow

What - Components

What - Components

• MVC
• Reusable
• Increase cohesion
• Idempotent function

• Alleen verantwoordelijk voor view
• Prop validation, default props
• Decrease coupling. Cohesion between display logic en markup
• Describe UI at any point in time (like server rendered app)

What - Components

class Autocomplete extends React.Component {
   componentDidMount() { ... }
   componentWillReceiveProps() { ... }
   componentWillUnmount() { ... }
   handleChange(ev) { ... }
   render() {
      return (
         <div className="autocomplete">
            <input onChange={this.handleChange} value={this.state.value} />
            <ul className="suggestions">{this.props.suggestions}</ul>
         </div>
      );
   }
}
...
<Autocomplete suggestions={["Bas", "Meindert", "Astrid", ...]} />

What - Virtual DOM

• Data change over time is the root of all evil
• Diffing
• Re-render app on every data change

• Heel veel state, ui elementen onderling afhankelijk, event bus, onvoorspelbare veranderingen. Moeilijk voor programmeur om state over time te bevatten.
• Minimal DOM changes
• ENTIRE app on data change!

What - Unidirectional data flow

• Events passed up the chain by callbacks

What - Unidirectional data flow

• Central data store
• Immutability

• Easy to reason about
• Pure render

Why

• "Easy" to wrap your head around
• "Easy" to unit test
• Reusable components
• Speed!
• Large and growing community

• In tegenstelling tot componenten die elkaar events sturen dmv event bus
• Idempotent/pure. Use different data, check result. Shallow render. State en events nog steeds moeilijk.
• duh
• React is really fast
• Herbruikbare componenten, hulp. Heeft ook nadelen, nog erg in ontwikkeling.

Future

• Server side rendering
• Relay & GraphQL
• React Native
• Animations

• Logische stap, maar ingreep voor onze stack. Eerst lokaal uitproberen. Client side renderen nog geen bottleneck, maar server side heeft wel voordelen.
• Framework van Facebook voor het ophalen van data.