Nate Wienert - Tamagui: A performant UI Kit for Web + Native

developments soak complicated and there's so many if you're just someone who wants to be creative and build ideas and like build and design out your dreams I don't think it's ever reached the point where it's just doable so I've been working on this thing called tamagui for the last couple years I guess really but it's kind of like a full stack like component kit style system um and like optimizing compiler [Music] hello welcome to the devtools FM podcast there's a podcast about developer tools and the people who make them I'm Andrew and this is my co-host Justin hey folks Our Guest today is Nate weiner Nate is the creator of tamagui which is a UI kit for building cross web react native apps Nate it's really awesome to have you on uh before we dig into the episode though would you like to tell our listeners a little bit more about yourself yeah sure thanks for having me um I guess uh yeah I don't know I've just been like tinkering with um with like making apps and stuff since I was like you know in high school um kind of like came on board with um I think I actually just hired some guy to do like a PHP website for me once because I could I was doing like just design and like a basic HTML and I couldn't figure out how to do back-end and then just very slowly worked my way up into like rails eventually I think that was like a big turning point for me where I was like oh I can actually build stuff and I think like the theme of my entire like Development Career has just been that I feel like it's development soak complicated and there's so many like if you're just someone who wants to be creative and build ideas and like build and design out your dreams it's never like I don't think it's ever reached the point where it's just doable even if you're decent at programming like even if you're a really good programmer today like myself like I I still don't feel like I can quite like pick up something and just build uh that thing without maybe spending like months and months and like dealing with so many unnecessary complications so I think in some way or another I've been trying to help that come along and I think you know that dream of kind of rails I think rails was the closest I ever got to like I can ship you know something that I can imagine within like a a few months or something like that and actually have it be be nice and so I've been working on this thing called tamagui for the last uh yeah last couple years I guess really but it's kind of like a full stack like component kit style system um and like optimizing compiler that kind of I think you know one of the big I think problems in building a cross-platform app that runs on Native and web is that you end up with either sacrificing a lot like sacrificing the intuitiveness of how do you style and then or if you do get a really nice style Library um then you end up sacrificing performance because that side library has so many abstractions and so that's what tomagu is trying to solve is like if I can have a nice style syntax but also not have it be like terribly slow on the web and use actual like web Primitives that would be the the dream so trying to make it work um and and yeah I guess that's kind of like a high level view so we'd like to thank raycast for sponsoring our podcast raycast is an app for Mac that's like Spotlight with superpowers besides just quickly opening file files URLs or apps it provides clipboard history window Management schedule overview and more it also has a clean react-based API and an extension store to distribute your own custom extensions raycast has lots of cool things built in but the community provides a lot of extensions that are even cooler one of the most useful use cases for an extension is actually within your own team though with a custom raycast extension you can codify your team's workflows and all the information your team needs to access about the projects you work on an example of this I recently saw on Twitter is a developer from the storybook project Varun took all of storybook's design system and tokens and put it into a raycast extension with just a keystroke you can access any of those values and copy them to your clipboard you can even convert between color values and color representations yeah and to add to that you should also try raycast Pro that's their premium feature but with Pro you can take advantage of raycast AI which is extremely awesome because it lets you do all kinds of typical AI tasks in line with whatever app you're using on your Mac so you can summarize text or translate text a lot of really cool functionality there you also have other interesting features like Cloud sync so if you have multiple Macs you can sync your raycast configuration across different apps and it gives you things like custom themes so it's really cool you should definitely check it out to learn more you can visit raycast.com or you can go listen to episode 38 where we talk to Thomas the CEO about the product and how it's built this is a pretty awesome Endeavor so when I worked at artsy we had a react native app and a web app and we tried to do sort of the same thing so their design system palette is we wanted to share across platforms and eventually just split them but it's interesting because you're right there's a lot of interesting challenges so like we evaluated like react native web back in the early days and that there are just a lot of trade-offs and you know some of the old Solutions were pretty clunky so I'm curious uh had you had you tried this before like on some product that you're working on before you started tomagui um and sort of what led you to the approaches that you've taken so far um yeah so I yeah I mean in a sense I I've worked on this a few times like I think tamagui you could consider it almost my third or fourth try I had some sort of like UI system like this um but there uh I was working on something that was similar to react native before react native exists but it was more similar to Cordova maybe but like really trying to replicate the iOS look and feel like almost perfectly just using like react um which was very complicated so that was kind of a first attempt and then I met up with a co-founder uh through that and we raised money um through like really good investors I moved to the Bay I had never been I never lived you know in San Francisco or anything but I moved to the bay to do that startup it was a Dev tools focused startup um and it was uh also had like uh I mean it was a little bit more ambitious it was maybe like we we modified um we actually modified JavaScript we took Babel and forked it and added like a view keyword and then inside of there you had have these reactive variables and there was a whole compiler set up it was a little bit like view or sorry like spelled I think it was like three years before sevel existed there's a cool demo video on YouTube I can I could link it it was called motion and we actually built it out it was really interesting like the HMR was as you typed like it was so fast you could just keep you could like tweak values in real time it had a compiler that pulled out CSS from like Dynamic values even um so it had like kind of that similar idea behind it um and it just didn't end up going anywhere for various reasons uh but what's one cool like side note from that is that um when we first were showing that demo video off to people we started getting like kind of a bunch of people in our our slack at the time and like a bunch of people were getting interested and I remember like Evan U of Vue joined our slack and he was like this is so this was like I think before Vue even was called view or something it was like maybe it was version one or pre-version one and he's like can I take some of these ideas and we were like yeah go for it so it's kind of cool like I think you know we didn't end up launching the project but there was some influences I think down the road uh that it had on on the on the ecosystem so but yeah long long story short is that I definitely um have tried this a few times uh I was booting up a new project at the end of the pandemic um and it needed to have native support so I was kind of like well you know I had this UI kit the last version of it that I had tried which was just for a nap before that that I was working on it had gotten too bloated and it had gotten kind of like I had thrown in a it's really hard to design these things because down the road you try and like do something and then you end up like realizing that the whole fundamental design like you know the CSS the whole CSS problem of like merging Styles down uh cascading Styles it was like I was trying to get it to like be very correct and I just literally couldn't fix some of these features and so I had to rewrite it using Atomic Styles and then I realized that some of the way I had done some of the features in that last UI kit The Styling system the the wouldn't really work with atomic Styles I at least I ended up in this giant mess of a refactor where I was like you know what at this point I'm just uh I'm just gonna bail on that one so um so yeah so then tamagui was kind of like okay let me start over again of course uh and I I grabbed jsx style which was this uh library that had already existed that had a compiler because I I kind of knew that like if I'm in a bridge native in web um it's like it already was like my UI kits were already slow just doing web boldly uh without a compiler so it's like it's even more so needed it um and so that was kind of the Genesis of the library so uh like for our listeners who don't actually know like how does it like work in the end like uh what is rendering to Native and like how do you translate that to to web also um yeah so it's it's basically it was originally running on react native web so um same API surface as react native and react native web um so you basically have a limited set of style properties that are very they're basically identical to web style properties but like they're just limited you don't have stuff like background backdrop filter and these type of like more fancy props um but you have like all the basics um and yeah originally I just built off of react native web um and even rendered that but um there was a multiple things that were sort of like making that very difficult over time one was that just uh react native web refused to support class name and you know we're compiling to Atomic CSS and so it's like how do I Pat if I can't pass in a class name I literally was patching like I had a script that would go into your node modules and Patch react native web to make it work with a class name for for the first like six or year or something of like tomagui existing before when it was actually called something else and it was very small but eventually I was like this is you know it's just like I can't really rely on um you know they they closed the issue saying like we're not going to support it which was in my mind a kind of a mistake and you know there's at the end of the day if you don't control the whole fundamental styling system of your library then it's kind of so so I ended up slowly like moving it off it was a huge amount of effort but now it's based basically its own style Library it's native runs on Native and web like on Native it outputs to um you know like a stylesheet.create or just objects basically and it passes those objects in as as a style property and then on web um the one one big thing behind tamagui is that it's um it's not like zero runtime on purpose um just because setting up a compiler and a compile step is always such a big commitment and a risk almost too because like you have to trust that like this compile time process is working um and I wanted it to be easier to like run without it so like it it runs completely at runtime as well as at compile time so you can just plug it in without any compiler setup and use it and it'll output class names but you know it generates the CSS and inserts them on the fly or at startup kind of depending on if you use like a styled component versus an inline style but then if you do plug in the compiler it will analyze you know everything and it'll pull out CSS at build time and do a bunch of other nice things to kind of optimize and uh a few other things that we can get into so I'm assuming react native web didn't want to support class name because like there is no like native version of that on uh react native so like did you have to solve it the opposite way too now that you have class names do you have to make those work on the native components and like is that like a subset of CSS basically it's a good question um but the answer is just really like that the class name just is uh no op basically on Native I mean class class name is basically an escape hatch for web which I actually use it all the time it's nice you can just go write some CSS like you can do like you can add your own little like add-ons like Tailwind style almost like I just add a bunch of little things that aren't supported on through the react native Like official API and I use class name as my like way to Target web now there is like a platform selector where you can do Platform web and platform native and platform iOS and do like specific styles to each one um but still you don't get like you know that's still limited to the style properties that it supports so um so yeah it's it's a no-op on web Expo is working on some interesting stuff right now they seem to have gotten like a CSS working for Native and they're working on and I think they've built that in order to get like some Tailwind type stuff working um for Native so you can do like tail and class names and um it's a it's also a limited subset of CSS and uh from what I understand it also doesn't Cascade so there's no c um just CS uh but yeah so there's some differences there but it seems like we may get some sort of like form of CSS the whole point of tamagui is kind of not to do CSS uh like I'm a big inline Styles Maxi like even like Tailwind right kind of admits like you're sort of like I like the the component like react component model combined with like local Styles as I think is a really beautiful setup so it's kind of funny to see that that happening but it but it makes sense yeah I have a lot of opinions in this space I've done lots of design system stuff and I do like tailwind and I also like scoped CSS modules I think they really mix well together like when you're designing components you don't want to design some things in like sometimes width or spacing or all these other things things and I think utility class names are like such a nice bullet for that but uh you could easily argue that if they were just like style properties like you have it would work just the same but like combining those two things I think creates like the most ergonomic design system for sure yeah I mean I think that I mean I I actually people say like you know can we get like some Tailwind support in tamaguyan and that's possible like I definitely have been thinking about adding like a library that's kind of like Maps Tailwind so you can just use like the exact same props it probably would be good for that adoption and stuff but the uh the inline props especially because there's a short there's a concept of short hands in tamagui I mean you can basically get the exact same experience where it's MX equals like whatever um you know P or all the different like shorthands you I the default ones that we have are basically the same um kind of like same same idea and what I like is that you get types too so you get like it's it's you know typescript uh Auto completes with your just editor without any sort of special plug-in there's so many many benefits I mean like you can like you know destructure them as props and then and then play with them and change them and then put them back onto props and and like you also get like nice merging I think with tamagoo which is I have to plug a little bit but yeah you get nice merging which is like the order of the props is important so uh that was like a big realization at some point because for example we have variants I don't know I don't want to like get two in the weeds maybe if people aren't familiar but like if anyone who's worked with stitches it's just a way to like expand I'm sure maybe Tailwind has something like this too where you can like shorthand for like an expanded amount of um styles maybe they don't I don't know but um but basically like you can have a shorthand that's like you know uh huge or something like and if it's set to true then it expands to be like you know set the radius at the a bunch of other properties maybe the scale but the problem is then like you want to be able to control that and like um like override say like if I want to override like expand that but then override one thing um I realized at one point that like if as long as you make those the prop orders significant to The Styling so system so you can have huge and then the next line you could have like maybe set the Border top right radius to zero if you just want to have like a sharp edge or something like that and uh so that was kind of like a big thing that and it lets you do this really nice thing where you can kind of like have an API surface where your component lets external users override some Styles but then like maybe you control the rest of the Styles and stuff like that yeah it's nice that it's uh enforced by typescript there's a utility called Tailwind merge which is like it kind of does the same thing like order inside of the the arguments matters and it'll override previous classes but it's a lot nicer if it's just like built into the programming language and you don't have to like think about it at all I'm just curious with merge like how uh because like you would have to like string split like if you wanted to do something like manipulation in the middle right it's kind of weird not ergonomic at all no it's kind of rough um artsy was using uh style components and styled systems you know and there are some obvious like performance trade-offs there but I do think this approach is really interesting because the time types in particular helped a lot it does make it very explicit and and kind of terse which is nice and also you get documentation for it too so just like hover over and see what it is funny thing that we're running into now is that uh typescript can't handle it at a certain level because you can Nest these styled components there's so many properties if you think about it because it's like hundreds of style properties and then you have pseudo Styles I hover press and then you have media query Styles like um so so that's multiplying and also you can have a media query with a pseudo style like so like if it's a big screen plus hover right so then that's another multiplication of all those like types and then you can Nest them so you can like styled styled style you know keep nesting those and each time it's adding more so at some point like it's actually like we're at the very like Tipping Point where I've tried to add features and I run into things where like if you Nest five times you get the like cannot recur like what is it the in like it may be infinite depth excessively yeah it's in pain in my existence that that air that's when you know you've won programming though as you uh you run into that compiler error yeah and you're not actually infinite yeah it's not nowhere near infinite uh so one of the cool things that tamagui also provides it has that base layer of styling but it also provides a lot of components and the components remind me a lot of Radix uh but I'm really interested to know how they actually work like are you using Radix underneath or do you have to like implement it in such a way that you can do it on um yeah I was definitely inspired by by is it Radix I've been calling it Radix I'll go with Radix though but I've never actually heard someone say it out loud so I have no idea uh but yeah I mean it's it is rad so that would make sense um no they're amazing I mean they did such a great job with that Library I was very inspired I love the composable components API I think it's genius I think that's like I mean especially like it's just it's kind of like the one of the hardest problems in styling or like in front end is just like how do you provide an API surface but also let people like customize every part of it and you know in the past people you've had something maybe like where you have like a prop that's like text props or inner you know frame props or something like that and you you just take all these sub objects but that's just it doesn't nearly give you what you need because it's just like how you want to Resort maybe like the inner contents right you want to just you want to flip the ordering or or you want to like Nest them multiple times it's just like it immediately runs into like impossible problems so I think Radix was great um the obviously yeah for Native I couldn't just use them or I would have and there was an option maybe to like write it twice but obviously you know the point of time ago was to try and see if you could bridge that nicely and react native does and react native web do give you those nice apis um or that that API surface gives you a lot of the stuff you need to implement it so my process was actually um to most of the time just to steal like to take the source obviously leave the licenses in place but and then to like rewrite it um but use kind of a similar structure so like a lot of the tamagui components started as like you know we need this let's think of the right way to do it maybe for Native some of them are a little different and like how they actually work or or what they do but a lot of them are very similar and even started out as just like taking the Radix Source kind of stripping it down re-implementing a lot of the insides um and then getting it to work with some of the more tamagui like style ideas um and uh yeah it's been really nice so like yeah so it definitely even the website I think we took some of the ideas from like I think I even took some of the website like documentation like the the show code and some of the toggles and stuff like that was just you know great artist steel um but yeah shout out to the that team and I think they did a really good job and there's some differences like uh Tom agree didn't start out as unstyled um but it does have an unstyled prop now for almost all the components so you can basically take the Styles out um I think for version two we're sort of thinking about going fully like having like an option just to import it as unstyled basically um or yeah just to bring your own Styles a little bit more cleanly uh but we're almost there basically have it almost working um and then there's some like cool stuff that's come from that Radix style approach which is like one of the big things that I think is one of the coolest parts and I just haven't done a good job of like talking about it or demoing it I've got like some cool demo videos for sure that I think we could put out that would show this but I'll get this idea of an adapt component that it if you Nest it inside of your like certain components you can adapt them to other components at certain for certain platforms or certain media queries so for example like a modal or a popover you can adapt into a sheet uh if it's on like a touch device or something like that and then it'll actually portal the contents so it's kind of cool like you you just have this like one big thing that's like um you know your portal and all has all the contents and everything you need it and then inside of that you just put adapt and then you put sheet and then you have your sheet all your sheet com components which are also Radix like so you can customize all the sheet stuff and then you just inside of the sheet where you want to portal it you put like adapt.contents and uh it's pretty cool it like magically turns from a from a pop over into a sheet on a small screen or something like that and uh the amount of like stuff that that's doing you know compared to like if you're trying to implement that yourself is is insane but also I just think the Radix like that flexibility like where you can you can fully customize both of the sheet and the pop over and then adapt them into each other because they're nested composable components like that it's like I think it's that's it's a really cool like maybe one step it's like unlocked by the Radix API but also kind of working in a new way that's pretty cool yeah I remember reading like five years ago uh like that composability and react was like what you should shoot for and it like boggled me but then uh once I started building Design Systems and found like the uh the sub component pattern it changed it all I was like oh my God it all makes sense like I can just add twips to things uh I was going to ask you about how the styling works because styling on the different platforms is far different and if I'm creating this like shared the system do I like am I giving up some of the platform specific styling or do I still yeah so well I mean part of that yeah I mean you definitely are constrained to the style of properties but you have obviously like we kind of touched on with class name and stuff you do have Escape patches you also have platform specific style selectors now which is a new feature just to maybe like a month ago that we landed um so you do that that actually is pretty nice um and then I think there's also in just react um Native in in general they have this idea of like actually just fully forking things by using a file extension so dot Android dot web.ios.native so we use that like even internally in time ago for example the popover is um actually just well it uses floating UI which is shout out to floating UI amazing Library by the guy who made I think it was what was it called before that like uh popper I think property yeah I think his name is James I don't know if I remember his full name right now but uh but yeah I mean he's done this before and it's such a good like library but it works on Native and web but they're like you know there's different levels of support so for example for that component we have like a DOT native version and they share a lot of things but they also diverge in in a few significant ways and and I think that's like a nice like kind of escape hatch so yeah the Escape hatches in tamagua are pretty good you have on the if you just need like different styling you have the style selectors if you need like web specific styles that aren't supported you have class name um and I guess you could use an inline style prop because style property technically will accept like any style valid style as well um and then yeah and then you have the file extensions for complete Divergence yeah an interesting thing that we'd always had a challenge with was um so some of the the there are some nuances with like the flex layout and react native that can be sort of weird and require like different markup that was always one Challenge and the other thing was it was sometimes hard to build uh accessible web UI like you had you had to be very careful and doing that because it was really easy to leave it out and especially depends on who was building the component and what experience they had so it was like a few different things of like ending up with sort of weird markup depending on the platform you're targeting and sometimes that created a split um platform specific features like accessibility things dropping out um do you have any recommendations for people so let's say they're they're picking up tamagui and they're like building out a product with it like about how to sort of approach some of these like platform differences or how to think about developing across all these platforms yeah that's great uh a great kind of like interesting point there's like a lot to it I think um I would say well one thing is that definitely react native web and in general react native are getting better about a lot of this stuff like you touched on the flex differences I think the new the newer versions of yoga they've they had like a much more there's like you can you can opt into the newer like mode that's much more consistent that's pretty cool um on the like accessibility prop side react native and react native web are both moving towards supporting much more like standard web properties so the Aria properties are Now supported um uh data attributes are Now supported kind of in a standard way they're they're definitely like you know they had a bunch of like they had like these weird properties like data set or like accessibility props that were different and uh now they're deprecating most of those and moving to like web web looking ones which is it's very nice we use Aria properties internally um I think there's a suite of hooks called like react Arya I believe that's cross-plat that does work on Native as well um so probably if you're like also concerned about really getting a high quality there you could check those out um tamagui tried to I tried to keep all the Radix accessibility stuff in place as I adapted it to Native so it I'll admit that it's not the best tested you know like um but we do have really good pretty good keyboard controls and all this sort of stuff like uh um you know there are abstracted like one nice thing about react native is that it abstracts those apis like keyboard apis are kind of standardized across platforms and stuff like that so um but yeah I mean um my recommendation is actually usually just to to just build it for one platform I mean like it's pretty rare that your first version of your app needs to be cross-platform um the nice thing about tamagot is that you have that optionality and I really think that like uh one one thing that I have to get around with tamagui is like people maybe see it as like oh well that's only good if you're just doing both if you're if you're just doing native and web then use time ago you otherwise you know probably use something else but I really do think that it competes with anything like any pure web Library I mean you know some people may like not like this idea of using class name for some stuff but I mean the the other features in time of year are just really there's like some really really well hard fought kind of like abstractions and features that are in some of these components um and like the style system in general I think is kind of on par with most style systems in terms of like you know the type coverage the feature set it's really complete it's quite fast and I think when you add in the optimizing compiler which is pretty unique you actually can get faster runtime performance than almost any other like even just like the really pure web Focus like even the zero runtime web Focus sort of stuff uh yeah maybe like the pure zero runtime like web focused ones that that uh don't they where you don't abstract a lot of things and you're just using them straight straight up but I think what's nice about tamagui's styled system thing is that it you're allowed you can build up this vocabulary and build up these variants and these like abstractions that are that are very like nice and elegant to use but you're not actually paying the cost of like an extra layer of rendering depth of like a react component that's sitting in between you and your div because the optimizing compiler just reads that all flattens it out into a div again um and so what I found is like yeah on the on the website um on the home page there's like one of the little sections um because there's you know all these different sections on the home page that show each of the different like kind of features and like in just the responsive features section it's like over over 600 flattened components so you're literally not rendering 600 react components on on Mount and it it makes our Lighthouse score I think like uh it's 15 or more uh Improvement just by like flipping a switch but it's also like the lighthouse scores maybe even not in the best Improvement because Lighthouse is actually maybe more sensitive to like the amount of JavaScript you run and that's where like zero runtime really like helps whereas Tom agree core is about 20 kilobytes of JavaScript and we also add the website has every possible combination of features shown on the home page because we're trying to show off all the you know all the stuff and all the components um but the runtime performance is where it really shines because like you know it you don't pay that cost on the next renders and like if you have a lot of elements you know being rendered out um you can feel it and it's pretty cool to turn it on and off and like oh wow this whole area just feels like much faster um so yeah I don't know where I started on that answer but uh just just plugging it in I guess yeah like yeah like there's these differences in Native and web and like I think Tom agree does give you some Escape patches but um yeah I definitely I definitely want to counter this like I I would love to see I need to make it easier maybe because the setup process can be you know you have to like I said we use those platform extensions for example like dot web um and we also have like an environment variable that you have to set to like tell it which environment you're in and I would like to get rid of those too like that would be cool next steps is to have like at least a form of it where like it's just plug and play there's no build step there's no like environment variable I think that would probably be the next step to really get like especially web users who just you know you don't want to fuss around with the configuration if you're just trying to throw together like a landing page or something so I want to dig more into the optimizing compiler like how how determining what not to render because like in my experience most the react components I write like I feel are necessary to render the page so how does the compiler choose what and what not to add or remove yeah so it is limited to tamagui components right so it's not optimal advising anything outside of the tamagui world it which is you know I think it's fine if that's that's a good limitation that would be a very different project if we were just trying to optimize like any type of styling um but yeah I mean it and it does de-opt in a certain in like various cases so like Dynamic styling if you spread for example props you know if you're spreading props onto one of your Atomic reviews then obviously we have no idea what those props are um so if it was a div then things would just fail so we de-opt on stuff like that um on Native it doesn't optimize as much because you know like on the web we can assume that they're CSS variables so uh there's a lot of fancy stuff around I mean there's a lot of like hard thought work because you can plug out for example animation drivers um and some animation drivers like the react native animation driver doesn't support CSS variables so we actually have like all this crazy like amount of work that's like the optimizing compiler needs to know that if there's an animation on this uh component um that it can't flatten it all the way right but but if it's a CSS driver it still can flatten it because it's CSS so it can assume that and then at the same time there's like these like very intense like complications between like theming and like if it's using like a raw value for this animation driver it needs to track that and and know that it so like basically there's a lot of complications there but but it's on the web it optimizes a lot more because um CSS variables and media queries can be extracted and and stuff like that so you can basically like assume a lot um and then it just does like some analysis so it just Loops over all the properties it try it even does try to do like using the node VM module that tries to actually partially evaluate things so like you can do turnaries nested turnaries like object spreads as long as it can analyze them you can you can even have like abstracted things where you pull out you know some props into a different file or into a up above you know in the in the outside of the render Loop or something you can have like an object um that even references other object like it's trying to do some actual like real analysis um using a combination of like Babel and the node VM package um to like to grab all the like the everything that's in scope and then like pass it to the node VM and try and run it and then if it comes back successful it says cool we've analyzed everything we can understand all the properties uh statically basically and we can flatten this into a div at this point but it can leave stuff like you know if there's conditional logic it still leaves that but it's just instead of like instead of like you know passing to tamagui it's doing like a class name so it's like you know this class name equals this plus conditional that class name concat it together et cetera et cetera that's awesome another feature that you show off on the home page and I've had various challenges is with it's just helping smooth out animation can you can you talk about like how yelt approach animation and and maybe even for people aren't aware like what some platform specific issues you might have when you're trying to build something like this yeah the animations has been a whole journey uh uh it's one of those things like I said like like I alluded to that last UI kit um one of the reasons I think it failed was that like you know I built it one way and then later on I needed to add features and then you realize that those features just don't fit right and I was worried about that at the time it could be like I I had I was thinking about launching it I had it mostly working for what I wanted you know the design system the style library and everything um and at the time I didn't have any like animations at all and I had a choice like do I do no animations uh in the first version do I do maybe one type of Animation uh like just the obvious choice would just be the react native animated driver because that you know it's built into react native and it works on web and Native um but then of course there's this there's this animation library for react native that's very popular called reanimated um it's very clean and much nicer API it's definitely more popular with like maybe like people who are just into that you know react native World they love to use that because it's very fast and very cool um and and much cleaner apis right so there was always that looming and then there's also obviously CSS on the web just the built-in platform stuff which could also save a lot of bundle size potentially because the react native animated JavaScript is like 30 kilobytes like minified and g-zipped or whatever like it's a lot um to add in for just a website and so I was at this Crossroads like do I uh do I just ignore it or not and uh and just kind of worried me because like you know I could tell thinking about it with like the compiler it's like well what how do you even you know do that and so I decided to bite that bullet and I decided to go all the way it's just like classic kind of uh you know developer syndrome of just like well you know I've gotta try you know I've got to do it uh so I did end up implementing them they they didn't work well for like a lot of the life of tamagui like you know I think um there was always like some bug in one or some or the other and and uh it's been a it's been a long journey I think to get them mostly working and actually as of like just the last few months I think they've really come into their own actually that's what's cool is the website was running on the react native animated driver because that was kind of the best supported one and we've been I've been working with um with a little bit with Fernando uh Rojo who built a bunch of cool libraries are in the react World and he wrote this thing called moti which is kind of like a it it kind of abstracted reanimated for Native and web into a nicer API and he also he he exported this hook called use Modi basically that um that uh kind of like does all the low-level stuff for me so we rebuilt the reanimated driver using that and got it to be 100 passing on all the different like things that we needed um and I swapped it out in the website which is pretty cool like we literally swapped the entire animation system on the website and I don't think you can really tell like it it basically like you wouldn't know I guess unless you knew that we changed that out which was really awesome um but yeah I mean the problems have been uh there's a lot there's a lot to it I mean that there's a lot of like careful logic in the style system um for example like like I said like we need to track if they're accessing values in the theme um that are raw values versus CSS and so for so our our use theme hook and that powers the internal you know way that we access themes um and the way that people who use tamago you can access themes you know you can use use themehook or um it it does like uh tracking of what properties you access but not just the properties but whether or not you called to turn them into a CSS variable or into a raw value at the end and if you do track them as into a raw value it basically keeps track of it's a little bit like almost like a state system um that you would see like observable type State system where each component is tracking whether or not you're accessing any of these Dynamic values and then if so it has to listen to the theme changes and re-render when it gets a new theme change whereas if it's a CSS driver it sees that you're just turning into a CSS variable it doesn't track the theme changes and so you save like because the websites like this pathological case where you have a huge page of components like way more than you would maybe in like a typical mobile app um on one page and so it it's very sensitive like if I ever de-opt that um when you switch from light to dark mode for example which is like you know re-render the whole page in the in a typical react native type setup um I mean that's like really the flex I think of tamagui is like the fact that that home page of the website you can switch between light and dark mode and it doesn't really use much work um because the only thing it's rendering is some of the uh animated components um and changing out their um their like theme values but other than that it uh it basically doesn't have to re-render anything because it's tracking you know so that like the intersection of theming theme changing animations um and the compiler are like where things have got like that's where we've spent you know a pretty crazy amount of time trying to get them all working but um yeah I mean we could go on and on I mean there's so much detail to animations but I definitely want to like I think now we're at a cool part too because we could keep expanding like there's uh there's there's this animate presence library that we took from framer motion um and just kind of adapted that and it's so cool like it lets you do these really nice animations very declaratively and I think there's like many like further upgrades like timing and like the multi-step I guess multi-stage animations that we don't support but we could get that working across the different drivers that would be pretty cool um and uh yeah just like kind of like there it's cool now that it finally Works uh basically fully because I think now we are well set up to kind of like keep going and maybe get more like because you know CSS is very powerful with animations and we haven't really gotten to that level uh we just have the most basic stuff so yeah it seems like a lot of the features that you're working on work towards making shipping to all Targets just like trivial like I would never want to think about all this stuff if I were setting up both of these I would probably punt the issue far before getting to all the animation stuff so on the home page you mentioned server components those have been a Hot Topic lately uh how how does tamagui use server components I'm I'm interested um you know what's funny actually I may need we do support it like as client as client um components so we do work with it and like we've adapted to like you know incrementally output styles for example in the way that they expect it and all this stuff um but originally I had tried to get full server support because that seemed obvious to me that like you know you want your UI components to be um be able to be run only on the server um I don't know it's a whole thing I'm not a big fan of react server components I I really am not actually uh I'm sort of maybe like one of the biggest opponents of it um for like a lot of reasons but one of them like a lot of reasons I mean the way it's being done is is a lot of it but also just the actual technical side of things and like to me I get the the desire and but I wish they would have come up with a much simpler implementation because I think what's really making it complicated is that um is that you have this like Dynamic back and forth where like you can keep going back to the server and re-rendering and you can keep and you can you can interleave all the props so like in such a complex fashion whereas I think if they had done something more like you can have this be a server component where it doesn't hydrate but then maybe you're not allowed to like you know do certain things like you can't pass you know certain things down or or you can't go back and forth multiple times or maybe you can just like only um you know you can't have a client that then has a server or something like there's like some limitations to how the tree is structured I think if there was some extra limitations where it didn't try to be so fancy but but my other critique is this is that like I want to not hydrate a lot of my my bundle but there's no reason to tie that to couple that to react server components like you know Islands or something is like a concept that a lot of police a lot of other Frameworks have started playing with but there's no reason that like react couldn't support like tell it that this component just can run on the server and never hydrate and just leave it um and like that would be that doesn't have to be like coupled to this entire huge change and I think so many apps that exist today as SSR apps would love to just be able to say like here's some markdown content you know that I'm rendering in react but like just don't hydrate create this like I don't need anything inside of there it's just marked down like I don't need to interleave like some sort of like tooltip or something in there or if I do I can do it in a in a different way um so I have a lot of different beefs with it um I mean I think it's fine like I think it works well from for web apps you know I think if you're building like landing pages and stuff it actually is a decent model but that's my other my other problem with it is like in the native World it doesn't really make sense to me because native is all about local first offline first optimistic mutations let me just query my data like inline very easily anywhere in the tree and I want to mutate it and when I mutate it it should be instantly reflected and also like you know sortable and and all this stuff right like I want to just like you know parse or Firebase or um any sort of like of these data models where it's like you know how the linear how linear sort of works right where it's like it's an it's an app like it's what we know it's like a desktop app or like an app you know we used to like differentiate between server or like websites and apps in a big differentiator I think was that was that like desktops were like like mobile apps were very much like instant they could do they could store a lot more data locally so they could get away with like making things feel a lot better and server components to me represent like almost a regression like you have to go to the server to do a route which means that like I have an app that's that we built using uh like graphql basically like a very nice library on top of graphql and what's cool is that like the like it loads you know the the frames of all the next stuff it knows the stack view that you're in and stuff and and when you click to go from like the home page to a search page or to go from search page to a results page um it basically animates that in instantly obviously uh it can do a transition to the next state it can do like all this like cool stuff um Sorry by the way I'm taking this opportunity to rant about server components because it's what I like to do but go for it that's what we're here for whereas like in the server components World it literally it's like the minimum cost you're paying is like whatever it takes to go to the server get that thing and come back with the next state and like that's just and and people say like oh you can you know you could still do optimistic or local first but like not really I mean now you have two different totally different programming models you know what I mean like why would you choose that if you don't have to um anyways um there's a lot to that but like so time agree so and and so I actually tried to get server components working uh I had it so I was working in the original Veet implementation where they used to like when Shopify was working on when they work in hydrogen and they had like a full-on react server components model um I got it fully working to where server components actually rendered with with tamagui um and then when next came out I just couldn't get it working there were so many bugs and stuff and that was the other thing is like it's just been so buggy and so uh like I can't use the after we tried to use the after actually um just to like build the studio out that we're working on and uh it like slowed down things so so immensely like it was it was crazy slow how like development time and build time and everything I think they're working on that but um but yeah I mean so like but but needless to say like it just I couldn't like it was very difficult to get it working even with all the docs and like there's so much change you have to make internally as a library like so so much change um that it's just like what's the like I'm encouraging people to like especially for tamagui where it's like we're encouraging kind of like a universal World um for sure at some point like we'll probably support support it just like I said you know some people it's I want to be the best for for web only as well that would be that's the ideal but but I just think it's it's not as high of a priority for something like tamagui where like if anything I think I encourage people to just not use it um because like if you're building an app um it doesn't even work with react native currently like there's no real way to make it work with react native and then also um yeah I mean yeah you just literally can't do a react native app but also even if you could um the only type of react native apps I would see that being good for are like very crud style react native apps where it's like you're just displaying some basic data um but you're not you don't have a list or you don't have a chat or you don't have a you know like a interactivity that's that's like that's nice well it's understandable from your point of view is like trying to create these cross-platform apps that like it it inherently only serves the web and the like the beauty of early react is the incremental adoption story of like oh this tiny little part of my page can just be react with react server components it's like sure incrementally adopt it at the root and serve where you serve your app and it's like oh that's that's all a much bigger ask in my opinion um but now that we've broached the topic of sharing code between uh Native and web uh how does that work in tamagui because like uh I I try to do this one like a few years ago create a hybrid style app and I was like okay I'm gonna make one app it's gonna render everything and then I was like oh wait navigation and like all these different little things and then the the leading advice at the time was oh you just create your app for web and you create your app for local so how does tamagui solve that yeah so um the way that the starters work now um is so you you can share as much or as little as you want um I still think that the advice of like splitting the root level views um is is valid um you know you probably want to use react native navigation for Native because it has really nice native support for like uh you know stack views and all these different tab views and stuff like that um and then on the web you know it's kind of like your choice the we have a starter that comes with tamagui it it builds off of Fernando's work again with salido which basically Bridges Expo and next and so you still kind of like you have a I would say like basically the the world that we're in now with that starter is where you have 95 of your code uh shared um if you want you could always diverge them as much as you want but like if you want and you can and still get a good experience I think you can have 95 and that five percent that's left over is mostly that navigation level but even that is nice like salido unifies the the navigation stuff so like you still have the same hooks to call like dot navigate um it's just on the web instead of a stack it's just pushing forward a page and then you can hit back whereas on Native you know it can pop in a page and you can slide back um so it's definitely gotten better um that story is like I think that sort of like makes that whole thing pretty worth it I still think there's like so much to go I think Expo router looks very interesting like what they're doing where it's file system routes basically like that's what I've been I was gonna do that if they didn't do it um but looks like they're doing it so there's less incentive for me to do that now but like um you know you can have one file system route thing and then give it different layouts um you know so you can have a layout for web and out for for Native and Fork them but uh yeah I mean that's kind of the big difference I would say and then obviously you know responsive design and touch base design there's some there's some things that you should always try try and change but um but I think with what that story in place is not too bad and I definitely recommend using one of the starters um because they save a whole ton of time yeah so as as with everything there are going to be some trade-offs um to taking this approach so and you've already you've already said that you've sort of laid out tomagui to be you can just use the in a web project you can just use it in a react native project it doesn't have to be both um and I really like that tack um so you know outside of the benefits of sharing code are there other benefits do you think to using time agree in general and is there a moment when you probably shouldn't use it that you probably should pull for something else um yeah let me start with the the second part because there's definitely times when you shouldn't use it I mean you know it does bring along depending on how much you use up to 30 kilobytes of JavaScript for the whole system I mean if you use the full component kit you're you're bringing along you know more depending on the components you use so for certain things where it's very sensitive to uh to bundle size then it can be that I mean I think it's not bad you know 20 20 30 kilobytes not too bad um but there's obviously definitely plenty of sites where like you're just going for very clean and minimal it also depends on familiarity you know um there's there's plenty of Tom agree brings a design system aspect and like you may not want to deal with the design system it's more conceptual burden there's this concept of tokens there's a concept of themes there's a concept of like uh font you have to you know you do your fonts with a certain syntax that that expects like line Heights and all this stuff to kind of go together um so there's there's onboarding cost there's a cost of like learning all the concepts and and there's there's definitely more to it than like you know Tailwind give it the benefit that it just really does like you have to learn that but conceptually there is just kind of like class names and whereas tamagui I think it's a little bit more like you have a design system that you can customize I mean you can use the off the shelf one but uh you also can customize it and so you'll run into that at some point um and yeah I mean I think for a very web focused projects where like you're like if you were the studio like an agency you know that's building like a very fancy like website and you're trying to do like scroll effects and you're trying to do like you know crazy like animations and stuff like that like intense animations like obviously you can use class name or inline Styles and time ago and do that but I just think like you know that's kind of getting to the point where like if it's web only and you're expecting to go very deep into CSS land um do that another example is like container queries for example we're working on them very excited to get them to land like very excited because yeah it'll work on Native which doesn't have that concept but we can obviously add that um so yeah there's a lot of everyone's waiting for it but it's been a lot to kind of figure out the syntax and everything um but like yeah for example like container queries they pretty much are supported on Modern browsers today so like you would have to sidestep tamagui and like that would be its own thing you could use them but again you'd be using like class name and stuff and so you do have to have that you have to accept that there's probably going to be some lag time if you want like these Universal Concepts um to be fully supported like in in a way that works with the design system that you have for example um so yeah those are different caveats um the setup too like definitely you know there is some setup and so that's probably the biggest one that we need to work on because you know I think for a lot of people they just go with what's familiar or what's easy to set up and um it's yeah it's one of those things it's hard to it's hard to focus on when you have container queries you know it's like container queries or like helping configuration it's always hard to uh to choose like the the less sexy path uh yeah so just like some other benefits that we may not have covered so far so we've talked about uh the compiler we've talked about animations we've talked about um this sort of you know benefits of The Styling system and the types that come along with that is there anything that we didn't cover I mean I think you guys did a great job with those questions because I mean those are really like yeah this some of the silences and benefits animations and all that the universal thing that obviously the compiler I think is the big one um the fact that it's it's not just about bundle size it's not just about CSS but it's also about like runtime performance that's like I think a big one to emphasize you get really nice runtime performance improvements um so if your app is slow feeling that can really help with that um I think the final thing is the theme system the the theme system is probably the coolest part almost of time agree and it's it's I'm gonna have some cool stuff coming out very soon for that um because the themes we went for power I I definitely like you know I kind of went deep and I've been doing these component systems for so long that I kind of knew what I needed but uh the first versions of themes were like very powerful but very hard to work with and then we've slowly built up better abstractions around them we just released this thing called uh theme Builder which gives you this very nice chainable API there's a guide on the website now that's like kind of very nice and it walks through all the concepts and builds up to it with like diagrams and it's I spent a lot a lot of time on that guide I think it's pretty cool but I still think almost no one's using it yet because it's um I just think the tomagui theme system that comes with it is pretty nice and most people aren't trying to fuss around with that but we're working on these next things now which is um kind of like a studio type thing where you can like visually go and create like a theme Suite um and the the power in our theme system like I've been playing with it lately and it's getting very very exciting um but yeah the themes they they can Nest as many times as you want so you can have Sub sub themes that Nest down and so if you have your root light and dark themes but then you have like an alert or like let's say like you know you have a lot of like tool tips or warning dialogues right and that one's they want to be yellow so I mean what's nice is that you can wrap that with a theme that's alert or error right and it'll actually like re-theme all the sub components in that tree so the buttons inside of that will turn red and the tool tips will turn red and everything like it it literally will re-theme everything below that thing but then you can go in and there and even further Nest it like we have this idea of inversing which is very cool so you can like just inverse any theme as long as there's a dark and light version it knows to like flip at that level of the tree um and if it's a dark red theme it'll flip to light red for example at that level so it's kind of cool in that in that sense like I just think the theme system is it's so badass uh it's taken an insane amount of work to really get it to work especially like with server side rendering like there's been so many like hydration issues and also avoiding re-renders like I mentioned like that like all that stuff together has been just a ton of work to get going and um so we're getting like very close I think to where people can go in and generate all these theme Suites like we've been I've been playing with it and like generating like neon it's like neon green with like bright outlines or like you know very subtle like deserty look and stuff like that and um and then and I think the coolest part though is that it's not just like you can you can also Target down to the component so like each component if you give it a name like a styled component right but you can give it a name so you can you can name it like a button or something and then it looks for that sub theme so if you have a dark red theme and then underscore button it'll automatically like that component will try and find that theme and and then we have this idea of masks to generate the theme so it's like the cool thing is like you can potentially go in and say like I want my like my red to have much higher contrast you know and for all the for all these components inside of it like this the buttons should be like much more contrasty or flip and inverse the text and all this stuff and like we're just getting to the point where like it's the power's been there but the ease of use hasn't the ease of use is now mostly there on the programmatic side but now it's still like it's just hard because you need to visualize all this stuff right it's at the end of the day it's you know it's still hard for me to generate themes because like at the end of the day I need to see them and have like a good Loop to like tweak things and have all the right Concepts and so I think we've built up those Concepts and all the abstractions and now we're just kind of um putting together like the the visual side of it that's going to be it's very exciting to me so that visual side is the studio good segue yeah but yeah I mean the studio it's an amorphous thing I I haven't known exactly what it is I mean I know that I what I've wanted but like it's been hard to pin down what it should be especially the first version um but yeah I mean uh I I finally I think we've gotten like a lot of clarity on it because we were playing with lots of different concepts with it and trying to like make a very Advanced version of it work um and I think it was actually the wrong way to to approach it so we've been redoing a more like step-by-step thing where you choose like at each level like do you want dark and light okay here's your bass themes choose the colors okay do you want more or less contrast you can like choose different options okay and then it gives you like a preview screen and you can tweak everything and then you can go in and apply like do you want these components to be more or less uh emphasized and like with borders do you want the borders to be more or less so it's like it's kind of cool like now it's more of a like step-by-step theme building uh process that's very like it's got like a lot of explanations now at each step too which is pretty cool like little like pointers that kind of show you what's going on and I'm very happy with that like it's it's it's it's a huge like the the old version was more like a figma type thing where it's like here's all your components and here's all your themes and click around and like tweak things and so I even I was kind of getting lost and like well okay like whereas this is a much more like you can import your existing one and tweak it at each step or you can just generate a new one yeah I think we're going to start with that and then hopefully keep building up from there like I think there's a lot of interesting potential integration with figma both Import and Export kind of like integration with figma I think that the studio could have there's some storybook like directions maybe where like you can host all your components and like screens maybe even and like and there's also some interesting things where it could maybe run as an extension in your browser and like you could tweak things within your app actually and like change the themes on the fly as your app is running so lots of like lots of like big ideas but uh we have to actually ship something so this first one hopefully is just going to be this like theme editor theme guide guide you've also got uh take out which is a well why don't you describe it but uh yeah take out is um that is our first attempt to make this sustainable it's been tamago has been open source and we've I've been spending like nights and weekends basically a lot of nights and weekends on it since I started a couple years ago almost um so we got a lot of sponsors I've been really really uh honestly blessed to get so many sponsors um and we've got a couple more that it just joined which is pretty cool like corporate sponsors but it's just not enough like to really make it worth it so we launched um we launched this first I guess attempt to make some money back it's called take out and it's it's actually really nice it's just like we've we've kind of built our Dream stack of what exists today that we think is the best stack for today in terms of like realistically deploying a cross-platform app uh with everything that you need um so it's mostly based on Super Bass it's building off the starter that you get the free starter that we have so an xjs and Expo mono repo kind of salido all that stuff and then we added on Super Bass with all the different auth and um and database setup migrations and all that stuff set up um it's got a bunch of screens set up too so you have you have Pro you have like login and forgot and all the different off screens that are Universal and adapt you know it's got onboarding screens it's got a bunch of stuff settings and account screens we try to try to cover like all the stuff that you basically need for any sort of app that has like a user system so it's got all that user system stuff including all the settings screens which are pretty nice like light and dark settings that get persisted and and or system or whatever and like all the different like screens there account edit upload profile picture um and uh stuff like that so and I think it shows you how to use like RLS like and this how to secure them um because that's all set up for the profile screens and stuff like that so it's great I mean yeah I mean if I start a project um of my own that's where I would it's where I would go and um it's actually it's doing pretty well like I'm not gonna lie like I was kind of surprised like I don't know most people don't sell starter kits uh most starter kits are free and but I mean we put so much work like we really did um put a lot of work into making it really nice and I think it's Unique because like tomagui is kind of like there's not much else that really is delivering on this cross-platform um sort of dream and um and so yeah I think people who are like interested in in building a native and web app or seem to be responding which is pretty cool we'll see how you know after the hype dies down but I do want to also give a big shout out to Ali who's been he joined at the beginning of this year as basically full time and he was a contributor that was I was giving in some of the sponsorship money to help and he's just been amazing uh just a really really great guy um so easy to work with and um just consistently is outputting like really great work and he's LED basically take out uh because you know it's much more efficient for me to be dealing with all the day-to-day bugs and stuff so I I just basically sit there and like he tells me bugs and takeout or people tell me bugs that are happening all over and I'm just trying to like keep things float and then help him here and there with like decisions and like different little things and take out but for the most part um he he drove that project and uh yeah it's it's been great like uh I feel like it's we're sustainable like more than sustainable now so hopefully that keeps going and we're thinking about adding on more stuff like we we got all of Google fonts for example we made like a very long script that like subsets them and like converts them into like a nice bundle for for Native and for web and like gives you there's even a CLI that you just run a command and it shows you like okay copy and paste this here there and and now you're set up and so we did that for all of Google fonts and we also did that for all of the icons on iconis I think is what it's iconis.js dot org or something like that what is it I'll have to figure it out iconis yeah iconis.js.org um so it's like 15 000 icons or something like that across like 50 or something like that icon packages so it's kind of cool you can plug in you know unlimited icons and a bunch of fonts but we're going to keep I think the plan is to just keep adding on and trying to make that value really high of like um more cool fonts um more like more theme packages definitely like very interesting theme packages uh because we have a couple extras there but we can definitely add on more and there's a lot of things like testing I think where we we got um storybook working for Native and web but like testing could be a lot better set up I think and have a really nice clean setup so yeah let's take out oh and the bot yeah obviously I think that's one thing that's like kind of cool is like it sends updates um so like um we try to structure it in a very in a way that's like for example we don't like Nest your providers we we do them in a way that like lets you do them flat we've tried to like kind of design the repo to be mergeable and like so you can like stay in your areas but the infrastructure stuff is hidden into like these different areas and so we've sent out like five or six updates since we launched it a few weeks ago and so far so good like we've had no complaints a lot of a lot of people are are like giving us good reviews so um there's been like we got to improve the granularity I think of the bot we've been sending too big of updates almost but it seems to be working so that's cool yeah it's pretty cool the the value proposition is definitely there with all the stuff tamagui provides and then like the know-how of just running a repo like this paired with the updates like I'll admit I've been eyeing it for uh one of my my projects that I want to do yeah I'll take that yeah definitely definitely high value here I mean you know it takes it takes a long time to build something like this also the takeout website is excellent it's so good it's so good I love it tamagui too I mean excellent website they're so thanks man I had fun with with takeout that was a really cool project I had to tone down a lot of the graphics because like we I had like a lot of Graphics going on in that header and I think I removed like most of them unfortunately because uh yeah but but browsers are so good like shout out to um mix blend mode like that's such a cool new CSS thing and like clip path and then like webgl it's like you have like mixed blend running on top of a SVG on a custom font with like a webgl thing rotating behind it I mean it's pretty crazy that that works these days it is yeah the the hard to catch up with the web my first tool tip of the week uh is another component from the developer that did sauna the like uh react component for toast that has a really nice API I'm pretty sure he works at versel this is a similar component uh coded in the Radix style where uh it's a drawer and it has all the mobile interactions like you can drag the header and dismiss it so I just love little components like this and I thought it'd be a nice thing to bring up given the conversation we just had and you guys have something similar in uh tamagooh right yep we have a drawer that's been hard fought it's one of the harder components to build yeah the the those drag interactions are no joke so yeah I saw a ball too it's very very cool next up we have Libre castlon and dense yeah I I saw this font get advertised on Twitter um yeah so I am always down for a new font and especially a free new font and this one is just gorgeous um I have definitely uh scoped this one out for some use cases but yeah I don't know if you're looking for a new font definitely check out this so I can put something other than enter on my websites yeah yeah it's a real I mean it's a it's a phenomenal serif font and and I also specifically enjoyed condensed fonts especially for headlines um I feel like there is a tendency a lot of times to take up too much space and I like you know being kind of very Punchy with it so this is a really good one well mine feels a little out of place because it's not it's not as much of like a tool tip my other one is though my other one is uh I just have to shout out gqd every chance I get because um to me it's the thing in the world it's a graphql library you just write your queries like with the hook like use Query and then Works backwards to the graphql query I use it on a yeah that's a good example right there that playground but like I use it on a large app and it's literally the best data like if you want an alternative feature to react server components like this to me is is that it's literally the most beautiful API I've ever seen for fetching data I think if it was paired with a really nice back-end thing to to have your graph be pretty easy to build which I have some ideas around um but yeah I just it's such an underloved Library it's so well done um I've I contributed some of its development early on uh yes I see myself there but uh but yeah I mean um they just they deserve much more love very cool stuff so is it like doing some crazy stuff to construct that graphql query it is yeah there's some interesting details to be discussed there but like yeah it basically is proxying and reading what you're reading and and mapping that back to a graphql query is this similar at all to uh gqls yes it's a fork of GQ list that I actually was using GQ list and it was really slow and then I it was a whole story but the developer of GQ list was not um cooperating and like blocked us from the repo and stuff like that it was we were trying to work with them anyways we ended up just uh renaming it because that was our only option but security is literally uh for it was Rewritten actually um to be like very fast so it's basically a fast G G Q list but yeah the guy who I mean it's his credit the guy who came up with it was like 16 at the time when he released it and it's such a such an impressive library for someone at 16 it's like it's because it's not only is it a novel idea you know it's not just like so there's people that do impressive technical it's like it's very hard to find the intersection I think of hard tech and a new idea like I see a lot of kids that are like oh I I built a recursive you know optimizing compile whatever like a descent this or that you know crazy thing but it's like something that's been done um but to have a new idea and then to like actually implement it like shout out that was a very impressive project I thought yeah I remember one of the things that when we're doing react native at artsy in particular there was this always cases where you know you would be you'd leave a field and that field would still be in the query when you'd removed it from the UI or something like that it's like we had a thing where we'd set up type safety or something so it would map up so we'd like know if we were querying it but the opposite was not always true it's like if we removed it from the UI are we even still using this thing anymore and uh this is really great because it's like you just think about the UI and it sort of builds out the query for you and that that's super powerful okay next up we have um mine postgres language server this came out from Superbass and they implemented a language server just for postgres for vs code because apparently all the other SQL language servers aren't just postgres so uh I just find this really cool that they didn't really have to do this but they took the time to implement something that's pretty complicated and everybody can benefit and not just super bass users so uh shout out to them for that they are pretty deep in the postgres ecosystem yeah next up we have dxos yeah so my my friend Jess Martin has been doing a little bit of work on this and it is a way of building distributed local first software so they have like a little demo on their home page here um where yeah I mean essentially all the things that you can think of if you're trying to make like a sync engine kind of like linear did but maybe not exactly that like that but yeah so it's just a um sort of a toolkit for for building yeah uh multiplayer uh peer-to-peer local first applications and they're doing some really good work there so if if that sounds like something you're trying to do then then check out this Library it's just really interesting yeah that's really cool and last up we have another font uh uncut a little bit funny name now that I think about it uh but uh yeah so it's actually not a fun it's just a collection of fonts but I found this while working on takeout it's actually where I found the font that we use called Cherry Bomb um the especially the title I think our display section I just found this recently I don't know how old it is if it's old or new but it's got um just cool stuff like different looking fonts it's like a really nice collection I'm probably gonna try and like add it into our tamaguis you know CLI script or thing because it's it's like a nice nice Suite of fonts yeah there's uh some some wacky ones in here well that wraps it up for Tool tips thanks for coming on the episode Nate this was a really fun time getting to learn about tamagui and all the different considerations you have to make when building for so many platforms yeah thank you guys so much uh this was uh it was a great conversation you guys brought up all the good points so I appreciate that and it was really nice to uh to chat yeah and massive respect I know having worked on something similar for a short time I know this has been a ton of work so it's really cool to see what you built foreign

Channel: devtools-fm

Views: 3,410

Keywords: react native, react, ui, design system, compiler, cross platform, development, web, native, mobile, tamagui, devtools, ui design, react native ui, react native app, mobile app development, react native animation, app development, react native project, react native expo

Id: oEVI4WbTvQo

Length: 71min 5sec (4265 seconds)

Published: Mon Sep 04 2023