I've been pursuing something like Tamagui for many years now, this is technically my 3rd or 4th iteration on a compile-time optimized UI kit depending on how you count.
The motivation is simple: build apps with less code.
In react to do this today you have to sacrifice a lot: responsive design, themes, and general speed. None of the cross-platform UI kits do media queries or themes without resorting to JS, which hampers performance. Further, if you want a more modern API for themes, typed inline styles, media queries, etc, you sacrifice more performance. Our benchmarks[0] comparing Dripsy and NativeBase show 3-10x speed improvements, and that's not comparing stuff like media queries and themes which should be even more favorable.
Tamagui does all this with an optimizing compiler that lets you keep all the slick features without sacrificing performance. The compiler pulls out even inline JS logic into CSS on the web, or StyleSheet.create on native. It even flattens View/Text into div/span.
All that performance and platform-optimized-behavior makes a big difference, especially when building apps as apps tend to render many more components! It's also the only cross-platform UI Kit to support SSR.
Happy to answer any questions here!
There's actually a ton of room for continued improvement, and I'd love to set up some sort of sponsorship to keep realizing this. I think the current state of React is that it's tremendously powerful and well-designed, but actually releasing an app that runs on web + native is still a near-Everest type mountain to climb, and I hope to continue to change that.
This looks really neat! Love the focus on performance for mobile. The inclusion of linear gradient is also nice, since I've had to write code that seemed stupidly complex to get that working cross-platform before.
I've always been a frustrated by is how difficult it is to build a design system for React Native. It seems like no one who's done it has really open sourced much in the space. One thing I've often found missing is the ability to build an interactive showcase of a component library. Do you have any plans for something like that?
On a side note, I am a little skeptical of react-native-web. Admittedly, I haven't looked into it much though. Can DOM nodes be mixed with react native nodes? If not, the lockout from Normal react libs would give me pause. Also not sure if I'd trust it with components doing things like charting or animations. I'm still in that camp of people finding it easier to write React and React Native UIs totally separately.
It's a good idea, and in general I think a clear path to generally making frontend much easier so I'll think about it.
> Can DOM nodes be mixed with react native nodes?
Yep, they won't render on native but its totally fine to do if you're just targeting web. Theres only lockout if you want 100% sharing but it's easy enough to fork any component into web and native by having a `.native.ts` file.
Love the work on the webpack/babel configuration - really streamlined the crossplatform design system process. Do you have any thought on adding animation? So far looking through the source, I saw a couple code forked from NativeBase for animation that used the primitive Animated API. Wonder if the tamagui/core workflow could bundle reanimated2 and moti with it - will do an experimentation this weekends
I use reanimated in the app that Tamagui was born from and am friendly with Fernando, would love to get Moti support. Feel free to reach out to me or chat on the discord.
Good, react-native-web has nice accessibility built in, and we're building off react-native-aria for upcoming components. Long run we're looking to build up a nice set of accessible components ala Radix except cross platform.
I've been pursuing something like Tamagui for many years now, this is technically my 3rd or 4th iteration on a compile-time optimized UI kit depending on how you count.
The motivation is simple: build apps with less code.
In react to do this today you have to sacrifice a lot: responsive design, themes, and general speed. None of the cross-platform UI kits do media queries or themes without resorting to JS, which hampers performance. Further, if you want a more modern API for themes, typed inline styles, media queries, etc, you sacrifice more performance. Our benchmarks[0] comparing Dripsy and NativeBase show 3-10x speed improvements, and that's not comparing stuff like media queries and themes which should be even more favorable.
Tamagui does all this with an optimizing compiler that lets you keep all the slick features without sacrificing performance. The compiler pulls out even inline JS logic into CSS on the web, or StyleSheet.create on native. It even flattens View/Text into div/span.
All that performance and platform-optimized-behavior makes a big difference, especially when building apps as apps tend to render many more components! It's also the only cross-platform UI Kit to support SSR.
Happy to answer any questions here!
There's actually a ton of room for continued improvement, and I'd love to set up some sort of sponsorship to keep realizing this. I think the current state of React is that it's tremendously powerful and well-designed, but actually releasing an app that runs on web + native is still a near-Everest type mountain to climb, and I hope to continue to change that.
[0] https://tamagui.dev/docs/intro/benchmarks