Today the hosts interview Nate Wienert about Tamagui, the one stop shop UI kit for React Native.
Today the hosts interview Nate Wienert about Tamagui, the one stop shop UI kit for React Native.
This episode is brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
Todd Werth:
Welcome back to Reacting Native Radio Podcast. Brought to you by Photoshop, who reminds you, we have AI also. Don't just hate on Stable Diffusion. Episode 259, Tamagui with Nate Weinert.
Jamon Holmgren:
I am not totally sure that I got all of my equipment set up right, so I could be speaking through a different microphone right now. It could be that it is recording on some other software instead of Audacity. I have no idea. My whole desk got rearranged over the break. And I don't even remember how to start this podcast. In fact, this is the second time we've tried to start this podcast because the first time was a disaster.
Robin Heinze:
Did the elves come in and rearrange your office? Or what happened there?
Jamon Holmgren:
Something like that, yeah. Well, one elf, one very large elf. Me. I think my wife would prefer if some other elves would help, including myself, clean up the mess. See, the problem is when I rearrange my office, then a different room gets messier.
Robin Heinze:
Well, yeah.
Mazen Chami:
There's no other way to do it.
Robin Heinze:
The mess is just transferred.
Jamon Holmgren:
Yeah. But my office feels great now.
Robin Heinze:
Same.
Jamon Holmgren:
It's awesome. As long as I keep the door closed.
Robin Heinze:
I also cleaned my office over the break, but the mess is just somewhere else in my house now.
Jamon Holmgren:
That's just how it works. I did do a bunch of... you can kind of see it if you're looking at Zoom, which, only three others.
Robin Heinze:
Yes, Jamon's background is very fancy now. I like that new artwork behind you. Who's that hockey player in that picture?
Jamon Holmgren:
With the Holmgren on the back on the jersey?
Robin Heinze:
With the Holmgren on the back. I don't know who that could be.
Jamon Holmgren:
Very famous rec league goalie, ice hockey goalie.
Mazen Chami:
Okay, Robin, bringing sports references. I'll take it.
Robin Heinze:
Oh shoot. You're right.
Jamon Holmgren:
Well, it's hard not to. I've got another sports thing behind me as well. Let's not get into that. But yeah, so it's been a while. Welcome back, Robin, and Mazen. I guess I should see if I can remember how to do the introductions. I'm Jamon Holmgren, your host and friendly CTO of Infinite Red. I live in the beautiful Pacific Northwest with my wife and four kids. I play hockey, as you can see over my shoulder if you're in the Zoom right now. And that's enough about me.
I'm joined today by my unique co-hosts, Robin and Mazen, as well as our guest, Nate, who I will be introducing in a second here. Robin is a senior software engineer at Infinite Red. She's located near Portland, Oregon with her husband and two kids. And has specialized in React Native for the past five years. Mazen Chami lives in Durham, North Carolina with his wife and baby boy. He's a former pro soccer player and coach, and is a senior React Native engineer, also here at Infinite Red. Also with us is Nathan Weinert. He is our guest today and he is a software developer living in Hawaii with his wife. Nate works full-time at Vercel on the preview comments project, and on the side he builds Tamagui. Did I say that right? Tamagui?
Nate Weinert:
That's something we can try and figure out, but I've been calling it Tamagui.
Robin Heinze:
See, I have a question specifically about the name of it, so we'll talk about it.
Jamon Holmgren:
That works. Awesome. Well, welcome Nate. Really appreciate having you on. We saw Tamagui last, I don't know, it was a few weeks ago. And got in touch with you and were like, "Hey, we got to have you on."
Nate Weinert:
Yeah, thank you.
Jamon Holmgren:
Recently you released 1.0, so that's great timing.
Nate Weinert:
Yeah, thanks for having me on. I'm excited to talk about React and Tamagui, and everything else.
Jamon Holmgren:
Yeah, awesome. Before we get into that, this episode is sponsored by Chain React Chain React is the biggest React Native conference in the US. It's going to be happening again in Portland, Oregon. It is, we usually get 400, 500 developers there all talking about React Native. It's a great time. You should definitely check it out. Chainreactconf.com.
All right, let's get into our topic for today, Tamagui. So I want to start off here, Nate. Tell us a little bit more about yourself and then feel free to pivot that into how Tamagui came about as well.
Nate Weinert:
Yeah, I think you guys covered the high level. I'm in Hawaii, I have a wife, we actually just moved here earlier this year. Actually, maybe I guess that works as a sort of segue, which is that before I was here, we were in the Bay Area. I had actually moved out there maybe six or seven years before to start a startup, which was a dev tool startup. It was with a co-founder. And it's funny, it's like you kind of chase your tail on the same problems for long periods of time, and you don't catch it for a long time. I feel like in a sense, I've been thinking of Tamagui as me finally trying to catch my tail, or maybe hopefully catching my tail finally.
Because that startup was, it was called Flint originally, and there's like a demo video that's kind of cool on YouTube that we put together, that we worked very hard on. And it was maybe a bit like Spelt, it was a compiler. It added a new keyword to JavaScript, which was kind of our thing. It added a view keyword to JavaScript, which worked kind like a new... it was for components, basically. So you could do let X equal zero inside of there, and then it would automatically wrap it reactively so that you don't have to do set state and all that stuff.
So that was the idea. It was a few years before Spelt ever came out. I think it was a good idea. We were a first time founder, or we were early founders. We had done projects before, but we ended up pivoting and doing other things, and it was this whole journey. But I think in the back of my mind I was always just looking at the same problems, which was I want to make apps, I want to make them more easily, and I want to make them naturally and share the code and all this stuff.
And so, was working on that out there, and then when that finally ran out of money and everything folded, just looked around. I was like, I need a job. I need something that's nice, that I can enjoy and just work at somewhere cool. So Vercel was an obvious choice. And then Vercel's remote first, as I think you guys were saying you guys are too, which is cool. Then that let me just say, I've been in the Bay Area now for seven or eight years, and there's nothing technically tying me here anymore. So, decided to come out to Hawaii.
Robin Heinze:
Because why not? Sounds like the dream.
Mazen Chami:
I love seeing how the sun is rising behind you. When we started, it was dark behind you and now it's slowly getting brighter.
Robin Heinze:
Meanwhile, it's actually afternoon where Mazen is.
Mazen Chami:
Yeah, I'm ready to take my afternoon nap.
Nate Weinert:
It is interesting with work, some of my coworkers, one of my coworkers is in Atlanta, so I have to always front load all my talking and everything.
Jamon Holmgren:
Yeah, it is interesting to have people spread across a bunch of different time zones. We're mostly, almost all of us are US time zones, so there's a little bit of a spread, but not too bad. But what's funny is every east coaster that we've hired has been an early bird.
Robin Heinze:
You have to be.
Jamon Holmgren:
They're all like, "Oh yeah, I'm going to get up at 7:00 AM my time," which is 4:00 AM our time.
Robin Heinze:
Then they get all of their heads down work done for the first five hours of their day, and then they have meetings with us.
Mazen Chami:
It is fun.
Jamon Holmgren:
It's so true. But yeah, I am forced to be an early riser because of my kids going to school, but otherwise I would probably sleep in later and later every day. So Tamagui, just give me an overview of what it's all about.
Nate Weinert:
It started as, I had been working on a project. I was working on a, maybe you could call it just a new Yelp or something like that. A better way to find local eats that are very good. And so, it was born out of that. It's just my dream system for building an app. I just think that it should exist. It was something that's like, ah... I looked around, I think at the time there was only Dripsy, which I know you guys had Fernando on in a previous episode. He's been actually really great. I really am a big fan of Fernando. I think he's just one of those rare people that just produces stuff constantly, which is really cool.
But yeah, I think Dripsy was around and I was like, it's cool. But once you start doing certain things, your whole app slows down. And I had used React Native Web before, so I was familiar with the problem space. And I had done optimizing compilers before, and I knew that that could be a way to solve some of these performance issues that I think you run into when you share more than just the very leaf level, let's say, views in your app. So yeah, I think it's just a born out of a desire to be able to build apps that as a solo... I think maybe that's the key thing, is as a small team or as a solo developer, you don't want to rebuild every feature X times for however many platforms you're supporting.
I think that's the main goal, is I want to be able to write an app. Just kind of like, you should be able to share a lot more views. I totally understand that it's good to use platform high level things like navigation and high level views. So I don't think Tamagui is trying to say you should use it for every view. I still definitely believe in the React Native philosophy, of you should target the platform. But there's also no reason that a profile view or a settings pane that has inputs and stuff like that shouldn't be able to be shared. And I think the problem that you run into when you're sharing with React Native Web, is that you're writing responsive stuff in a way that's not SSR compatible, and it's also not using CSS media queries in a lot of the libraries.
And same thing for Hover, and other interactive styles or pseudo-styles, I guess you would call them. You end up doing state driven or JavaScript driven events, that then change the state on native. And so it was just, I want to fix some of those problems where things start getting very heavy on the web and you're not using CSS. And I've just been working on UI kits in some form or another, or front end in some form or another for a long time. So, it's been an ongoing project maybe for many years.
Mazen Chami:
What is Tamagui built on?
Nate Weinert:
Originally it was just... actually, it's kind of funny. It's built on a lot of stuff. I actually owe a lot of credits. It's really a hodgepodge of projects. I think actually the original project was JSX style. I don't know if you guys are familiar with that. The audience, most people probably aren't. But it was built by, I forget his name. I have his GitHub avatar in my head right now, but I can't remember his name exactly, but we should add that in or something. They built a compiler, it was originally that was just a optimizing compiler, so to speak, or it did most of the extraction to CSS for an older style library. And I was just like, I want React Native support. It was kind of like take React Native Web originally, add JSX style's compiler, and then just work from there.
And then over the time I've actually pulled out React Native Web. Because I originally was patching React Native Web, which was kind of a hacky thing. So I actually had, you had to run a build time step that would actually patch React Native Web so that it accepted class names. Because before it just wouldn't, until version 18, they just wouldn't accept class names, and that was the only way I could get a lot of the features working. So it wasn't until pretty far into the betas, that I was able to get rid of that whole thing. And that actually was thanks to the fact that they added class name support in version 18. It's a hodgepodge of projects because it's using, I've copy and pasted a decent amount of code from Radix, just to get the component API that I think they have, that's very nice for some of the higher level stuff. And I've thrown in Floating UI, which is a really great library for all the different floating things.
So I'm trying to not do as much as possible. But in the vein of that, before I ramble on too long, which is just that the core library was built on React Native Web and it used it for all the style stuff. And I've actually, mostly because of the fact that I couldn't do class name, but now it's kind of nice in a different way. Because the core style library for Tamagui actually doesn't have really any dependency. It uses this one tiny dependency for colors, but other than that it has no dependencies. Which is pretty nice, because it means that if you aren't using... if you're just doing say, a marketing page or something on the web that doesn't necessarily need all of React Native, you can actually use Tamagui as a web-only style library and you don't have to bring along React Native Web at all.
Mazen Chami:
That's very helpful.
Robin Heinze:
Right. So the way React Native Web is React Native first with web added in, this is maybe the opposite. You've approached it to be mostly web inspired.
Nate Weinert:
Yeah, it's a good way of putting it. It's kind of web first, and then you can add native. Maybe that's a way of looking at it, yeah.
Robin Heinze:
I do need to get in this one really, really important question, which is, is the name inspired or at all related to Tomagotchi? Because that is absolutely the first thing I thought of.
Mazen Chami:
We need to know that.
Nate Weinert:
Yeah, the good news is that, yes.
Robin Heinze:
Okay.
Mazen Chami:
Mystery solved.
Nate Weinert:
Yeah, I think the journey was, originally it was called Snack UI, because it had stacks. And I was very uncreative and I was like stacks, I like snack. And then I called it Snack UI. And then I think the Expo guys reached out and they were like, "Hey, we kind of used Snack for a few things." And I was like, actually that's fair.
Robin Heinze:
A few things.
Nate Weinert:
I didn't really think about that, that you guys use Snack. So I was like, what do I call it? And then I don't know how I got, really, I don't know exactly how I got there. But I think I was thinking of other foods. And then I was thinking of like, oh, well Tamago is egg, and then Tamagotchi, and then gui was there.
Robin Heinze:
It's just a natural progression. I love it.
Mazen Chami:
That's a great name. It really is.
Nate Weinert:
It's better than Snack UI, that's for sure.
Robin Heinze:
Well, Tamagotchis are coming back in. I've noticed they were gone for a long time, but you can get them again. Anyway, that was a really important thing on my mind, I wanted to get that out of the way. Can you talk a little bit about who else is building this with you? Who's on the team? Do you have a funding source? Is there a company that's sponsoring it? Who's behind Tamagui other than yourself?
Nate Weinert:
Yeah, good question. Actually it's sort of luck that it exists. Because in a sense, like I mentioned, I had this startup before. And it was winding down, and we had pivoted a few times, we had done a bunch of stuff and I think I just had a little bit of funds left. And so I was working on this project, and I think it was luck that I had just a little bit of funding left over that I was able to just work on whatever. So it was a passion project. It was born out of that other project that I've just been hacking on. It's kind of like the genesis project of Tamagui, which is this food search app.
So I was running out of money there, and I was like, okay, I need to start applying for a job, and I'm not going to finish this app anytime soon. The app that I'm working on. I was like, that's obviously at least a year or two away from being ready. But the UI kit that I've been working on with it is honestly, if I did work really hard, maybe I could get it out while I'm interviewing for jobs. So that was October last year, or maybe September, October last year. And I was like, okay, I'm just going to drop everything on this app. I'm going to try and just release this project because it's worth it.
I think Silex, there was a lot of rumors even at that time of year plus ago, that Silex was coming out. And I was like, oh man, it's going to happen again. Because I built this thing called Reapp a long time ago. And it was maybe like Ionic, or I think it's called Capacitor now or something. It was mimicking iOS and Android on the web, but making it very close. And so, I built that app a long time ago. I went to the first React conference ever, and I was all excited to show it to people. I'm super stoked because I've been working on it a bunch to get it ready for the conference. And it's the first day of the conference and I'm sitting down, I'm watching this thing, and then they announce React Native. And I was like, cool. It was like cool, but shit.
Jamon Holmgren:
Yeah, taking your thunder there. Wow.
Nate Weinert:
Yeah, so it was a thing where, a lesson that I should have learned. Because I was like, okay, so lesson is maybe don't do things that Facebook could be doing. And yeah, it was a whole thing. But then Silex was getting, I think there were some tweets about it, it's going to come out soon and it's a compiler. And I was like, ah man, I've got this compiler thing, it's going to happen again. But whatever, I was like, I haven't learned the lesson, just release it. At least I'll be able to release it at the same time. And it seemed like they weren't doing native stuff, so I was like well, maybe I'll just have the native thing. So, that was the motivation to release it.
And no, it's just me. So far it's just been me. Vercel's very kind to give me some bandwidth to focus on it, and we'll see if there's some chances for them to start using it more internally. I don't think there's anything official at all, but I'm hopeful that that will keep progressing. But yeah, there's definitely a lot on my mind right now with 1.0, like how do I make it sustainable and how do I keep doing that? But actually, I'm not looking to rush into a VC type thing. I actually have really enjoyed being able to keep it small and just do what I want day to day. And so, I'm very hopeful that maybe I can find a path to do it my way, I guess so to speak. Not go rocket ship it or anything like that.
Jamon Holmgren:
That's amazing. Before we get too much further, because I do want to deep dive more into Tamagui, and the features that are available and things like that. But there were a few alternatives out there already when you started working on it, or at least when you got to the point where you were really fleshing it out. And I don't know, Dripsy and some others that were out there. So what about those things didn't really solve your problem that you're trying to solve, or maybe their approach wasn't aligned with what you wanted to do?
Nate Weinert:
Well, keep in mind that I think everyone's irrational. And probably if I was trying to be like, oh, I'm going to get my app out, if I was being really rational about this startup, I probably wouldn't have built Tamagui. You know that I mean? I do think that if you're just trying to ship something, a lot of the times that you can get away with bad performance. And I think Dripsy and even all the other UI kits are pretty fine. They will work for you, especially for an MVP. So I will say that, some of it is just me, I've been nodding on this bone for so long. And I do know that for an app that's really getting a little bit more depth, and is getting a lot more elements on the screen, I definitely have felt the pain, where it's just annoying to have to spend a lot of time on performance when you don't want to be doing that for your app.
And I was spending... for this app, it's again, imagine a Yelp type screen where you have a search results paged. That is actually pretty performance sensitive, because you have a lot of items in the list, in each list item, so to speak, that you're showing. You want to show a lot, you want to show the star ratings, a summary of comments, you want to show a bunch of images, you want to show a bunch of little meta details and all that stuff. And so you end up with say, 25 or even 30 different sub-components in each list item. And then you want to show ideally as many list item as possible, and you want to have that scroll pretty fast when you swipe down. And you have an infinite list, and then you end up with virtualization.
It's just anyone who's been there, I guess, building an app screen that has more than say, 30 or 40 elements that need to be on the screen at a time, knows that you start paying a lot for render time. Especially and then on the web, you resize your browser and everything. If you're not using media queries, and if you are re-rendering in React, you're going to have just a terrible experience for how fast the site can resize. So those are two things that I'd say I ran into. But yeah, I think that it's not something that you need to do, but it is nice that if you chose Tamagui, you could probably avoid quite a bit more of the time that you have to spend in that area of worrying about, oh, do I have a budget for how many elements I'm rendering?
Robin Heinze:
It's really incredible. I was looking at, on the website you use the phrase automatically fast, and there's a little comparison between Tamagui, and React Native Web, and Dripsy, and Native Base, which is quite a lot slower. And it sounds like, you've touched on it a bit already, but what's going on under the hood? What are the primary things going on under the hood that make it so much more performant than the alternatives? And you've talked a little bit, but what's the magic?
Jamon Holmgren:
Yeah, it's like it's a compile time thing, right? It's not a run time necessarily.
Nate Weinert:
Yeah. Also, by the way, shout out Native Base. They've been awesome. They've been very supportive, and I always kind of... I don't-
Jamon Holmgren:
They're great people over there. We really like them.
Robin Heinze:
Oh yeah, we've had a long standing relationship with Native Base. We like them over there.
Nate Weinert:
Okay, cool. Yeah, no, I always feel like... also, they've been around, they have a much more feature complete UI kit. They've got really great accessibility from what I hear. So shout out to Native Base, they've been very cool, even though I've definitely been pressing on the performance side.
Robin Heinze:
But we had Sankit on the show a while back.
Jamon Holmgren:
We need to have him again.
Mazen Chami:
Yeah, a while back.
Nate Weinert:
Yeah, he seems like a really nice guy. I haven't met. But it's been cool actually to, you come out and you compete, but I think it's maybe in a lot of sports where you have a lot of respect for the people that are just doing cool stuff. I have a lot of respect for everyone that's doing that. And they do have a lot of stuff in there. It's a very feature complete UI kit, that can get you pretty far, especially for a lot of types of apps I think.
But anyways, to get to what it does, part of it is just extracting CSS. You pull out CSS at build time and you're going to do a lot of good for your app. Because there's less JavaScript to parse and there's less, you don't have to do stylesheet.insert, which can cause repaints and reflows. Because it's happening as you're doing your first render, it can very much trip up the browser paint and layout engines.
Part of it is pulling out CSS, and that's great for a few reasons. Not having to do JS, not having to do these layouts and stuff on the first render. But the cooler thing that I think that Tamagui does that's kind of novel and was added, I think it was added by me after JSX Style eventually got to this point. But I realized that you could flatten things, which I know there's a lot of lip service to flattening. And honestly, I need to write maybe and show it more clearly of what I mean by that. But the idea is that you make these styled components, so you use the styled factory function just to make a style component, and give it some properties and all this stuff. And that's a nice thing to have, you want to build up this system of default components that maybe have different properties that they accept, and they're used all throughout your UI kit or your app.
But the thing is, for example on the website homepage, there's this little example where it shows a fake kind of Safari for the responsive section. It's maybe the third or fourth section, and it shows a little fake browser window that's, I think it's 500 pixels squared or something like that. And that browser window for example has, that's actually the most optimized thing on the homepage, which I think it has 49 styled components that are actually turned and flattened into just a div. So what happens is if you're not spreading... you have to know the rules, and I definitely will put together a document on this at some point that's kind of like how to not de-optimize Tamagui.
There's a couple rules basically, one is spreading. So if you spread dot, dot, dot props down onto a styled component, that will de-opt, because it doesn't know what's coming in. And the other thing is just any dynamic. So if you say import a complicated function, and then run that function, and then use that to say, do a style or something like that. So if you do a very complicated-
Robin Heinze:
Calculating width or something.
Nate Weinert:
Exactly, yeah, some complicated thing. Maybe you take a prop and then you add something to it, so it just can't do anything there. As long as you avoid those sort of things, and you're just using your styled components or the stack and text that come with Tamagui. What it'll do is it'll say, okay, I can analyze all the properties on this stack that you've used in this view. It's like you've set it width, and you've set background color, and everything that you've done is understandable to the compiler. It'll actually just swap out a div there instead of a stack. And then it'll just put the class name directly on there, and it'll extract the CSS.
And that's pretty huge. If you look at, especially for React Native actually. On the web maybe it's a little bit less, I've looked at Stitches for example, was an inspiration as well in some cases. And Stitches does, it's pretty fast actually, even when it has to run the component. Because it just doesn't use that many hooks internally. It doesn't use that many, it doesn't process the styles that much. It is smart about all of that. So yeah, running that extra step, it does cost, but it's not a huge cost. But then once you add in React Native and the full React Native API set, which is quite a lot more, it's got the press events, it's got all these things, they require hooks.
I think the typical view in React Native uses... I actually don't know, but it uses more than let's say five hooks or something like that per component, plus looping over all the props a few times, and doing a bunch of transformations, creating a bunch of objects. So just in that little Safari, fake Safari thing, you have 50 less components that have to run all of that logic on Mount, which is just a really... it's hard to get around that that really does make a big difference. I would say that's the big win. That didn't come until later. I didn't even realize that that was a cool thing until later. But I think the atomic styling and the CSS stuff, once that fell into place, it's like oh, well, yeah. I guess that's the only thing that's output at the end of the day, so there's no need to have an extra component in the tree.
Jamon Holmgren:
You could do that manually. But that would be a lot harder. You'd have to really be thinking, and you'd have to have a lot of discipline and consistency. And so, by having the compiler do it, you can build things how you would normally build them, with a few rules like you said, and then have the compiler optimize it under the hood.
Nate Weinert:
Yeah, that's the whole thing, is that I think you could do... and then again, the thing is how would you do that universally? Because you could do that-
Jamon Holmgren:
Yeah, right-
Nate Weinert:
For The web.
Jamon Holmgren:
Exactly. Yeah, you'd have to have separate components that are imported per... and you'd have to write it twice or more. Yeah, no, this sounds way better. Are there any trade-offs there when you're doing that? Are there some situations where the compiler gets it wrong, for example?
Nate Weinert:
That's a good question. There are trade-offs. I would say the trade-offs are, one is a little bit of complexity. Obviously you have to set up a build time thing. Two is a little bit of build time costs, which you have to pay for. It uses Babble currently, which it would be nice to maybe in the future do that with something fancy. But it works, and it also doesn't have to scan most of your file. It can do heuristics to be like, well, this file doesn't even import anything from Tamagui, so don't have to check that file. But yeah, so I would say a little bit of complexity, cost of setup, a little bit of cost of build time. Although that's motivated me to make everything work without the compiler, so that's what motivated that.
I was getting a lot of questions early on. A lot of people struggling to set it up, or a lot of people just saying, "Do I have to set it up?" And stuff like that. So I ultimately went with this model that costs a little bit more in bundle size, because you have to ship all of Tamagui every time, and maybe in the future there's a way to get around that. I actually recommend not turning on the compiler in dev mode, because just see if you like Tamagui. Try it, don't even set up the compiler. If it seems to work for you, then it's a bonus. It still runs pretty fast actually. I think even in comparisons, I think it's still near the top without the compiler. And then the compiler just does that extra magic.
And then yeah, you touched on correctness. There's always a chance, and I would bet that there's probably still some edge case correctness bugs here and there. That's been a huge focus getting to 1.0, was stomping out a bunch of those things. And also just trying to simplify the structure of it to get it so that it's harder for it to be incorrect. So it's close, the website has tons and tons of pages, tons of demos, and it's a hundred percent across all of those, which is pretty good. But the nice thing is you can disable it per file. So you can put it disable, like a pragma at the top of your file if you want to disable it for the file. It's a nice way to also sanity check if you're just developing with it and you're like, is this caused by Tamagui or is this just something I'm doing? So you can disable it. Yeah, so I think there's fallbacks, disabling profile or disabling it altogether. And there is some risk. It's a cost for me to maintain, so there's some risk there too.
Mazen Chami:
The next thing I want to talk about is animations in general. So first thing, correct me if I'm wrong here, it seems like you are giving the developer the option to choose between React Native animated versus Reanimated. Is that correct?
Nate Weinert:
Yeah, there's also a CSS for the web plugin.
Mazen Chami:
For the web, yeah, correct. Cool. I really like that idea of the plugin aspect where you do @tamagui/reanimated, animations slash animated package. It's almost like a plugin. You need to opt into it. Can you go into why you went in with that plugin perspective? And then is there a performance hit in that? Because now we're bringing in more what sounds like dependencies on board. And then which one do you recommend? Because I know Reanimated works on web and React Native too. Sorry, so many animation questions, but I feel like I want to go through all of them.
Robin Heinze:
It's one of the biggest headaches when you're trying to share code between platforms.
Mazen Chami:
Yeah, exactly. Sharing the platform code, and once we, mainly from our React Native side, we're always trying to make sure it's optimized, it's not jittery and stuff like that. There's a lot of things to keep in mind with this.
Nate Weinert:
Yeah. Actually in a way, it's kind of cool to be interviewed by people who are just building React Native stuff every day. Because in a sense, I think you guys have more experience than I do. I've built React Native apps, but it hasn't been a continuous thing for me. I'll actually maybe have some interesting follow-ons for you guys. But yeah, the animation stuff is, it's one of those things where I was looking at it and I was like, I'm not going to do this for 1.0. Because it's a whole beast. And I don't think animations are necessary. But I don't know, I kept thinking about it. I was looking at Moti, I think, Fernando released Moti and playing with Reanimated and stuff like that.
It's one of those things where it was like, how am I going to do the compiler with animations? Is it going to work? And it's one of those things where I think there's this mantra of... what's the mantra where it's like, get it working, get it right, make it fast? Something like that. Make it work, make it right, make it fast, or something like that. But I do think there's something that's like, yeah, the make it right. Tamagui makes it fast, but the animations to me was like this scary cliff. In past UI kits that I've built, I've actually ran into a thing where I was like, oh shit, that feature that I implemented before, it doesn't work now with Atomic CSS. I ran into this whole problem where I had to refactor the whole style engine. And then it just fell apart because it was like, oh shit. All these features that I put together, they don't really work together.
And animations to me was that dragon where it was like, how is it going to work with compiling and with cross platform? It seemed worth poking into at least. And then yeah, so I just poked into it. And I think where it's at is, it's nice but it's also, I would say the animations part is, it's still very much a work in progress. There's so much cool stuff that could be done. But okay, so Reanimated seems, it's very cool. And I also think it seems to be moving much faster, and I think I would prefer to use that if possible. But it also has been harder to build, just due to the setup, and I think it's got this... as a library especially, it's been kind of hard. Because I had problems with the bundlers picking up, what is the directives that you have to use and stuff like that, when it was in the third party library and all this stuff.
So right now, I would say the React Native animations one is definitely much better tested, because that's the one that I've been using for all my testing. I think the Reanimated one needs some love. But the plugability is, yeah, it was just something that was like, it would be really nice to just use CSS on the web. Because Reanimated is pretty big, and so is React Native Animated. React Native Animated is also very big. I think that was the driving force behind that, and getting API to work.
Mazen Chami:
That all makes sense. It is a beast, a dragon like you said. And you got it working, which is a big first step. I think now it's just iterating on it, improving on it. And Reanimated 2, I feel like they're just plugging out, Software Dimension is doing this really fast. I think with the new architecture, there's a new version bump that's going to happen soon. So there's a lot going on there to keep up with/ the demo works great, I think, so this is pretty cool.
Robin Heinze:
We're getting low on time, which is unfortunate because I could ask you questions for a long time. But the last technical question I wanted to dive into just a little bit is the question of accessibility, which has been a topic that React Native Web has famously struggled with, because of the use of just like Div Soup instead of Semantic UI, and what impact that has for screen readers and other accessibility tools. How is Tamagui handling accessibility and making sure that that problem is solved or at least addressed?
Nate Weinert:
Yeah, I think it's something that, that's a area that Tamagui needs to get better at just in general. I haven't really done much beyond support the accessibility props that React Native supports. It does support tags though, so you can set the final tag name. And the compiler does that too when it does the flattening, which is pretty nice. So when it flattens a view, it will keep it as whatever tag that you specify. I do use that on the website and in other places too. I guess in that sense, I hadn't really thought about that as accessibility rather than just semantic correctness or whatever. But yeah, that makes sense. It's accessible as well. But it is something that I've gotten feedback on, which is that the components, at least in the UI kit, could use some love in terms of that. And that's something that I definitely want to focus on in the future. But yeah, you can use all the accessibility props and you can set a tag, so you can set it to span, or section or article.
Robin Heinze:
That's actually quite useful. Good, I'm glad it's being talked about, which is not true of all libraries like this. It can tend to be an afterthought or just deprioritized altogether.
Nate Weinert:
Yeah, very much so.
Jamon Holmgren:
I feel like we as a React Native community, and the broader React community as well have been searching for this holy grail of sharing code between web and mobile. I'm loving seeing libraries and efforts by talented programmers like you coming out, options like this. Give me the elevator pitch of when would I consider using Tamagui for my app? What would be a situation where I'm going into creating a new app, what does that look like when it's like Tamagui would work really well for this? Is it every app, or is it more focused than that?
Nate Weinert:
I want to say that I do think it's... okay, if you're considering React Native, if you're considering the React ecosystem, I want to say that I think it... because again, I designed it for myself and for someone who wants to share more code and ship a little bit quicker. So I do think that, yeah, if you're a small team, it's amazing. But I also think that, I don't know what else you would use, I guess even as a bigger team to get better... I think it's also got all these really advanced things that it does that don't exist yet. I would like to selfishly say that if you're doing React Native, I think it's worth at least looking at.
I think that it's got the starter. Maybe the other thing that you could say is that it's got a little bit of complexity in terms of design. You have to set up a design system, you have to set up some stuff. Even in that sense, maybe if you're just really prototyping stuff out, don't use it. I would say maybe in the very small case of just prototyping and just playing around with stuff, there is some complexity cost. But there is also the starter kit that I think gets you set up with a pretty nice setup. So if you're okay with Next and Expo, it's kind of pre-set up. And you can eject Expo or whatever. But I think as long as you're okay starting from that, then the starter will get you very far. If you're just like, you don't want to set up a bunch of stuff, you don't need to design system, then Tamagui may not be for you. But yeah, small or large teams, I think it's worth considering.
Jamon Holmgren:
We'll link to the starter kit, and of course Tamagui's website, which is I think just Tamagui.dev. It is, yeah, Tamagui.dev. And the announcement, I've got a few other links in there, JSX Style, Dripsy. I've got a link to your GitHub sponsorship, which helps support your open source efforts, stitches, some other things like that. So check out the show notes if you are listening and interested. We hope you are, because this looks really cool. Nice job on this, Nate. Congrats on getting 1.0 out the door, that's pretty exciting.
Nate Weinert:
Thank you ,guys. And thank you so much for having me on. This has been very chill and I really enjoyed talking to you guys.
Jamon Holmgren:
Yeah, I wish we had more time. This would be a great-
Robin Heinze:
That's the vibe we go for.
Jamon Holmgren:
Deep dive. Yeah, totally. Yeah, maybe we can do something a little later, and come back and see what you've been up to. Really, really appreciate having you on. It's been fantastic. Where can people find you online if they're interested in asking you questions or just following along with your progress?
Nate Weinert:
Yeah. I think my Twitter, Nate Birdman is the main source. And then if you're getting into Tamagui, highly recommend joining the Discord. It's very active, lots of people there. So Twitter or Discord.
Jamon Holmgren:
Perfect. You can find Robin @robin_heinze. You can find Mazen @mazenchami, and you can find me @jamonholmgren. You can find React Native Radio, @reactnativeRDIO on Twitter. And as always, thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky, our designer, Justin Huskey and our guest coordinator, Derek Greenberg. Thanks to our sponsor Chain React. Go check it out, chainreactconf.com. We'll work on Nate to see if we can get him there at some point. That would be fun. Thanks to our other sponsor, also, Infinite Red. Check us out at infinite.red/reactnative. And make sure you subscribe, send this episode over to people, someone who you would think might be interested in cross-platform UI frameworks and optimizations, performance, all that stuff. I think this is a good one to listen to for that. So Robin, do you have a mom joke to send us out in style?
Robin Heinze:
I do. Shamelessly stolen from our company Slack. Frank Kalise, if you're listening, you get credit for this one. I got a sweater for Christmas, and it was picking up static electricity, so I returned it to the store. Do you know what they did?
Jamon Holmgren:
What?
Robin Heinze:
They gave me another one, free of charge.
Jamon Holmgren:
Yeah. Thanks so much, Robin. All right, well, we'll see you all next time.