Reusability: Sharing components with joy

Slides for my talk at ReactiveConf 2018 in Prague, Czech Republic.

Summary:
Reusability is often listed as one of the core benefits of component-based architectures. While in theory, it’s pretty straight-forward, in practice, writing truly reusable components is way more complicated. How do we customize styling? how to render to non-browser environments?
But, following some rules and patterns can help to minify the problems. Follow me along my quest to achieve maximal reusability and delightful component sharing.

Transcript

1. Reusability Sharing components
 with joy Robin Frischmann ReactiveConf, Prague 2018
2. Robin Frischmann @rofrischmann @rofrischmann Karlsruhe, Germany dm-drogerie markt
3. ? How do we reuse components?
4. Theory
5. Component Usage Output Button A Button B
6. Reality
9. Open Source Components
10. Presentational Logical Business Logic
 Behaviour Styling Markup stateless receive data as props often render children no dependencies stateful manage data & updates render presentational dependencies
11. Reusing Presentation 1
12. Heading1 Heading2 Heading3 Heading4 Text 1
13. :hover :active :disabled primary secondary Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me 1
14. Prague Capital of Czech Republic
 Karlsruhe Not a capital, but it’s ok
 <Img> <Heading4> <Text> 1
15. ? What makes a presentational component reusable? 1
16. Ability to adapt to many different use cases 1
17. Customisation 1
18. 1 Presentational Styling Markup stateless receive data as props often render children no dependencies
19. Style
 Customisation #1 1
20. Primary Button Button 1
21. Extending Styles 1
22. Extending Styles Prague Capital of Czech Republic
 1
23. Extending Styles Prague Capital of Czech Republic
 1
24. Responsive Styling width min-width: 320px min-width: 640px min-width: 1024px width width titleWidth titleWidth titleWidth imageWidth imageWidth imageWidth descriptionWidth descriptionWidth descriptionWidth 1
25. Responsive Styling 1
26. Responsive Styling 1
27. Responsive Styling 1
28. Responsive Styling !important 1
29. Design System &
 Theming 1
30. styled-system
 system-components 1
31. Theme @media screen and min-width: 32em px px 1
32. System Component 1
33. System Component 8px 16px 24px 1
34. Responsive Styling 0 1 2 0 1 2 1
35. Rendering
 Customisation #2 1
36. Prague Capital of Czech Republic
 <Img> <Heading4> <Text> 1
38. Prague Capital of Czech Republic
 Prague Capital of Czech Republic
 <Img> <Heading4> <Text> <Heading2> 1
39. Configuration 1
40. Composition over Configuration 1
41. Configuration 1
42. Composition 1
43. Composition 1
44. Flexibility Simplicity 1
45. Reusing Logic 2
46. takes Github username calls the Github API fetches a list of repositories sorts them by stars renders some cards 2
49. The Problem 2
52. Headless
 Components 2
53. Headless Components ๏ encapsulate logic ๏ don’t render UI ๏ call a render-function 2
54. takes Github username calls the Github API fetches a list of repositories sorts them by stars renders some cards renders some cards 2
63. CRUD*
 Components *Create Read Update Delete 2
64. My Addresses Hauptstraße 25 76131 Karlsruhe Germany Teststraße 220 76139 Karlsruhe Germany 12 John Doe Avenue Somewhere, Auckland United States Remove Remove Add Address Edit Edit Edit Remove 2
65. /customer/:customerId/addresses REST API GET POST /customer/:customerId/addresses PUT /customer/:customerId/addresses/:id DELETE /customer/:customerId/addresses/:id 2
68. React
 Hooks API 2
70. Summary ✓ Design Systems & 
 Theming ✓ Composition over Configuration Reusing Presentation Reusing Logic ✓ Headless Components ✓ CRUD Components ✓ React Hooks
71. Thank you! @rofrischmann