Session slides from Future Insights Live, Vegas 2015: https://futureinsightslive.com/las-vegas-2015/ React & Radium: Computed Styles, the Death of CSS, and the Future of Interactive Data Visualization

1. ReactJS // Radium
@colinmegill

2. I love D3.
var circle = svg.selectAll(‘circle’)
circle
.style({"padding", function (d) {
return d.foo === bar ? 5 : 10;
}})

3. Why is this possible?
padding: function(d) {
return d.foo === bar ? 5 : 10;
}

4. Functional UI Paradigm
Data → re-render on change → UI

5. Why is this significant?
The UI is always a reflection of the data.
The styles are recomputed every time the
data changes.

6. Back to the beginning
<p style="padding: 10px">
who’s a kitty
</p>

7. Why did we stop doing this?
<p style=“padding: 10px”>
who’s a kitty
</p>
<p style="padding: 10px">
who’s a kitty
</p>

8. 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.

9. An appropriate abstraction:
<p class="kitty">
who’s a kitty
</p>
.kitty {
padding: 10px;
}

10. 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;
}

11. .kitty:hover {
padding: 10px;
}
...is really just a declarative way to say (with jQuery)...
if (this.hover) {
this.padding = 10;
}

12. State

13. Backbone & jQuery to the rescue?
this.model.on('change', function()
{
if (this.model.foo === bar) {
$('#kitty').addClass('meow');
}
}

14. Listen & update, update & trigger
change → update → trigger → change

15. Like the internet, it’s a series of tubes
Functional Programming

16. React was inspired by D3

17. Virtual DOM Diffing

18. Recomputation

19. padding: foo === bar ? 5px : 10px

20. modulo no technologies disappear
CSS is over.

21. It’s been over for a
while.

22. It doesn’t handle state.

23. Wait, isn’t that why we started down this
path in the first place, shared code?
(globals aren’t good)

24. foo :in-range {
}
The spec will never keep up with JS

25. (variables, functions, etc.)
We even use Sass for static websites!
@import "normalize"; → require("normalize")
h1 { color: $light-blue; }; →
Think: Sass on the client

26. @import "normalize";
require(“normalize”)
h1 { color: $light-blue; };
var headingStyles = {
color: styles.colors.lightBlue
}
We use Sass for static websites

27. We still have modularization. It’s just going to
look different:
var buttonStyles = {
padding: 5,
margin: 10
}
Modularizing with objects

28. var button = require
("buttonStyles");
The end of globals

29. Radium handles the
edge cases

30. ReactJS Advantages

31. Diffing // Perf

32. Composability

33. Better mental model

34. Server side rendering

35. React native

36. Framework is already mature, and Facebook
is building critical applications on it.
Stability

37. Community

38. Radium

39. ❖ Diffing // Perf
❖ Composability
❖ Better mental model
❖ Server side rendering
❖ React native
❖ Stability
❖ Community
❖ Radium
Advantages

40. ReactJS // Radium
@colinmegill
formidable designers are true design heroes