Supper Club × Nate Weinert and Tamagui

Welcome to Syntax. In today's Syntax Supper club, we have a really great guest on today. Nathan Weinert is going to be talking about Tamagoi, Which really is this neat thing that unifies React Native and the web and allows you to have consistent styling across everything.

And it's one of those wonderful looking services that you have to go to the domain to see just from a simply aesthetic purpose alone. This website is An an incredible treat to look at. It's a, incredible treat to dive into and and really explore. So, Nathan, welcome to Syntax. How's it going? Hey. Thanks for having me. Yeah. Doing doing pretty well this morning overall. Nate, so, you wanna give a little bit of high High end. Who who are you? What are you doing? What are you working on with your day to day? And,

yeah, what's what a little bit about Tomaguie too as well. Who am I? I am I am I mean, I'm mostly a software engineer lately during the daytime.

I work at Vercel currently.

I joined them about a year ago, actually. So I've been working on the preview comments, team, which is, like, a new feature that they shipped maybe a few months ago where you can just Comment on any of your preview deployments and sort of, like, Figma style, collaborate, and kind of, like, leave feedback, open issues, stuff like that. So, Shout out to Versal. I think that's been a very fun project.

But, beef you know, I've been doing software in some form or another for a long time and, usually, front end You a lot of React stuff since React came out, obviously.

And yeah. So, living in Hawaii currently, kind just enjoying that. That's that's been for the last year.

Just, you know, remote at Versailles, so I figured why we were in the Bay Area before that and just kind of, like, Had been there for a long time and needed needed something new. So I've been out here and been enjoying the the weather and the beach and everything, and then just kind of, like, hacking.

Yeah. I mean, Tom and Gooey, you know, we can dive in from from any angle, but it's just, it's a project that was born out of a project that was born out of a project That's just been ongoing since forever.

And, it's just it's just like a bone I've been chewing on, I think, for, like, the for since forever. Since, like, since I've been in React, I think, Since the beginning of React, I think I've just been trying to figure out a way to do universal apps, so to speak, or to to write an app that is native And Webb and that doesn't feel like I can't do it because, you know, it's it's been me a lot of times just kinda working on projects. Right? And I think, if you're, like, a solo developer or a very small team building a truly, you know, cross platform app, even if you're using React Native, which is really Great and gives you, I think, a lot of help. It's still just a mountain of work. And so Tomaguie's kind of just been my attempt to Kind of just make that a nicer experience and be able to actually share a lot more code, I think, between the actual React Native apps. And the idea, I think, the goal is to not actually that React Native pitch, which is that you can still actually have it feels, you know, like it's rendering to the platform native primitives, at least in in Some cases right now, like, Tom and I, we're still working towards, I think, getting some of the components to fully kind of have that adaptability Where it'll, you know, feel like iOS on iOS or feel like a web primitive on on on the web, which is kind of the goal. Can you tell us How does styling work in React Native? Yeah. It's, stylesheet dot create.

It's this basically just, You just import style sheet from React Native, and you put at the bottom of your file. You give it you give it a name, and then you put, like, the Styles, it looks a lot like CSS. It's basically like a subset, I would say, or simplified version of CSS, that's kinda just designed to be a JavaScript object, You know, so background color. It's got a lot of the same stuff. It's definitely a subset, especially these days with CSS doing Something new seemingly every week almost, which is good and, yeah, also confusing sometimes. But, but, yeah, I mean, it's pretty straightforward, I think. And then and then you could share it with the web, with React Native Web and kinda have that same syntax across both of them, but, you know, we can go into it. I think There's a lot of sort of ups and downs of that of that sort of setup, and I think they're also working on some cool new stuff there. There is a project from the React Native team that's called Stylex, that they've just started. I think they're I don't know if they've announced it fully yet. It maybe was or is about to be announced, but it's it's kind of a simple.

It's just a little bit of a simplification, but very much similar idea.

You just kinda do it in JavaScript.

Yeah.

So what about, React Native web as a thing. Right? I think that can

make some people a little confused But why would this even exist? Do you wanna give a a high level as to, like, what React Native web is and why anyone would consider using it? Yeah. Sure. React React Native web is a cool project. I think it It was started, like, soon after React Native was launched. The idea is React Native has its own set of APIs there.

Let's call it a superset of React. It adds things like style sheet, but it also adds a bunch of things like, you know, detecting the screen is, like, unified into 1 API.

I think what's interesting is they have all these APIs. They're very simple and and kinda straightforward, and they let you just do what you would expect to do on a lot of native apps. Maybe, like, listening for the color scheme or, setting the color scheme or all sorts of things.

So React Native web just brought that over to the web by kind of polyfilling, I guess, all of the different pieces of it. It's kind of a heroic project.

I think Twitter was built on it Originally, maybe still even. Still is, I believe. Yeah. Yeah. I think so. So, you know, it does some serious stuff.

