Download - React & Radium (Colin Megill)
ReactJS // Radium@colinmegill
I love D3.
var circle = svg.selectAll(‘circle’)
circle.style({"padding", function (d) {
return d.foo === bar ? 5 : 10;}})
Why is this possible?
padding: function(d) {return d.foo === bar ? 5 : 10;
}
Functional UI Paradigm
Data → re-render on change → UI
Why is this significant?
The UI is always a reflection of the data. The styles are recomputed every time the data changes.
Back to the beginning
<p style="padding: 10px"> who’s a kitty
</p>
Why did we stop doing this?
<p style=“padding: 10px”> who’s a kitty
</p>
<p style="padding: 10px"> who’s a kitty
</p>
CSS to the rescue
If we wanted to change the look and feel of the site, we would need to change it in all of the .html files one at a time.
An appropriate abstraction:
<p class="kitty"> who’s a kitty
</p>
.kitty {padding: 10px;
}
We like saying CSS is declarative
<p class="kitty"> who’s a kitty
</p>
.kitty {padding: 10px;
}
<p class="kitty"> who’s a kitty
</p>
.kitty {padding: 10px;
}
.kitty:hover {padding: 10px;
}
...is really just a declarative way to say (with jQuery)...
if (this.hover) {this.padding = 10;
}
State
Backbone & jQuery to the rescue?
this.model.on('change', function() { if (this.model.foo === bar) {$('#kitty').addClass('meow');
}}
Listen & update, update & trigger
change → update → trigger → change
Like the internet, it’s a series of tubes
Functional Programming
React was inspired by D3
Virtual DOM Diffing
Recomputation
padding: foo === bar ? 5px : 10px
modulo no technologies disappear
CSS is over.
It’s been over for a while.
It doesn’t handle state.
Wait, isn’t that why we started down this path in the first place, shared code?
(globals aren’t good)
foo :in-range {
}
The spec will never keep up with JS
(variables, functions, etc.) We even use Sass for static websites!
@import "normalize"; → require("normalize")
h1 { color: $light-blue; }; →
Think: Sass on the client
@import "normalize";require(“normalize”)
h1 { color: $light-blue; }; var headingStyles = {
color: styles.colors.lightBlue}
We use Sass for static websites
We still have modularization. It’s just going to look different:
var buttonStyles = {padding: 5,margin: 10
}
Modularizing with objects
var button = require("buttonStyles");
The end of globals
Radium handles the edge cases
ReactJS Advantages
Diffing // Perf
Composability
Better mental model
Server side rendering
React native
Framework is already mature, and Facebook is building critical applications on it.
Stability
Community
Radium
❖ Diffing // Perf❖ Composability❖ Better mental model❖ Server side rendering❖ React native❖ Stability❖ Community❖ Radium
Advantages
ReactJS // Radium@colinmegill
formidable designers are true design heroes
