React + X: Best practices for reusable UI components

Slides for my talk at the ReactJS meetup at Coursera on August 18, 2016.

The talk was recorded, so a link to the video is coming shortly!

https://www.meetup.com/ReactJS-San-Francisco/events/231692157/

Transcript

1. 1 React plus X Mars Jullian Senior UI Engineer Best practices for reusable UI components.
2. 2 Hi, I’m Mars. Senior UI Engineer @ I like reusable UI components (a lot).
3. 3 The challenge. • 2 products —> 3 identical dashboards. • Breaking out of the monolith —> different teams working on each dashboard —> different frameworks & build systems. • Brand & UX consistency —> Share & maintain the design & functionality across codebases easily.
4. 4 The solution? Reusable UI components!
5. 5 React: No templates needed.
6. 6 React: build UI in terms of components
7. 7 React: declarative framework
8. 8 React & Us • JSX / no templates —> less files per component • State & Props —> UI components can be independent of data source but still have full control over interactions. • Easily ported into different frameworks
9. 9 Reusable UI components should be… …self-sufficient …easy to integrate with
12. 12 Self-sufficiency
15. 15 Ease of integration
21. 21 Reusable UI components should be… …self-sufficient …easy to integrate with
23. 23 @marsjosephine Feedback: http://bit.ly/28Rb3aW