Also, I know you know this, obviously, but I'll bring it back, for our listeners as well, is that React Native is Obviously, JavaScript and its React components, but the the thing about React Native is that the the UI later layer is native. So it's Every time you have something that scrolls or every time you have a little piece of text or something like that, that's not HTML and and CSS. So, the whole Idea behind these things is that if you want to have a consistent UI between them, you're not just trying to recreate the 2 things in both Camps, you are literally writing one thing, and it works on on on both of them. Right? It Translates it for you, and you can get a pretty close or exact,

match to that type of thing. That that's correct. Right? Yeah. And it's also maybe a good point, like or sort of a good kind of intersection with Tom and Gooey because React Native like, for example, the button component in React Native, it will actually render out to a native iOS button by default on iOS. On Android, it'll render to a native Android button when you use it. Right? So Tomago is kind of The Tomagu button by default actually renders the same across all of them, but then you can fall back in a lot of the components to that same functionality where it actually will go native.

But because we have to make a web component, we you know, it's kind of like we include it by default. So you can have more of a similar UI and share more in the beginning and then maybe, like, actually adapt So but, yeah, React Native sort of stance is not write once, run anywhere.

Like, they sort of say use a lot of the same primitives. You can share some things, But we encourage you to write an iOS app and use iOS primitives a little bit more and, like, kind of do that and make it good. And I think that is Cool. But I do also think that, like, you know, with Tom and Gooey and what I'm trying to do is just still give you that experience, but we could definitely share quite a lot. I think we could share A lot of stuff. Yeah. Let's also make sure that the listener

understands the surface area of what Tomagui is because it's it's obviously Styling. And then you also said it's, like, components as well. Right? Like a button component.

There's but there's more to it. What else is there?

Yeah. So it started as just styling, maybe 3 years or or so ago as I was working on a project. I don't think there was much Out there besides either React Native web and then I think Dripsy by Fernando Rojo, who's kind of a just amazing developer in the React space. Done a bunch of cool stuff.

And then, you know, I think there was maybe native base or something like that, which is which is also a very feature complete library and had been around and a couple others. I don't know. But, at the time, there was nothing that felt fully like, nothing really felt like web native. I think that was kind of the big thing. So so Tomaguie is styling. It's what it started with.

And the goal there was that on the web, I wanted to output CSS instead of I I wanted to get rid of a lot of the JavaScript burden And, be able to output, like, CSS media queries, especially, and CSS, like, interactive styles. So hover And these sort of styles that you typically would want in CSS because they're very sensitive to performance, and I think you can sense in a lot of apps If they aren't doing CSS native media queries and if they aren't doing CSS native, like, hover active type things, you'll notice it, like, pretty quickly, as As every because those are so sensitive to kind of, like, performance.

So Tom McGooey set out to solve those 2 problems initially, and I think that's kind of what it achieved in the very first versions. And then since then, it's just been it's been ongoing.

So I think the the most interesting thing about compiler, which is an optional plug in, that you can add, on top of it. It works with just the styling library, And it goes in and and does, like, a couple interesting things. One is that it generates CSS at build time, so that's nice. You can your bundler can serve it statically upfront.

It has a lot of benefits. I think that's something that's coming in Stylex, as, like, a as a more, like, react solution from from Meta.

But, so I think that was, like that's the key thing, and then optimizing compiler goes further. The coolest thing there, I think, is flattening, which is that, You know, in a CSS and JS system, if anyone's familiar with that, you are kind of, like, building these components by doing, like, here's my little View, I'm gonna give it some, like, default properties down here. I'm gonna give it styles. Just a lot like the React Native style sheet dot create syntax. You're just kind of, like, naming something and giving it a group of styles and or a motion or style components or stitches.

Right? It works the same way as all of those where you're building out this, like, set of these primitives.

The problem is when you're using that for every single div because, right, in in React Native, there's no div. There's a view Mhmm. Which is already One level of abstraction and, like, in React Native Web, a view, if you look at the source code, is doing quite a lot. It's a heavy React component.

And then you're doing that for every single Div, basically, on the entire page is a React component that has to run and render. And then not only that, but when you're doing something like styled A bunch of times, you're, you know, creating a bunch of these, like, components. You're actually wrapping it with 1 more level often in all these libraries, I think. And and I think in every library besides Tomagoi, at least at this point, you have 2 levels now. You have your styling component, which is then underneath rendering a React Native web, component.

So you're having every single div in your entire app.

It it starts to feel slow, basically, is what I noticed as I was building this app Because you it's, you know, it's one thing to have, like, a component like a button that's not that common, but to have a component like a div or every div or every text To have to go through 2 levels of React reconciliation and hooks and all that stuff was actually quite a big cost. So the optimizing compiler, the coolest thing that it does is what I just call, like, tree flattening, which is that at the call site, like, when you actually use one of your styled components. Let's just say you call it, like, my beautiful div, and it's blue.

Right.

