Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
16
200
Unit tests written per month
Slide 3
Slide 3 text
usability testing
added
keyboard controls
Slide 4
Slide 4 text
7
10
Views or components written per month
Slide 5
Slide 5 text
apples and pears comparison
http://bit.ly/1MvDN1h
Slide 6
Slide 6 text
1. Simplicity
2. Predictability
3. Composability
Slide 7
Slide 7 text
1
Simplicity
Slide 8
Slide 8 text
data = _.extend({
isHighlighted: this.isHighlighted
},
this.user.toJSON(),
this.account.toJSON()
});
html = Mustache.render(Template, data);
this.$el.html(template);
return this.$el;
Slide 9
Slide 9 text
var classes = "user-wrapper"
if (this.state.isHighlighted) {
var classes += " is-highlighted"
}
return (
{this.props.userName}
account: {this.props.accountName}
);
Slide 10
Slide 10 text
Reducing short term
memory usage
simplicity
Slide 11
Slide 11 text
this.render = _.debounce( this.render )
Slide 12
Slide 12 text
React Runtime
render
input input input input input
Slide 13
Slide 13 text
Remove, don’t conquer
complexity
simplicity
Slide 14
Slide 14 text
emails = this.user.get(‘emails')
data = {
hasEmail: emails.length > 0
}
html = Mustache.render(Template, data)
Slide 15
Slide 15 text
simplicity complexity
Slide 16
Slide 16 text
1. Reduce short term memory usage
2. Remove, don’t conquer complexity
simplicity:
Slide 17
Slide 17 text
2
Predictability
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
incorrect type:
duplicate keys:
mutating props incorrectly:
Slide 20
Slide 20 text
defending against
future mistakes
predictability
Slide 21
Slide 21 text
if (!Array.isArray(instances)) {
type = typeof instances;
msg = "listenToEvents expects array,not:";
console.warn(msg + " " + type);
}
Slide 22
Slide 22 text
“our powers to visualize
processes evolving in time are
relatively poorly developed
Edsger W. Dijkstra
http://bit.ly/1fzrqcm
Slide 23
Slide 23 text
Async Data Fetching
User Interaction
Flow breaking code
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Data
lifecycle methods
component 1:
lifecycle methods
lifecycle methods
lifecycle methods
lifecycle methods
component 2:
component 3:
component 4:
component 5:
Slide 26
Slide 26 text
http://bit.ly/1R69Xsi
Slide 27
Slide 27 text
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)
}
Slide 28
Slide 28 text
make the model
of time simpler
predictability
Slide 29
Slide 29 text
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)
}
Slide 30
Slide 30 text
1. lifecycle methods
1. render?
2. manual dom updates?
3. data binding?
4. updating children?
Slide 31
Slide 31 text
slow enough to be unpredictable
fast enough to be predictable
Slide 32
Slide 32 text
Standardise the
effects of time
predictability
Slide 33
Slide 33 text
1. Defend against future mistakes
2. Make the model of time simpler
3. Standardise the effects of time
predictability:
Slide 34
Slide 34 text
3
composability
Slide 35
Slide 35 text
“"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/
Slide 36
Slide 36 text
dropdown controls
1
2
3 4 5 6
Slide 37
Slide 37 text
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?
Slide 38
Slide 38 text
Make component
interfaces performant
composability
Slide 39
Slide 39 text
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();
}
});
Slide 40
Slide 40 text
toggleOpen: function() {
this.setState({open: !this.state.open})
},
render: function() {
return (
shown when state.open
)
}
React: Add a child component
Slide 41
Slide 41 text
Make component
interfaces explicit
composability
Slide 42
Slide 42 text
14
25
Generic components vs views
Slide 43
Slide 43 text
2.2
4.8
Generic component/view usage
Slide 44
Slide 44 text
1. Performant component interfaces
2. Explicit component interfaces
composability:
Slide 45
Slide 45 text
4
Summary
Slide 46
Slide 46 text
What is good code?
Slide 47
Slide 47 text
1. Simple
2. Predictable
3. Composable
Slide 48
Slide 48 text
Good code
Slide 49
Slide 49 text
1. Fewer regressions
2. Less serious regressions
3. More code re-use
4. Shipping faster
5. Better usability & UX
Slide 50
Slide 50 text
8 22 DEC 09:23AM
Simple and beautiful
Slide 51
Slide 51 text
Further reading
Functional programming
Predictable
Composabilty
State
Complect
Implicit vs Explicit
Slide 52
Slide 52 text
@byrichardpowell
follow me for musings on
React.js, UI Development & Product Design