[HN Gopher] Show HN: Tamagui - React design systems optimized fo... ___________________________________________________________________ Show HN: Tamagui - React design systems optimized for native and web Author : nwienert Score : 39 points Date : 2021-11-23 18:59 UTC (4 hours ago) (HTM) web link (tamagui.dev) (TXT) w3m dump (tamagui.dev) | nwienert wrote: | Hey HN, author of Tamagui here. | | 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 | Sekhmet wrote: | Looks like gradient text isn't rendering properly on Chrome, | because it's missing -webkit- prefix on background-clip. | nwienert wrote: | Thanks, pushed a fix | bilalq wrote: | 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. | nwienert wrote: | Thank you! | | > Do you have any plans for something like that? | | 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. ___________________________________________________________________ (page generated 2021-11-23 23:00 UTC)