It'll actually just flatten that into a div in the actual rent like, wherever you're using it at the call at the usage site And put the CSS class name there, and it can evaluate logic. It can actually do some pretty interesting logic. Wow. So you can do conditionals. You can do nested ternaries. You can do spread objects, Stuff like that that you would normally kind of do maybe with, like, a stat like, to add extra logic and styles.

It'll analyze all of that, and it'll pull it all out. It'll and it'll return just a div. So what's like, on our website, I think a good example is if you look at tomandgooe.dev, there is a little, like, Responsive section on the homepage that shows, like, a little fake Safari Mhmm. Browser. I think it's 3rd or 3rd or 4th section.

And that Fake Safari browser, Tom and Gooey actually flattens 50, element nodes, I guess, React nodes From being what would normally be 2 levels of React components each into just divs. So there's 50 divs that are flattened by the Tomago optimizing compiler, and it makes a big difference. Is is that why

sometimes you, like, inspect element on Instagram or something like that? Like, I'm I'm looking on Instagram right now at a anchor link to link to somebody's profile, and it is wrapped in 9 divs.

Why? Is that is that why they use 9 divs? Well, I don't I don't know specifically there, but, like, technically, actually so, like, it shouldn't render out to extra divs. Although React Native does make you, you have to wrap text always in a text component. That is the one big difference, so that will add definitely, like, an extra, There is there will be an extra div for every text.

But, technically, it's just React that's doing extra 2 layers of rendering, but the ultimate Yeah. Thing Should just be a dip. In fact, the Tom like, one of Tom and Gooey's main things is it doesn't change the structure of output at all. It shouldn't change the structure of the What would actually be rendered, it's just doing that work at build time and, like, kind of flattening things down. So I don't I think that's maybe just a Twitter thing For the most part. Interesting. Or a Instagram thing. Okay. Let's talk really briefly or maybe not briefly about the Tamaguy website because this this is this website built with Tamaguy, you said. Correct? Yes. So this thing is is gorgeous. Did you build this whole website, yourself? Yes. But I I will I I definitely stole Some like, I started by with a lot of inspiration from stitches and, like, huge shout out to stitches because some of the the variants API that I also Kind of changed but took inspiration from was there. And I think Stitches and Radix, they're like such an inspiring couple projects, so well designed, so well done.

So, yes, it's and at this point, Tom and Gooey's sites has diverged quite a lot, and I do take a lot of pride in design. And my, you know, my intro into web programming was Photoshop, like, playing around as a kid, like, doing graphic art stuff. So I've always kind of liked design.

So that's just That's it's that and too much time maybe when I was, not employed

and working on it. Well, the site's gorgeous, and, You know, I I really think it illustrates Tomaguie really well. I love how you're showing, individual components right down to being able to change the themes and colors Just quickly and instantly, like, all of that stuff, if if anybody wants to see prime inspiration for theme pickers, light dark pickers, all those things, this is the website to check out. And also, you have an an X mas mode and a Tomahoe mode. I'm such a sucker for that. I built a wave A 64 mode into my side, so, like, I'm very, very down with this style of thing. Oh, is Tom Tamagotchi specifically makes a a small appearance in here. Is that, a fun little nod to Tamagotchi overall. Yeah. Yeah. It was called Snack UI,

originally, because I use Stacks all the time. And then I don't know why snack happened. But, but then expo has a thing called snack, which is just like a playground.

Yeah. But they but they were like, You know, that's pretty close. And I was, like, alright. Yeah. Good point. So I had to change it.

That's sweet, though. I I do like that touch. It's the site does a a great job of bordering on whimsical, but also, like, super informative. The whimsy is not getting in the way of anything. So, bravo overall on the site. You do a great job of showing Examples and everything. Looks great.

And so, congrats on that. It is Thank you. What are your docs made with, by the way? Is this all custom, Or is this using some sort of a doc system?

How do the docs again, I think I I think for the Radix site, I Definitely copy and pasted some of the, like, syntax highlighting stuff and, like, some of the structure like, some of the initial kind of, like, structure, but, yeah, I did rebuild it all in Tomaguie.

Next. Js, I think, is is the, is the platform, and, yeah, just it it took a while. I mean, I think it's weird that Tomagu is actually kind of, To me, an old project. I was looking at a video I recorded 2 years ago, over 2 years ago of me, like, playing with it. So It's, it's built up over time. But, yeah, the docs are the docs are, like, somewhat custom and borrowed from, from from Radix. And the

The CSS classes that are obviously generated when you run it through the compiler, Are they meant to be like, some of them are kind of human readable. Like, I see is underscore button and underscore b g zero hover.

And then some of them are just generated hashes. What's the ideas behind that?

Yeah. That's actually, it's trying to do sort of a so it generates atomic styles. If people are familiar with that, we can touch on that. But it generates, like, Tailwind style one CSS, and that's actually kind of a key to making it work. It's otherwise very, very hard to make it work, but it if the it tries to just kind of, like, do the real like, human readable. So, like, it'll try and do, like, p x 0 if it's padding x 0 if you set up a shorthand.

