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. The Secrets of Building Robust UI Components Glenn Reyes · @glnnrys · glennreyes.com
2. Hello.
3. Glenn Reyes @glnnrys · glennreyes.com Software Engineer, Tech Speaker & Workshop Instructor
4. Building UIs
5. Building UIs is fun.
6. Building robust UIs is hard.
7. What is robust?
8. 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
9. Tooling Theming Building → →
10. Tooling
11. Better Tooling = Better DX
12. Better tooling keeps your codebase clean.
13. Better tooling keeps your codebase clean without the hassle.
14. Prettier
15. Find and fix problems in the code with no effort.
16. Aim for a deterministic source code.
17. Auto Sorting
18. Deterministic code makes code more reliable, predictable and consistent.
19. 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
20. Prettier @trivago/prettier-plugin-sort-imports prettier-plugin-tailwindcss
21. Build components in isolation.
22. Build components in isolation with component explorers. Storybook Styleguidist Ladle React Cosmos Codux by Wix
23. Source: react-ui.kadena.io Check for all UI states.
24. Set up and run automated tests.
25. Theming
26. Stephen Hay “We’re not designing pages, we’re designing systems of components.”
27. Design tokens Typography Color Spacing
28. Design tokens Typography Color Spacing
29. Design tokens Download Color Spacings Typography
30. Encourage creating Components for Layout & Spacing.
31. 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.
32. 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
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. gap: 24px Building robust UIs
34. Building
35. Atomic design
36. Atomic Design Icon Set by Mateusz Nieckarz on Dribbble
37. Button Input Select Card Icon Divider Body Text Heading Checkbox
38. Search Search this site
39. Search Search this site Home Articles About Contact
40. Search Search this site Home Articles About Contact
41. Search Search this site Home Articles About Contact
42. Component Drive Development
43. ↑
44. Search Search
45. Code
46. ↗ Try keep separate dumb & smart components ↗ Group related code parts together ↗ Build custom hooks if applicable ↗ Reduce the API surface to the bare minimum
47. React Component Props
48. <Button primary />
49. <Button primary secondary />
51. <Button appearance="primary" />
53. Boolean Type vs. Union Type
54. <PrimaryButton /> <SecondaryButton />
55. <PrimaryButton /> <Button primary /> <Button appearance="primary" />
56. Types for HTML element attributes
57. 😓
58. 🤨
59. 🤓
60. 🤩
61. Avoid exposing className and style.
63. Reuse types and interfaces.
67. Compound Components
68. Polymorphic components
70. Generics in React UI components
71. Component Usage Generics in React UI components
72. Overload function components
74. type vs interface
76. Reduced computational work by using interface.
77. Encourage type annotations. Especially return types, for faster compilation.
78. Source: github.com/microsoft/TypeScript/wiki/Performance
79. Avoid any. any → parse (eg. with zod)
80. Type assertions → Narrow type instead Avoid type assertions.
81. Avoid non-null assertions. Non-null assertions → Narrow type instead
85. Takeaways
86. Proper tooling
87. Craft a resilient design system.
88. Strict types encourages robust code.
89. Strict types encourages robust UI components.
90. Simplicity.
91. Always think for reusability.
92. Ensure well-designed UIs from the beginning.
93. @glnnrys Code with confidence to minimize the possibilities of errors and edge cases to nearly zero.
94. Thank You! @glnnrys · glennreyes.com linktr.ee/glennreyes