react & radium (colin megill)
TRANSCRIPT
I love D3.
var circle = svg.selectAll(‘circle’)
circle.style({"padding", function (d) {
return d.foo === bar ? 5 : 10;}})
Why is this significant?
The UI is always a reflection of the data. The styles are recomputed every time the data changes.
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.
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;
}
Backbone & jQuery to the rescue?
this.model.on('change', function() { if (this.model.foo === bar) {$('#kitty').addClass('meow');
}}
Wait, isn’t that why we started down this path in the first place, shared code?
(globals aren’t good)
(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
❖ Diffing // Perf❖ Composability❖ Better mental model❖ Server side rendering❖ React native❖ Stability❖ Community❖ Radium
Advantages