But if it gets longer, it turn it it falls back, I think, past, like, 30 characters or something. It'll just fall back to a hash.

So it just kinda depends on the length of the generated hash. So

literally every single CSS property is A its own class. Right? It's very similar to Tailwind. Border bottom 3 would be its own class.

What what's The thinking behind that when you're not authoring it like that. So, actually,

the predecessor to Tomaguie was very similar to Tomaguie. I spent a lot of time On that, I built a whole project with that, and I kept iterating on it. It didn't do native at all. Actually, it just was a web focused on this was this was years ago, so maybe 5 or 6 years ago.

And it was such a heartbreak because at one point, I was just trying to get it to work right, and it didn't use atomic styling.

And I was running into these weird little edge case bugs, and I was getting frustrated. And I was like, 1 month, I think, I was in this project, and I was just like, I'm gonna fix, like, these styling bugs. And I Was getting deep into it, and I realized that I mean, atomic styling, I think, is the only way to sort of, like, be able to Properly override things in CSS that that doesn't, like, drive you insane, especially when you're generating CSS. Because generating CSS too, like, you just kinda don't. I mean, you need to have, like, this control to to get past the cascade because you're basically not cascading in in React Native.

You're it doesn't it doesn't cascade.

So but, also, like, when you're on the web, you just, like as you're generating stuff, you need to override things very granularly. So it just lends itself to generating it like that. But the the thing was that the way I had designed this library, the features I'd put into it, it just didn't like, it didn't map to Atomic Styles. So, actually, Tomagoogoo was a rewrite. I was just I spent, like, I think, a few weeks trying to, like, get that to work in this library, and I realized that, like, I had made too many architectural decisions at that point, that were against sort of generating atomic styles and just gay and just gave up. And That was the end of the whole project. Yeah. Yeah.

Can you can you just explain what atomic styles are for for audience? Like, I know we know about them, and you you kinda touched upon it, but it'd be nice that people can hear exactly what it is. Yeah. So,

just the idea is very simple. Just well, there's 1 class name that you generate per CSS property and value. So, like, background color red would become something like b c slash red that you'd put on your class name, instead of having them grouped. You know, I think anyone that grew up doing CSS, like Like, before this all this stuff existed, you know, the proper thing was to have separate CSS, and then you give it a nice name. And then you group a nice group of styles together that makes sense.

So this is very different. It's like Tailwind. Anyone who knows Tailwind sort of knows exactly what it is, which is just that there's 1 property per One class name per property. And you also have to expand that. I think that's part of it is right. Like so, for example, Tom and Greg always expands things. So if you say padding equals 0, It'll expand it to be padding left equals 0, padding right equals 0, padding bottom equals 0 because then and that's kind of key to understanding why the other system broke is that down the road, if Below that, if you overwrite something, you need to be able to overwrite the pat just the padding right, you know, if you are saying padding right should now be 10. So So it makes it easier to kinda, like, very granularly, overwrite things as you go down and kind of avoid some of the cascading logic. You know, basic you can basically sort of Stop cascading, I think, is maybe one way to think of that too or, like, control it very granularly. Yeah. It feels like I mean, using that kind of system in a React Native context would be a nice,

middle ground between, you know, what we're doing on the web with atomic classes and how styling works in React Native. Know, one thing I'm really impressed with in Tomagui is how some of your components, the ones that require, like, buttery smoothness, like, Smoothness like the sheet component, right, where it's like a draggable kind of it's it's actually funny that you call it a sheet because we call it a sheet too, and I base it on nothing in our own UI. And it's basically the thing that flies up, and you can swipe it down away if you want. But your popovers, your anything that animates on screen is On web, because I I'm not using any of this stuff on mobile. On web is buttery smooth. Did you have to do, a lot of performance work to get These interactions running at this high a framework or frame rate, or is it just straight up react and and typical web skills getting you there?

Yeah. Yeah. Well, thank you, man. I mean, that's, that's awesome that it's and, yeah, it's good. It's I'm I'm always, like, nervous that everything's regressing at all times. Tomaguay surface area is Huge, and it has regressed so many times. So it's it's weird to me that it, like that everyone's getting good experiences these days for the most part.

So thank you. I'm glad I'm glad that it is.

That's actually so the Tomagoi site so Tomagoi has, one of the problems that I ran into, and this was interesting, was animations. Like, how How do I do animations? Because React Native has an animated library that comes included, but it's also a bit Finicky. It's not the most elegant API. I think they are planning to rewrite it.

And then there's also this library that has come out for the in the last Couple years, it's very popular. It's called, Reanimated by Native Mansion, I think. And I'm gonna go speak at their, you know, little I'm gonna speak at App. Js, which is their conference.

