$30 off During Our Annual Pro Sale. View Details »

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 for Building Robust
    UI Components
    Glenn Reyes · @glnnrys · glennreyes.com

    View Slide

  2. Hello.

    View Slide

  3. View Slide

  4. Glenn Reyes
    Head of Developer Relations at Kadena


    React, GraphQL, TypeScript & Design Systems
    @glnnrys · glennreyes.com

    View Slide

  5. Building UIs

    View Slide

  6. Building UIs


    is fun.

    View Slide

  7. Building robust UIs


    is hard.

    View Slide

  8. What is robust?

    View Slide

  9. Adaptability & Flexibility
    Minimum surface area

    API Design

    Accessibility

    for those relying on
    assistive tech Extensive

    Testing
    Documentation
    Fail-Safe Mechanisms


    Fallbacks or default states


    Performance
    Error
    Handling

    View Slide

  10. Tooling Theming Building
    → →

    View Slide

  11. Tooling

    View Slide

  12. Better Tooling
    =
    Better DX

    View Slide

  13. Better tooling


    keeps your codebase clean.

    View Slide

  14. Better tooling


    keeps your codebase clean


    without the hassle.

    View Slide

  15. Prettier

    View Slide

  16. Find and fix problems in the code


    with no effort.

    View Slide

  17. Aim for a


    deterministic source code.

    View Slide

  18. Auto Sorting

    View Slide

  19. Deterministic code makes code more
    reliable, predictable and consistent.

    View Slide

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

    View Slide

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

    prettier-plugin-tailwindcss

    View Slide

  22. Build components


    in isolation.

    View Slide

  23. Build components in isolation
    with component explorers.
    Storybook
    Styleguidist
    Ladle
    React Cosmos
    Codux by Wix

    View Slide

  24. Source: react-ui.kadena.io
    Check for all UI states.

    View Slide

  25. Set up and run


    automated tests.

    View Slide

  26. Theming

    View Slide

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

    View Slide

  28. Design tokens
    Typography Color Spacing

    View Slide

  29. Design tokens
    Typography
    Color
    Spacing

    View Slide

  30. Design tokens
    Download
    Color
    Spacings
    Typography

    View Slide

  31. Encourage creating


    Components for Layout & Spacing.

    View Slide

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

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

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

  35. Building

    View Slide

  36. Atomic design

    View Slide

  37. Atomic Design Icon Set by Mateusz Nieckarz on Dribbble

    View Slide

  38. Button Input Select
    Card
    Icon
    Divider
    Body Text
    Heading
    Checkbox

    View Slide

  39. Search
    Search this site

    View Slide

  40. Search
    Search this site
    Home Articles About Contact

    View Slide

  41. Search
    Search this site
    Home Articles About Contact

    View Slide

  42. Search
    Search this site
    Home Articles About Contact

    View Slide

  43. Component Drive Development

    View Slide


  44. View Slide

  45. Search
    Search

    View Slide

  46. Code

    View Slide

  47. ↗ Try keep separate dumb & smart components


    ↗ Group related code parts together


    ↗ Build custom hooks if applicable


    ↗ Reduce the API surface to the bare minimum

    View Slide

  48. React Component Props

    View Slide


  49. View Slide


  50. View Slide

  51. View Slide


  52. View Slide

  53. View Slide

  54. Boolean Type vs. Union Type

    View Slide





  55. View Slide








  56. View Slide

  57. Types for HTML element attributes

    View Slide

  58. 😓

    View Slide

  59. 🤨

    View Slide

  60. 🤓

    View Slide

  61. 🤩

    View Slide

  62. Avoid exposing

    className and style.

    View Slide

  63. View Slide

  64. Reuse types and interfaces.

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. Compound Components

    View Slide

  69. Polymorphic components

    View Slide

  70. View Slide

  71. Generics in React UI components

    View Slide

  72. Component Usage
    Generics in React UI components

    View Slide

  73. Overload function components

    View Slide

  74. View Slide

  75. type vs interface

    View Slide

  76. View Slide

  77. Reduced computational work

    by using interface.

    View Slide

  78. Encourage type annotations.

    Especially return types, for faster compilation.

    View Slide

  79. Source: github.com/microsoft/TypeScript/wiki/Performance

    View Slide

  80. Avoid any.
    any → parse (eg. with zod)

    View Slide

  81. Type assertions

    Narrow type instead
    Avoid type
    assertions.

    View Slide

  82. Avoid non-null
    assertions.
    Non-null assertions

    Narrow type instead

    View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. Takeaways

    View Slide

  87. Proper tooling

    View Slide

  88. Craft a


    resilient design system.

    View Slide

  89. Strict types

    encourages robust code.

    View Slide

  90. Strict types

    encourages robust UI components.

    View Slide

  91. Simplicity.

    View Slide

  92. Always think for


    reusability.

    View Slide

  93. Ensure well-designed UIs

    from the beginning.

    View Slide

  94. Thank You.
    Head of Developer Relations

    at Kadena
    Glenn Reyes

    @glnnrys · glennreyes.com

    View Slide