Secrets of building robust UI components - Glenn Reyes

1. Secretsofbuildingrobust
UIcomponents
@glnnrys

3. GlennReyes
Independent Software Engineer
React, GraphQL, Design Systems & TypeScript
@glnnrys

4. BuildingUIs

5. BuildingUIs
isfun

6. BuildingrobustUIs
ishard

7. BuildingrobustUIs
ishard

8. Whatisrobust?

10. 🧐

11. Stable
Reliable
Functioneffectivelyandreliablyundera
widerangeofconditions
ConsistentUX Performance
WhatmakesrobustUIs

12. Stepsofbuildingnewuserinterfaces
Tooling Theming Building

13. Tooling

14. =
Bettertooling BetterDX

15. Bettertooling
keepsyourcodebaseclean

16. Bettertooling
Keepsyourcodebaseclean
withoutthehassle

18. Findandfixproblemsinthecode
withnoeffort

19. Preferdeterministiccodestyle

20. AutoSorting

21. Deterministiccodemakescode
morereliable,predictableandconsistent

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

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

24. Buildcomponentsinisolation

25. Buildcomponentsin
isolation
with component explorers
Storybook
Styleguidist
Bit
React Cosmos
Wix Component Studio

26. Runautomatedtests
forUIcomponents

27. 100%UIstatecoverageiskey

28. Theming

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

30. Designtokens
Typography Color Spacing

31. Designtokens
Typography
Color
Spacing

32. Designtokens
Download
Color
Spacings
Typography

33. Componentsfor
Layout&Spacing

34. BuildingrobustUIs
Loremipsumdolorsitametconsecteturadipisicingelit.
Unde,doloremquemodi?Facere,aperiam.Obcaecati
laboriosam,laborumeiusvoluptatumquasieaque
maximeconsequuntur,facilisnumquamsitex,
praesentiumtempora architectoquibusdam.
Loremipsumdolorsitametconsecteturadipisicingelit.
Unde,doloremquemodi?Facere,aperiam.Obcaecati
laboriosam,laborumeiusvoluptatumquasieaque
maximeconsequuntur,facilisnumquamsitex,
praesentiumtempora architectoquibusdam.

35. Loremipsumdolorsitametconsecteturadipisicingelit.
Unde,doloremquemodi?Facere,aperiam.Obcaecati
laboriosam,laborumeiusvoluptatumquasieaque
maximeconsequuntur,facilisnumquamsitex,
praesentiumtempora architectoquibusdam.
Loremipsumdolorsitametconsecteturadipisicingelit.
Unde,doloremquemodi?Facere,aperiam.Obcaecati
laboriosam,laborumeiusvoluptatumquasieaque
maximeconsequuntur,facilisnumquamsitex,
praesentiumtempora architectoquibusdam.
BuildingrobustUIs

36. Loremipsum dolorsitametconsecteturadipisicingelit.
Unde,doloremquemodi?Facere,aperiam.Obcaecati
laboriosam,laborumeiusvoluptatumquasieaque
maximeconsequuntur,facilisnumquamsitex,
praesentium temporaarchitectoquibusdam.
Loremipsum dolorsitametconsecteturadipisicingelit.
Unde,doloremquemodi?Facere,aperiam.Obcaecati
laboriosam,laborumeiusvoluptatumquasieaque
maximeconsequuntur,facilisnumquamsitex,
praesentium temporaarchitectoquibusdam.
gap: 24px
BuildingrobustUIs

37. Building

38. Atomicdesign

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

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

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

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

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

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

45. ComponentDrivenDevelopment

46. Buildfromthebottomup

47. Search
Search
Buildfromthe
bottomup

48. Code

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
Quickwins

51. ReactComponentProps

52. <Button primary />

53. <Button primary secondary />

54. <Button primary secondary />

56. <Button appearance="primary" />

58. Booleantypevs.Uniontype

59. <PrimaryButton />
<SecondaryButton />

60. <PrimaryButton />
<Button appearance="primary" />
<Button primary />
vs.
vs.

61. TypesforHTMLelementattributes

62. 😓 😓

63. 🤨 🤨

64. 🤓 🤓

65. 🤩 🤩

66. BanclassNameandstylein
UIcomponents

67. BanclassNameandstylein
UIcomponents

68. Reuseexisting
typesandinterfaces

69. Reuseexisting
typesandinterfaces

72. CompoundComponents

73. Polymorphiccomponents

74. Polymorphiccomponents

76. GenericsinReactUIcomponents

77. Component Usage
GenericsinReactUIcomponents

78. Overloadfunctioncomponents

79. Overloadfunctioncomponents

80. typevsinterface
inReactcomponentprops

81. typevsinterface
inReactcomponentprops

82. Reducedcomputationalwork
byusinginterface

83. Encourage type annotations.
Especially return types.
helps with faster compilation

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

85. MoreTypeScriptthings
tohelp avoid badtypes
🚩 any → ✅ parse (eg. with zod)

86. 🚩 Type assertions → ✅ Narrow type instead
MoreTypeScriptthings
tohelp avoid badtypes

87. MoreTypeScriptthings
tohelp avoid badtypes
🚩 Non-null assertions → ✅ Narrow type instead

91. Takeaways

92. Propertooling
encouragesrobustcode.

93. Aresilientdesignsystem
encouragesrobustcode.

94. Stricttypes
encouragesrobustcode.

95. Stricttypesencourages
robustUIcomponents.

96. ThekeytorobustUIis
simplicity.

97. UIcomponentsshouldbe
reusable.

98. Take good care
from the ground up.
Saves tons of headache later.

99. ¡Gracias!
Glenn Reyes · @glnnrys ·glennreyes.com
https://speakerdeck.com/glennreyes/secrets-of-building-robust-ui-components