But, they do a bunch of cool stuff. They're like a consulting company from Poland. They Somehow just do these incredible the advanced libraries. Like, so so Reanimated is this really gorgeous animation library for React Native that came out and sort of got a lot of popularity. There's a lot of people using reanimated. And then on the web, obviously, you know, animations are typically CSS. And so I had this, like, problem of how do animations work. And, also, when I was thinking about the compiler, I was really Kinda confused because I was like, wow. So compiling, but then also animating, is that gonna like, what what's gonna happen there. I was a little bit nervous that I was gonna run into the situation I ran into with my last selling library where I'm gonna create this giant library and invest all this time, and then I'm gonna add animations and realize that, like, Actually, you know, like, the structure of or the architecture or something just doesn't work. So I kinda started playing with it early on. It lets you basically plug in the drive as a driver, so to speak, of what you wanna animate with And gives you, like, a consistent sort of syntax. Now it's very like, right now, I'd say the animations are they work very well. You can do kind of, like, what you'd expect, but it's nothing fancy. You can't do, like, Very fancy kind of, like, loops and stuff like that. But you do get to, plug in a driver, which is cool. So on the web, you can plug in a CSS driver To run your animations and not take the weight of because the the React Native animated library, I think, by itself is, like, 30 kilobytes of compressed JavaScript. It's Not huge, but it's definitely not small, especially if you're just targeting the web.

And until, you know, Tomaguer or at least and and I think there's libraries now, You know, doing this too, but, you kinda had to accept the fact that, like, you needed to bring along all of React Native, all of React. It just got your bundle got pretty huge. So I wanted to support CSS animations. I'm kind of maybe answering this too long because the funny thing is the React the Tomagoony site does not use CSS Animation's because I wanted to show off kind of the the fact that you can do spring based like, cool spring based animations with the animation drivers. And so that's, I think, part of the reason why the animations feel kinda nice. They bounce a little bit. Like, the models bounce in and out a little bit like a spring.

I mean, that's all just mapping to React Native, animated API the animated API.

And then, yeah, you just, you know, have have to make sure nothing else is going on on the main thread. Okay. Okay. What what about layout in React Native? This is not Well, maybe it's it's part of Samoguis. I remember

back when I did a React Native app, the the the layout System we had was Flexbox. They had ported whatever the Flexbox equivalent was to React Native. Is that still the case? You still use Flexbox for everything? Yep. The case it's still Flexbox.

There's discussion of adding even just recently, there's 2 RFCs for adding float Style layouts, which is funny.

Like, old school. Wow.

Yeah.

Why? Yeah. Yeah. Yeah. Why is the best question there. Yeah. I know. And I said the same thing. I was, like, wait. Why? But I guess, actually, it does make sense. Like, sometimes you do want to have an image and text that like, the image is on the right side of the text flows around it, And you can't do that. Yeah. Yes. That's what floats are for. Yeah. So so that's the reason, I guess, just to have React Native be able to render text documents more like the web.

And then in Grid, there are some murmurs of Grid. I don't think I think there's some people talking about doing it, but there's not much of a commitment. So it's basically Flexbox. I was thinking about that the other day about, like, how Lucky we

are to render stuff in the web. You know? Like, people complain about CSS, but, like, nay literally name anything better For doing layouts and and, the flexibility that we have in the web, even just something as simple as text wrapping, we often take for granted. Mhmm. Oh, yeah. Yeah. You can definitely feel that,

when when you're doing a, you know, React Native app. It just floats, which or just flex, which is, Which is okay. You can you can mostly do it, but it definitely is nowhere. I mean, grid is, like, kind of an unbelievably powerful

Layout. Do you ever have to, like I know you say there's escape hatches.

Do you ever say, okay. I'll do it in flex for the mobile app because it's Skinny. I guess it maybe not now that our phones are getting so big.

But then I'll do it in grid on the web. Is that ever Is that ever a case, or do you try keep it 1 to 1? Yeah. Actually, I was frustrated about that in React Native Web. That was one of my big frustrations was that they had a very strict Policy of no escape hatches.

They were not gonna let you even use class name.

So I think at one point, they supported class name, And then they removed it, and that was, like, a whole like, there was a big fight on that issue, including me being, like, well, come on. Like, it's class now.

Come on. What am I supposed to do? You know, they got to wrap every maybe that's why they wrapped a lot of things on Instagram. But you do have to wrap I mean, not really. But you do have to wrap things then if you want to do web things. So Atomago is a lot less strict, I would say, and it lets you do class name, on any of your components. And that's, basically, how I end up kind of, like, bailing out. And the the the website, to my to to the credit, like like, you can't build that Tomaguay website a 100% And Tomaguie, I am doing escape patches for certain things, like, you know, gradient blurry gradients and stuff like that that just don't, like, have. There are blurry gradients, but not, like, radial gradients, stuff like that. You know? I definitely do I definitely use the escape patches,

quite a bit, and the class name is usually that escape hatch. Well, is there anything that we we haven't touched on that is interesting to be worth talking about? Like, I think there's

