Maintainable React UIs using Cosmos.js

Transcript

1. Hello.
2. Why do UI devs change frameworks so often?
3. Why do UI devs change frameworks so often? A. Because we constantly want to learn new stuff B. Because web browsers have evolved a lot in the last years or...
4. C. Because a change in the old framework feels like this:
5. So you found a new framework... "This time it's going to be different."
6. Things are going great... • Trying & learning new stuff every day • No technical debt and haunting hacks • No need to refactor with every feature
7. This (framework) might be the one.
8. 2 years later...
9. Why do we have so many bugs?
10. Why is writing code so hard to debug?
11. Don't be naive. React is not your soulmate.
12. What makes a codebase go bad in time?
15. How to understand an implicit codebase: 1. Grep the entire project for that entity 2. Grep the entire project for the file name 3. Ask a friend, or... 4. ...read the entire source code.
16. You have to understand the entire project to figure out something in a module. This is not scalable.
17. A maintainable codebase is explicit and intuitive.
18. How do you write explicit code? • Dependencies should be expressed inside- out • Every module should expose a standalone, testable API • Every UI component should be an entry point.
19. Maintainable React UIs using Cosmos.js Bear with me...
20. ComponentTree Serialize and reproduce the state of an entire tree of React components.
21. ComponentPlayground Minimal frame for loading and testing React components in isolation.
22. Demo.
23. Thank you! // Ovidiu Cherecheș // Leading the Analytics UI at Hootsuite // ovidiu.chereches@hootsuite.com // twitter.com/skidding // github.com/skidding