Introduction
Tamagui is a universal styling and design system for React Native and web that allows developers to share more code between platforms while improving performance, developer experience, and code maintainability. It aims to bridge the gap between web and native development by providing a single source of truth for design and styling, making it easy to build and maintain consistent user interfaces across different platforms.
Core concepts
CSS-in-JS: Tamagui uses a rich "CSS-in-JS" style system that allows developers to write CSS-like styles using JavaScript. This makes it easy to define styles that are scoped to specific components, and to use dynamic values from props and state in styles.
Optimizing compiler: Tamagui uses a babel and node-based optimizing compiler that parses and optimizes components, making it possible to generate atomic CSS that is highly optimized for performance. This means that the final CSS generated by Tamagui is smaller, faster, and more maintainable than traditional CSS.
Atomic CSS: Tamagui generates atomic CSS, which is a form of CSS that is highly modular and composed of small, independent, and reusable CSS classes. This makes it easy to create new components, and to make changes to existing components without affecting the rest of the application.
Performance
Tamagui's optimizing compiler and atomic CSS generation result in improved runtime performance and Lighthouse scores. The compiler uses babel to parse and optimize components, which it can get away with for performance largely because it only needs to parse a subset of your files, and it only needs to look for a few areas - namely JSX elements and styled() functions. During the beta Tamagui landed many performance improvements bringing average parse time down to below 6ms for a longer file on a modern laptop. Tamagui also avoids parsing many more files through quick heuristics which makes the performance even better.
Conclusion
In conclusion, Tamagui is a powerful tool for building consistent and performant user interfaces across different platforms. Its rich "CSS-in-JS" style system, optimizing compiler, and atomic CSS generation make it easy to build and maintain complex user interfaces, while also improving performance and developer experience. As we continue to dive deeper, we will explore more advanced features and concepts of Tamagui, such as dynamic inline evaluation, container queries, and more.