all sorts of interesting things, I guess, in terms of, like, the direction of where things are going in in the React Native world, versus, like and in the React world. I don't know how interested you guys are in some of that stuff.

I know, like, some yeah. Some some some of the new React, stuff, but, like because I think React is moving in in so many interesting directions at once. Like, React Native is trying to adopt all these web things now. So they're gonna adopt things like role attributes, data attributes, just like how you do it on a div.

A lot more CSS styling. I think they're aiming to get, like, you know, gradients in as, like, a first class style primitive and stuff like that. So there's interesting things there. But then at the same time, you have, React server components, which are I don't know how much you guys are in plugged into that world, but it's, like, this whole thing now.

Oh, yeah. Totally.

Yeah. It's it's interesting because it's it's, like, how does that work with React Native apps? And there's a lot of talk that The React team has said that, like, yeah, it'll work. It'll work, and I haven't really we haven't really seen a lot of, like, well, how, and I think I've got an idea of how now. But I do think it's just interesting on a meta level of, like it's actually interesting because I think it almost is like a doubling down of React on this idea that, like, Don't write your app once. It's a very anti Rails sort of or anti just, like, you know, let's make things, like, as clean as possible to share code. Because I think what it is, it's very it's like this super powerful thing for the web.

It is very confusing how you will share that data, Share that code with native. I think, in fact, you will be you will potentially be able to and and but what what will happen is that you'll your code won't look very much like a native app anymore. So there's some interesting things there. I mean and then in Tomaguie, there's interesting things too. Maybe, I don't know if there's there's plenty of, like, I think maybe, like, interesting details technically. So happy to, like, keep In that, if you don't wanna No. You know, I I think it's

interesting, especially in the React Native world with these server components. Like, what is the temperature in the React Native ecosystem around server components? Like, how do people feel about the concept and the idea, and how do people feel about it potentially, being a thing they'll have to

implement themselves. Yeah. So disclaimer is that I work for the company that's sort of pushing, React server components. And then, like, 2nd just just 2nd disclaimer.

Well, sort of. I mean, it's a React project, but but, Vercel is for sure, like, the number 1 implementer right now and supporter of it. And then 2nd disclaimer is that, you know, I like React server components for what it is. I think It is if you're doing a web only project, it is, like, gonna be a super powerful primitive. It's hard to understand.

It took me a long time, I think, to really understand it. I don't know if I still do.

Yeah.

And, It's it's very ambitious. It's very powerful. It feels like, a piece of technology that lives at a low level to me. Like, I think A lot of frameworks will maybe either, like, make it a lot simpler to use in the future, maybe abstract it a little bit. It's Trying to solve, like, a lot of things at once, I think. So it's just, like, this complex beast. And for and I think that a lot of people are, like, still trying to understand it.

And maybe the, like, current understanding right now is that you don't have to send over as much you don't have to send over as much JavaScript. You don't have to hydrate, so to speak, certain parts of your page, if you don't, we'll need them to be. If they can just be server rendered, say some markdown Is a classic example, like, you have some markdown in your blog. You have a blog page.

You want some dynamic elements maybe around it. Maybe you want, like, a like button.

You want some stuff that is dynamic, floating, even maybe some examples inside of it. But for the most part, you shouldn't be sending that JavaScript that renders the markdown and all that. That should just be sent over as, like, a bunch of divs from the server, and then there's no JavaScript associated with that. So they're trying to solve this problem that I think has been a The problem of of React, which is that, yeah, you do server side rendering.

So you do send over that static HTML. That's very nice. But then you're also sending over this, like, huge bundle of JavaScript Usually, that that represents the entire page no matter what, and then you have to run that huge bundle of JavaScript to hydrate the entire page, and you get this lockup period. And they're trying to lower that cost, but then there also is data fetching included. So there's a whole thing. There's a whole Data fetching side that and, like, kind of a RPC ish

thing going on. And, so that's where it gets very weird and interesting. Yeah. But with React Native, there is no Dom. So, like, how does that all connect necessarily?

I guess that yeah. It's all It's all mystery to me. That is the mystery. I think from my understanding, and don't quote me on this, so to speak. I'm not the expert here. But from what I understand, the idea is You will make a network request to like, imagine you're going from 1 screen to another in a app. You're clicking, like, into a detail page or something of a product.

The idea, I guess, is that, React will actually call an API over the network to get that next screen.

But that next screen will come down as a sort of data representation of the components that should be there, And then and then that will be rendered back onto your client. So the idea is I think, okay, the pitch is this. Like, you can you can share the code.

You do get to basically have, like, this idea where you can have dynamic pages that you can change Without having to redeploy your app, I think this is the pitch is that, like, native apps, you know, you don't you have to redeploy them and re get the review.

And Apple's pretty strict about, like, not letting you just dynamically change things, in the app, like actual screens.

I guess there's this workaround that companies do now, Which is that you can sort of do that as long as you don't send the components down. You have to have all the views and everything in your bundle already. All the, like, All the, like, components and screens sort of able to be built, but you can send over a JSON sort of imagine a JSON representation of the Screen saying, like, here's the components that and how they should be laid out.

