Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + X: Best practices for reusable UI components

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/

4dc1be409f2e104c83bbcab783d05509?s=128

Mars Jullian

August 18, 2016
Tweet

More Decks by Mars Jullian

Other Decks in Programming

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

  11. 11

  12. 12 Self-sufficiency

  13. 13

  14. 14

  15. 15 Ease of integration

  16. 16

  17. 17

  18. 18

  19. 19

  20. 20

  21. 21 Reusable UI components should be… …self-sufficient …easy to integrate

    with
  22. None
  23. 23 @marsjosephine Feedback: http://bit.ly/28Rb3aW