I have used Tamagui on a couple of POCs and demos, and can assure you this will 10x your results if you plan to support Mobile and Web. The design system is crisp and clean. Tamagui is a game-changing tool for universal app development. It consists of three components: Core, Static, and Tamagui.
Core is a lightweight style and design system library for React Native and Web. It offers features like themes, responsive styles, and styled() with variants.
Static is an optimizing compiler for both static and inline styles. It uses techniques like partial evaluation and tree flattening to improve performance. It also offers plugins for popular tools like Next, Webpack, Vite, and Metro.
Tamagui is a complete suite of UI components built using Core. It offers composable component APIs, size variance, and incredible themes that are optimized for different platforms.
Together, these three components make Tamagui a powerful tool for building universal apps that are fast, scalable, and easy to maintain. By using Tamagui, developers can focus on creating great user experiences without worrying about the underlying technical details.
Hey guys, I made Tamagui because there’s no reason we should have to accept clunky, slow apps when sharing code between React Native and Web. It has a pretty advanced optimizing compiler that’s been a fun (and challenging) project.
If you’d like a high level on how the optimizing compiler works and why its important, I wrote some here [0].
Happy to expand on any tech details. It’s not too fancy - Babel, AST analysis, logic to parse and normalize many expressions, then passing all static scope (even across module boundaries) to the underrated node vm[1] package.
If it can analyze all the props for any component statically, it flattens what would normally be a somewhat expensive React component into a simple div (or View on native), including ones with inline logic so you can write your components/styles naturally.
The tree flattening and focus on outputting CSS rather than JS is the real magic sauce netting big gains in performance all over - bundle size, startup, runtime.
We see a 15-20% increase in lighthouse score on the site homepage just by toggling the compiler on, with over 400 components being flattened (!)
4 comments
[ 3.0 ms ] story [ 20.1 ms ] threadCore is a lightweight style and design system library for React Native and Web. It offers features like themes, responsive styles, and styled() with variants.
Static is an optimizing compiler for both static and inline styles. It uses techniques like partial evaluation and tree flattening to improve performance. It also offers plugins for popular tools like Next, Webpack, Vite, and Metro.
Tamagui is a complete suite of UI components built using Core. It offers composable component APIs, size variance, and incredible themes that are optimized for different platforms.
Together, these three components make Tamagui a powerful tool for building universal apps that are fast, scalable, and easy to maintain. By using Tamagui, developers can focus on creating great user experiences without worrying about the underlying technical details.
If you’d like a high level on how the optimizing compiler works and why its important, I wrote some here [0].
Happy to expand on any tech details. It’s not too fancy - Babel, AST analysis, logic to parse and normalize many expressions, then passing all static scope (even across module boundaries) to the underrated node vm[1] package.
If it can analyze all the props for any component statically, it flattens what would normally be a somewhat expensive React component into a simple div (or View on native), including ones with inline logic so you can write your components/styles naturally.
The tree flattening and focus on outputting CSS rather than JS is the real magic sauce netting big gains in performance all over - bundle size, startup, runtime.
We see a 15-20% increase in lighthouse score on the site homepage just by toggling the compiler on, with over 400 components being flattened (!)
[0] https://tamagui.dev/docs/intro/compiler
[1] https://nodejs.org/api/vm.html