And then, like, you can request that over the network. So what React server components, I think, basically will do is Do a network fetch for that next screen. It says, here's the structure of that screen, but you know how to build it yourself on the native side. And then that The native app will then go in and, like, take all the components it already has and build out that screen. And so it gives you this idea that you can probably you the this, like, thing that you can sort of, like, Not have to re go through the App Store approval process every single time.

That is, like, kind of the advantage. I think, if I'm talking about, like, trade offs, it's just that it's a very non native way to build an app, because you typically, native apps are all about Instant responsivity, local first data. Right? Like, optimistic mutations.

Everything wants to feel you know, native apps were sort of famous for just, like, feeling better because everything you do happens immediately. You tap, and And it just happens. And so I think with React server components, the plan is to maybe prefetch a lot of things.

But it but the but then it's, like, How do you do like, you kinda like, you you you want, like, data like, I don't know. If you have, like, a list and you're sorting it or something, then it becomes very complicated. I think you have to rewrite maybe that component to be, like, Native specific. So I do think you'll end up with a lot of these, like, forks or maybe just a lot of, like, weirdness where, like, your data model is living on the server somewhere.

But what happens when you need to, like, drag something to resort it or you need to do something very dynamic? Now you have to, like, maybe have this, like, special logic that's, like, doing optimistic local first type b native mutations, Or you have to hope that, like, your prefetching is for the next page is is fully resolved so that you get that native experience. And so that's where my question marks are

Yeah. And and and like you said, you know,

the further you get away from, like, true native development, at some point, you're like, why am I not just using a web view And then getting access to the whole Dom anyways. But, you know, I don't know. It's all it's all very interesting world that I I think We'll see exactly where where it shakes out. Alright. Let's move into the supper club questions. These are a set of questions that we ask everybody that comes on the show.

First question we have for you is what computer mouse and keyboard are you using?

So day to day, I am a weird person that just works on my laptop.

I don't work at a desk. I got I have a weird lower back. It's so this it doesn't like to sit at a desk for more than about maybe 45 minutes before it starts, like, telling me to move and, like, that it's gonna start hurting.

So, I've never been able to be comfortable sitting at a desk during the day unless my feet are, like, all the way up. You know what I mean? So I've gotten very comfortable just, like, on being being on my MacBook Air even. I love that. But right now, I'm I'm at the desk because that's where the Microphone isn't everything, and I'm using a magic mouse and a magic keyboard. Pretty boring. Could you do you stand up and take it somewhere, or or Do you, do standing desk thing, or what do you do? I'm always moving. So, like, couch is common, but, like, different positions. Like, laying back, maybe I'm leaning forward on the coffee table. Think, for me, the key is, like, I just gotta be kind of, like, shifting around. I can't be sitting in one place. It's I don't know. Maybe it's just ADHD, but I think it's also definitely part partly my back.

So I'm all over the place. I don't do standing. I don't know. I've never gotten used to standing desk For some reason. Yeah. Well, I mean, there's some there's some options. Right? Standing is an option. I do the I do the treadmill under the desk, and that is actually pretty awesome.

Somebody likes to bop around while I'm working too.

I was often known as the guy who sat on the floor doing stretches while I was working, So I I I get your vibe about moving around a lot while you're having to work, but, yeah.

I I and also, like, You're you're on your one screen? How how do you like just being on 1 screen?

I I know me personally, I've been loving 1 monitor, 1 screen. Yeah. You get used to it. I mean, the only time it's very uncomfortable, I think, is when you're when you really have the dev tools open and you have, like, an app open and you have your editor, you are bouncing around Quite a bit because the dev tools just take up half your screen, and, you know, if you're trying to fix a desktop app or something, right, like, you need to have, like, a bigger Mhmm. So that's the only time where I'd you're kinda jumping around a lot, but you get used to it. Yeah. What, what text editor or theme and font do you use? Oh, that's a good question.

I well, I mean, Versus Code, but I have a theme that I've been playing with. I think I have a tweet I could I can send you guys a link or something, but, it's like a very Dark theme with contrast. It's it's a little bit monochrome. I'm slightly color blind, so my my idea was somewhat monochrome and then just have these, like, pops of color, like, just, like, Bright yellow. So it's a it looks like Batman, maybe. Like a Batman theme.

Alright.

Yeah. I could take that. Yeah.

What about your terminal and shell? I term

2 ZSH.

I have tons of aliases and stuff, I think, built up over the years, but It's, other than that, it's just

it's just that. Yeah. What kind of stuff do you like to alias? Just

stuff you do a lot. Yeah. Like, I have, like, a bunch of, like, GPD, which is get or GP, which is get pushed, GPF, which is get pushed force, GPL, get pull.

