react & radium (colin megill)

Download React & Radium (Colin Megill)

Post on 03-Aug-2015

373 views

Category:

Technology

2 download

Embed Size (px)

TRANSCRIPT

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

whos a kitty

7. Why did we stop doing this?

whos a kitty

whos a kitty

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:

whos a kitty

.kitty { padding: 10px; } 10. We like saying CSS is declarative

whos a kitty

.kitty { padding: 10px; }

whos a kitty

.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, its 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. Its been over for a while. 22. It doesnt handle state. 23. Wait, isnt that why we started down this path in the first place, shared code? (globals arent 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. Its 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