Type-safe design systems with React & TypeScript

I presented this talk on 18th of october 2024 at React Brussels Conference. It includes some animations so its better to view this on Google slides for much better experience.

Transcript

1. Have you ever experienced this?
2. Have you ever experienced this?
3. Have you ever experienced this?
4. Have you ever experienced this?
6. Its 2024, recreating the same button multiple times should be off the table. !
7. Type-Safe Design Systems with {React & TypeScript} React Brussels Conference Oct 18, 2024
8. • Software Engineer @ smotive • Love JavaScript Stack & Machine Learning • Frankfurt, Germany • Connect me on X (Twitter) @hmadhsan
9. Agenda - Understanding the Design System - How React with TypeScript combined helps us to build better design systems
10. What is Design System?
12. When you hear designers refer to a design system, they're referring to the design language & visual components. When you hear developers refer to a Design System they're referring to the component library. A Design System is both of these wrapped in a style guide 💻 -Emma Wedeking (@Emmawedekind)
13. Design System is a collection of shared visuals and reusable components to tie whole products together
14. WHY?
15. Dev is being told to create a new type of button for the 1000001th time
16. Also
17. Provide you with clearly defined standards
18. Reliability to rely on components
19. Much easier to grow and expand your application
20. Why Design System? Standards 🏛 Reliability 🔒 Growth 🌱
21. Let’s Code </>
22. 💪
23. Type Safety for Design System = 💖
26. Building Blocks of Design System with TS & React
27. Atomic Design
28. Atomic Design a methodology that helps in breaking down our UI into manageable pieces
30. How we can apply it to React Components with type-safety
31. Atoms in React Type-Safety: Now the label prop is guaranteed to be a string
32. Molecules in React Optional Props: placeholder is optional and TS ensures that component will work even if its not provided
33. Things to Avoid
34. Ignoring Type Definitions - Skipping type definitions for props or using any excessively can lead to run-time errors - Always define types for props & states and avoid using any
35. Overcomplicating Component Interfaces - Making component interfaces too complex can lead to confusion and misuse - Keep interfaces as simple as possible
36. Mixing Concerns - Combining too many responsibilities in a single component can make it hard to maintain and test - Follow SRP & break down components
37. Neglecting Accessibility - Don’t solely focus on type-safety & design - Use semantic HTML and ARIA attributes where needed.
38. Performance & Developer Experience
39. Enhanced Build Times Catch errors at compile time
40. Improve Code Quality Identifies issues early in the development process Leads to cleaner code
41. Intellisense & Autocompletion Helps developers write code more efficiently
42. Reduced Context Switching Ensure consistency across teams
43. Thank you 💖