Reusability: Sharing components with joy

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.

52132fbb1a8d6a1535ba5f8ed0edac56?s=128

Robin Frischmann

October 29, 2018
Tweet

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

  7. None
  8. None
  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

  37. 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
  47. 2

  48. 2

  49. The Problem 2

  50. 2

  51. 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
  55. 2

  56. 2

  57. 2

  58. 2

  59. 2

  60. 2

  61. 2

  62. 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
  66. 2

  67. 2

  68. React
 Hooks API 2

  69. 2

  70. Summary ✓ Design Systems & 
 Theming ✓ Composition over

    Configuration Reusing Presentation Reusing Logic ✓ Headless Components ✓ CRUD Components ✓ React Hooks
  71. Thank you! @rofrischmann