16

200

Unit tests written per month

usability testing

added

keyboard controls

7

10

Views or components written per month

apples and pears comparison

http://bit.ly/1MvDN1h

1. Simplicity 2. Predictability 3. Composability

1Simplicity

data = _.extend({ isHighlighted: this.isHighlighted }, this.user.toJSON(), this.account.toJSON() });

html = Mustache.render(Template, data);

this.$el.html(template); return this.$el;

var classes = "user-wrapper"

if (this.state.isHighlighted) { var classes += " is-highlighted"}

return ( <div className={classes}> <strong>{this.props.userName}</strong> <img src={this.props.avatar} /> <span>account: {this.props.accountName} </div>);

Reducing short term memory usage

simplicity

this.render = _.debounce( this.render )

React Runtime

render

input input input input input

Remove, don’t conquer complexity

simplicity

emails = this.user.get(‘emails')

data = { hasEmail: emails.length > 0}

html = Mustache.render(Template, data)

simplicity complexity

1. Reduce short term memory usage 2. Remove, don’t conquer complexity

simplicity:

2Predictability

propTypes: {firstName: React.PropTypes.string.isRequired,emails: React.PropTypes.arrayOf([React.PropTypes.string

]),permission: React.PropTypes.oneOf(["admin","limited","normal"

])}

PropTypes: http://bit.ly/1FDQmuq& Model: http://bit.ly/1PsG9mf

incorrect type:

duplicate keys:

mutating props incorrectly:

defending against future mistakes

predictability

if (!Array.isArray(instances)) {

type = typeof instances;msg = "listenToEvents expects array,not:";

console.warn(msg + " " + type); }

“our powers to visualize processes evolving in time are relatively poorly developed

Edsger W. Dijkstra http://bit.ly/1fzrqcm

Async Data Fetching User Interaction Flow breaking code

Data

1. WillRecieveProps 2. ShouldUpdate 3. WillUpdate 4. Render 5. DidUpdate

component 1:

component 2:

Data

1. WillRecieveProps 2. ShouldUpdate 3. WillUpdate 4. Render 5. DidUpdate

Data

lifecycle methodscomponent 1:

lifecycle methods

lifecycle methods

lifecycle methods

lifecycle methods

component 2:

component 3:

component 4:

component 5:

http://bit.ly/1R69Xsi

initialize: function(model) { this.model = model this.listenTo( this.model, "change:name", this.changeName )}

changeName: function() { name = this.model.get('name')

this.$el.find('.name').html(name)}

make the model of time simpler

predictability

initialize: function(model) { this.model = model this.listenTo( this.model, "change:name", this.changeName )}

changeName: function() { name = this.model.get('name')

this.$el.find('.name').html(name)}

1. lifecycle methods

1. render? 2. manual dom updates? 3. data binding? 4. updating children?

slow enough to be unpredictable

fast enough to be predictable

Standardise the effects of time

predictability

1. Defend against future mistakes 2. Make the model of time simpler 3. Standardise the effects of time

predictability:

3composability

“"A highly composable system provides ... components that can be selected and assembled in various combinations to satisfy specific user requirements"

blog.kissmetrics.com/loading-time/

dropdown controls

1

2

3 4 5 6

render: function() {

this.$el.html(Mustache.render(Template));

$wrapper = this.$el.find(‘.childView');

this.childView.setElement($wrapper); this.childView.render(); return this.$el;

}

Backbone: Add a child view?

Make component interfaces performant

composability

Backbone: Extend a class?

SelectableRow = Row.extend({ events: function() { oldEvents = Row.prototype.events; newEvents = {'click': 'select'}; return _.extend(oldEvents, newEvents}); }

template: require('selectable-row.html'),

getViewData: function() { return model.toJSON(); }

});

toggleOpen: function() { this.setState({open: !this.state.open})}, render: function() { return ( <DropdownControls

toggleOpenState={this.toggleOpen}open={this.state.open}

> <div>shown when state.open</div> </DropdownControls>

)}

React: Add a child component

Make component interfaces explicit

composability

14

25

Generic components vs views

2.2

4.8

Generic component/view usage

1. Performant component interfaces 2. Explicit component interfaces

composability:

4Summary

What is good code?

1. Simple 2. Predictable 3. Composable

Good code

1. Fewer regressions 2. Less serious regressions 3. More code re-use 4. Shipping faster5. Better usability & UX

8 22 DEC 09:23AM

Simple and beautiful

Further reading

Functional programming Composabilty State Complect Implicit vs Explicit

@byrichardpowellfollow me for musings on

React.js, UI Development & Product Design