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.

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