I love that. I I do a lot of that too. Yeah. How do you stay up to date? Like, in, like, the with the scene. Right? Like, In, like, tech in in the scene, but, you know, how do you how do you know what's going on? You know, you're on a lot of the cusp of things given React Native is kind of the cusp of things all the time anyway. So, yeah, just general places you go to find new projects, new stuff coming out. Oh, for sure.

I would say it's like it's like, in the in the front end world is so centralized, I think, on Twitter these days, in terms of just, like, Creators that are tweeting out about certain things are a little bit, too much drama, I think, lately too. But, but, yeah, I mean, Twitter, obviously, has a lot of incoming.

I read Hacker News pretty addictively.

Just I don't I hate it and love it, but for what it is, it's got a bunch of stuff.

Do I do anything else? I mean, Vercel is kind of a plug. It was, like, part of the reason I came to work there.

It's, like, Everyone's building stuff here that I wanna know about, so, like, that's part of, like, the benefits, I think. Yeah. And it does seem like internal channels are often something we hear a lot about, You know, work work channels and Slack channels or whatever where people are finding cool stuff. Yeah. Actually, the sharing like, the some of the channels that people just post, like, They, yeah. Everyone there is so connected. So I don't know what they're doing, but, I'm I'm profiting there. Yeah. Yeah. Yeah. That's

awesome.

If you had a piece of advice for beginners who are either getting into web dev or maybe are interested in get getting into React Native, Would you have any advice for them? Is this where I plug Tomagui?

No. Go for it. Yeah. If if you're getting if you wanna build a web and native app, The Tomagoi starter, I think, is I don't think you're gonna get much better in terms of, like that's that's, like, a year's worth of work, I think, that you would Oh, wow. Or you know what I mean? Like, especially as a starter, that's it's a lot. Unless you found another very comparable thing, but that's only if you're doing if you're doing web and native, you wanna do React Native, Then I will plug that. If you're just a beginner, I would not plug that. I would say don't don't try and build a native and web app at the same time. That would be my advice.

Do one. Like, I I if I was really trying to just get in, I would I would probably try and find, like, a good boot camp, you know, like because I think you just need someone to tell you what to do, and you need to, like, We need to get some, like, hands on experience, but, I've heard good things about all I mean, these days like, when I was growing up, I I had no one in my family knew. It the I love to tell this story, but, like, I was getting into, like, computers and stuff. I liked them. I love It was obvious that that was kind of a direction I was going in. My family wanted to encourage it. They bought me 2 things.

They bought me c plus plus for dummies And, XML, a a book on XML.

That was my uncle's recommendation who who was, like, the computer guy in our family. He says XML is the future.

The big red one from rocks? It was an O'Reilly. It was green. Oh, okay.

It was the least Useful thing you could possibly imagine getting, like, a 14 year old.

Like, I had no idea. I mean, I'm 14. I'm trying to build wanted to build, like, a an app that had, like, a button, you know, like and had, like, a you know, that you could type or something. I wanna build, like, a game or something. Yeah. And, and I have a c I have a c plus plus book where it's, like, it's teaching you how to, like I I didn't know a CLI. You know what I mean? Like, it was terrible. So Oh, yeah. So Oh, yeah. I mean, web is so cool because you can just hack on it these days, and there's so many ways to just deploy easily. Like, yeah, maybe plug Vercel. Like, you very easy just to get pushed somewhere and plug it in and, like, and get going. So I would just say pick any framework Yeah. That that that gives you, like, just a little bit, you know, so you don't have to figure out routing. So and then or or, you know, maybe build, like, a just design a website and just put together some divs, but, the resources are incredible these days compared to back then. Yeah. What's something that you're excited about in the future of web dev? I think Some of the color stuff that's coming on is cool being like, the my one of my biggest frustrations has been, like, I have a variable that is, like, a hex value, and I want to make it opacity 50%. Mhmm. I think there's, like, these new color mixing and color changing. Like, those are cool. I really like that.

What else is cool? There's so much going on. I mean, you guys know honestly, like, I wanna ask you guys what you're excited about. Like because I'm not as plugged in. Like, I feel like Slowly lost touch with a little bit of the CSS world. You know what I mean? And there's just so much going on. So I'm a I'm I'm a bit of a, like, outsider. All that All that color stuff.

I also saw Chrome shipped,

animations.

Okay Lab. No. PGN. But they they shipped the new, like, color color specifications so that your gradients look so much better because there's new color Color profiles. That's the word I'm saying. Okay. Lab is the new color profile. Now it's a chrome. Your gradients look way better in them. It's it's CSS has is really cool. All the color mixing stuff is really cool. It's just endless new cool stuff.

Yeah. The latest Chrome release, now granted it's just chrome, but had the color level 4 whatever and page transitions, which Like, 2 crazy API shipping almost immediately after, like, we we've just got container queries in Firefox.

It's just it's a wild time for CSS. So, yeah, I I think the thing I'm most excited about personally is those page transitions, really diving into that and hopefully getting to use it in something real at some point,