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

Secrets of building robust UI components

Glenn Reyes
December 12, 2022

Secrets of building robust UI components

React UI components can be written in many different ways and patterns. As your app grows, it’s common to increasingly introduce complexity and add up logic to UI components. In the sea of learning materials online, it’s a challenge to settle on a key strategy that lasts for your project.

Attendees will come away with a deeper understanding of how to build high-quality, maintainable user interfaces, as we unveil the secrets of valuable insights and practical tips for building robust UI components that can withstand the test of time.

Glenn Reyes

December 12, 2022
Tweet

More Decks by Glenn Reyes

Other Decks in Programming

Transcript

  1. Secrets of building robust
    UI components
    @glnnrys

    View Slide

  2. 👋

    View Slide

  3. Glenn Reyes
    Independent Software Engineer


    React, GraphQL, Design Systems & TypeScript
    @glnnrys

    View Slide

  4. Building UIs

    View Slide

  5. Building UIs


    is fun

    View Slide

  6. Building robust UIs


    is hard

    View Slide

  7. Building robust UIs


    is hard

    View Slide

  8. What is robust?

    View Slide

  9. View Slide

  10. 🧐

    View Slide

  11. Stable
    Reliable
    Function effectively and reliably under a
    wide range of conditions
    Consistent UX Performance
    What makes robust UIs

    View Slide

  12. Steps of building new user interfaces
    Tooling Theming Building

    View Slide

  13. Tooling

    View Slide

  14. =
    Better tooling Better DX

    View Slide

  15. Better tooling


    keeps your codebase clean

    View Slide

  16. Better tooling


    keeps your codebase clean


    without the hassle

    View Slide

  17. View Slide

  18. Find and fix problems in the code
    with no effort

    View Slide

  19. Prefer deterministic code style

    View Slide

  20. Auto Sorting

    View Slide

  21. Deterministic code makes code

    more reliable, predictable and consistent

    View Slide

  22. ✨ Separate config files per app


    ✅ Client: eslint-config-banana/react


    ✅ Server: eslint-config-banana/node


    ✅ Anything: eslint-config-banana (core)


    ✨ Enhance linting with type information


    ✅ More options for improved DX
    ESLint
    pnpm add eslint-config-banana —-dev

    View Slide

  23. Prettier
    @trivago/prettier-plugin-sort-imports

    prettier-plugin-tailwindcss

    View Slide

  24. Build components in isolation

    View Slide

  25. Build components in
    isolation
    with component explorers
    Storybook
    Styleguidist
    Bit
    React Cosmos
    Wix Component Studio

    View Slide

  26. 100% UI state coverage is key

    View Slide

  27. Run automated tests


    for UI components

    View Slide

  28. Theming

    View Slide

  29. Stephen Hay
    “We’re not designing pages,
    we’re designing systems of
    components.”

    View Slide

  30. Design tokens
    Typography Color Spacing

    View Slide

  31. Design tokens
    Typography
    Color
    Spacing

    View Slide

  32. Design tokens
    Download
    Color
    Spacings
    Typography

    View Slide

  33. Components for


    Layout & Spacing

    View Slide

  34. Building robust UIs
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Unde, doloremque modi? Facere, aperiam. Obcaecati
    laboriosam, laborum eius voluptatum quasi eaque
    maxime consequuntur, facilis numquam sit ex,
    praesentium tempora architecto quibusdam.
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Unde, doloremque modi? Facere, aperiam. Obcaecati
    laboriosam, laborum eius voluptatum quasi eaque
    maxime consequuntur, facilis numquam sit ex,
    praesentium tempora architecto quibusdam.

    View Slide

  35. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Unde, doloremque modi? Facere, aperiam. Obcaecati
    laboriosam, laborum eius voluptatum quasi eaque
    maxime consequuntur, facilis numquam sit ex,
    praesentium tempora architecto quibusdam.
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Unde, doloremque modi? Facere, aperiam. Obcaecati
    laboriosam, laborum eius voluptatum quasi eaque
    maxime consequuntur, facilis numquam sit ex,
    praesentium tempora architecto quibusdam.
    Building robust UIs

    View Slide

  36. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Unde, doloremque modi? Facere, aperiam. Obcaecati
    laboriosam, laborum eius voluptatum quasi eaque
    maxime consequuntur, facilis numquam sit ex,
    praesentium tempora architecto quibusdam.
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Unde, doloremque modi? Facere, aperiam. Obcaecati
    laboriosam, laborum eius voluptatum quasi eaque
    maxime consequuntur, facilis numquam sit ex,
    praesentium tempora architecto quibusdam.
    gap: 24px
    Building robust UIs

    View Slide

  37. Building

    View Slide

  38. Atomic design

    View Slide

  39. https://bradfrost.com/blog/post/atomic-web-design

    View Slide

  40. The most basic building blocks
    Atoms
    Button Input Select
    Card
    Icon
    Divider
    Body Text
    Heading
    Checkbox

    View Slide

  41. A composition of atoms in its smallest fundamental unit
    Molecules
    Search
    Search this site

    View Slide

  42. Groups of molecules joined together
    Organisms
    Search
    Search this site
    Home Articles About Contact

    View Slide

  43. Consist mostly of groups of organisms stitched together to form pages
    Templates
    Search
    Search this site
    Home Articles About Contact

    View Slide

  44. Speci
    fi
    c instances of templates with real representative content
    Pages
    Search
    Search this site
    Home Articles About Contact
    My thoughts on this conference

    View Slide

  45. Component Driven Development

    View Slide

  46. Build from the bottom up

    View Slide

  47. Search
    Search
    Build from the

    bottom up

    View Slide

  48. Code

    View Slide

  49. View Slide

  50. ✅ Try keep separate dumb & smart components


    ✅ Group related code parts together


    ✅ Build custom hooks if applicable


    ✅ Reduce the API surface to the bare minimum
    Quick wins

    View Slide

  51. React Component Props

    View Slide


  52. View Slide


  53. View Slide


  54. View Slide

  55. View Slide


  56. View Slide

  57. View Slide

  58. Boolean type vs. Union type

    View Slide





  59. View Slide




  60. vs.
    vs.

    View Slide

  61. Types for HTML element attributes

    View Slide

  62. 😓 😓

    View Slide

  63. 🤨 🤨

    View Slide

  64. 🤓 🤓

    View Slide

  65. 🤩 🤩

    View Slide

  66. Ban className and style in

    UI components

    View Slide

  67. Ban className and style in

    UI components

    View Slide

  68. Reuse existing

    types and interfaces

    View Slide

  69. Reuse existing

    types and interfaces

    View Slide

  70. View Slide

  71. View Slide

  72. Compound Components

    View Slide

  73. Polymorphic components

    View Slide

  74. Polymorphic components

    View Slide

  75. View Slide

  76. Generics in React UI components

    View Slide

  77. Component Usage
    Generics in React UI components

    View Slide

  78. Overload function components

    View Slide

  79. Overload function components

    View Slide

  80. type vs interface

    in React component props

    View Slide

  81. type vs interface

    in React component props

    View Slide

  82. Reduced computational work

    by using interface

    View Slide

  83. Encourage type annotations.

    Especially return types.
    helps with faster compilation

    View Slide

  84. https://github.com/microsoft/TypeScript/wiki/Performance

    View Slide

  85. More TypeScript things
    to help avoid bad types
    🚩 any → ✅ parse (eg. with zod)

    View Slide

  86. 🚩 Type assertions → ✅ Narrow type instead
    More TypeScript things
    to help avoid bad types

    View Slide

  87. More TypeScript things
    to help avoid bad types
    🚩 Non-null assertions → ✅ Narrow type instead

    View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. Takeaways

    View Slide

  92. Proper tooling

    encourages robust code.

    View Slide

  93. A resilient design system

    encourages robust code.

    View Slide

  94. Strict types

    encourages robust code.

    View Slide

  95. Strict types encourages


    robust UI components.

    View Slide

  96. The key to robust UI is


    simplicity.

    View Slide

  97. UI components should be


    reusable.

    View Slide

  98. Take good care

    from the ground up.
    Saves tons of headache later.

    View Slide

  99. 🙏
    Glenn Reyes · @glnnrys · glennreyes.com


    https://speakerdeck.com/glennreyes/secrets-of-building-robust-ui-components

    View Slide