Supper Club × Nate Weinert and Tamagui

responsivity, by Fernando Rojo, who's kind of a just amazing developer in the React space. Done a bunch of cool stuff.

Yeah.

included. So Yeah. But they but they were like, 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

is that I work for the company that's sort of pushing,

to get that next screen.

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

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 Usually,

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 Properly override things in CSS

React will actually call an API over the network 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, it's like a very there's a whole thing. There's a whole Data fetching side that and, like, kind of a RPC 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.

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.

You

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 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 stuff like that. But you do get to, it's just that it's a very non native way to build an app, because you typically, native apps are all about all sorts of interesting things, I guess, in terms of, like, the direction of where things are going in in the React Native world, 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 But, technically,

Is a classic example, like, you have some markdown in your blog. You have a blog page.

ish 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

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

And then, like, you can request that over the network. So what React server components, I think, basically will do

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.

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

back onto your client. So the idea is I think, okay, the pitch is this. Like, you can

if I'm talking about, like, trade offs, 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 It is very confusing how you will share that data, And,

in the app, like actual screens.

and then that will be rendered which is then underneath rendering a React Native web, trying to figure out a way to do universal apps, so to speak, or to to write an app that is team, which is, like, a new feature that they shipped maybe a few months ago where you can just Comment on any is the platform, and, dot create.

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.

being a thing they'll have to And it's one of those

Vercel is for sure, like, the number 1 implementer right now and supporter of it. And then 2nd disclaimer is that, you know, 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.

it is, like, gonna be a super powerful primitive. It's hard to understand.

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.

and And it just happens. And so I think with React server components, the plan is to maybe prefetch a lot of things.

mutations, you are bouncing around do get to basically have, like, this idea where you can have dynamic pages that you can change 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 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? 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, 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,

connect necessarily?

down. You have to have all the views and everything in your bundle already. All the, like, I like React server components for what it is. I think It is if you're doing a web only project, setting the color scheme or all sorts of things.

React server components. And then, like, 2nd just just 2nd disclaimer.

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 and then just kind of, like, hacking.

Instant native

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, 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 It was the least

I I had no one in my family knew. It the I love to tell this story, but, like,

I also saw Chrome shipped,

They bought me c plus plus for dummies and been enjoying the the weather and the beach and everything, 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.

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

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, in the in the front end world is so centralized, I think, on Twitter these days, 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.

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? the whole

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 Just I don't I hate it and love it, but for what it is, it's got a bunch of stuff.

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 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

Useful thing you could possibly imagine getting, like, a 14 year old.

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.

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.

that. If you're just a beginner, Because React Native has an animated 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.

If you

And so,

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.

There is there will be an extra div for every text.

so well done.

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 And until, you know, Tomaguer or at least and and I think there's libraries now, You know, doing this too, but, it turn it it falls back, I think, past, like, 30 characters or something. It'll just fall back to a hash.

and working on it. Well, the site's gorgeous, and,

originally, because I use Stacks all the time. And then I don't know why snack happened. But, and you have, like, an app open and you have your editor, 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, is

Just quickly and instantly,

Kind of changed but took inspiration from was there. And I think Stitches and Radix, they're like such an inspiring

bravo overall on the site. You do a great job of showing Examples and everything. Looks great.

Tom and Gooey actually flattens 50, 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, to fully kind of have that adaptability Right.

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,

And that Fake Safari browser, So I think the the most interesting thing about local first data. Right? Like, optimistic mutations.

That's it's that and too much time maybe when I was, 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 library

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,

this is the website to check out. And also, you have

but then expo has a thing called snack, which is just like a playground.

couple projects, so well designed, CSS just the idea is very simple. Just well, there's 1 class name that you generate per They were not gonna let you even use class name.

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 kind 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 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 I know, like, some yeah. Some some some of the new React, Not huge, but it's definitely not small, especially if you're just targeting the web.

like, all of that stuff, if if anybody wants to see prime inspiration for theme pickers, light dark pickers, all those things,

So that's just maybe 3 years or or so ago as I was working on a project. I don't think there was much Out there besides 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.

You know, I I really think it illustrates Tomaguie really well. I love how you're showing,

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, 50%. Mhmm. I think there's, like, these new color mixing and color changing. Like, those are cool. I really like that.

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.

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,

and value. So, like, background color red would become something like b c slash red that you'd put on your class name, the fact that you can do spring Very fancy kind of, like, loops and

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? 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 It's just a little bit of a simplification, but very much similar idea.

middle ground between, you know, what we're doing on the web with atomic classes and how

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 which is an optional plug in, that you can add, on top of it. It works with just the styling library, 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.

and underscore b g zero hover.

typical web skills getting you there?

like, these styling bugs. And I

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 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.

instead of having them grouped. You know, I think anyone that grew up doing CSS, like Like, before 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

Next. Js, I think, is is the, 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.

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 But,

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,

a lot of performance work to get

How do the docs again, I think And yeah. So,

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 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, like, it didn't map you can share the code.

A its own class. Right? It's very similar to Tailwind. Border bottom 3 would be its own class.

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.

literally every single CSS property is

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

for example, Tom and Greg always expands things. So if you say padding equals 0, 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

The CSS classes that are obviously generated when you run it through the compiler,

was just trying to get it to work right, and it didn't use atomic styling.

These interactions running at this high a framework or frame rate, or is it just straight up individual components right down to being able to change the themes and colors

padding right should now be 10. So So it makes it easier to kinda, like, very granularly, 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.

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 Yeah. So it started as just styling, 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,

was very similar to Tomaguie. I spent a lot of time On that, I built a whole project with that, if you're, like, a solo developer or a very small team 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.

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,

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 versus, like and in the React world. I don't know how interested you guys are in some of that stuff.

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

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.

Yeah. That's actually, 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 And it was such a heartbreak because at one point, I compiler, say some markdown which are I don't know how much you guys are in plugged into that world, but it's, like, this whole thing now.

react and and

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, Let's call it a superset of React. It adds things like style sheet, but it also adds a bunch of things like, kind of just been my attempt to

the predecessor to Tomaguie and CSS, like, interactive styles. So hover Animation's because I wanted to show off kind of the 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, 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

and that's actually kind of a key to making it work. It's otherwise very, very hard to make it work,

React Native and the web and allows you to have consistent styling across

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,

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, not employed

Which really is this neat thing that unifies

of your preview deployments and sort of, like, Figma style, collaborate, and kind of, like, leave feedback, open issues, stuff like that. So, It has a lot of benefits. I think that's something that's coming in Stylex,

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

I work at Vercel currently.

Welcome to Syntax. In today's Syntax

everything.

overall. Nate, so,

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,

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 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 element nodes, I guess, React nodes like, my 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.

It's this basically just, 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.

Shout out to Versal. I think that's been a very fun project.

And Webb and that doesn't

stylesheet

Supper club, we have a really great guest on today. Nathan Weinert is going to be talking about

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

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 Actually, Like, old school. Wow.

But, The idea, I guess, is that, 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 maybe 45 minutes before it starts, like, telling me to move and, like, that it's gonna start hurting.

You a lot of React stuff since React came out, obviously.

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

have the dev tools open 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.

I have tons of aliases and stuff, I think, built up over the years, but It's, other than that, it's just be able to output, like, CSS media queries, You know, that's pretty close. And I was, like, alright. Yeah. Good point. So I had to change it.

Alright.

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.

I I and also, like,

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.

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.

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

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 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,

I love that. I I do a lot of that too. Yeah. How do you stay up to date?

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

Yeah. I could take that. Yeah.

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

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

yeah.

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.

Quite a bit because the dev tools just take up half your screen, and, you know, if you're trying to 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.

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,

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

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 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? Tamagoi,

yeah, just general places you go to find new projects, new stuff coming out. Oh, for sure.

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 Why? Is that is that why they use 9 divs? Well, I don't I don't know specifically there, but, like, 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 as As every because those are so sensitive to kind of, like, performance.

between them, you're not just trying to recreate the 2 things in both

one thing,

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

to that same functionality where it actually will go native.

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,

Idea behind these things is that if you want to have a consistent UI

for our listeners as well, is that React Native is

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.

and it works on on on both of them. Right? It Translates it for you, and you can get a pretty close or exact,

Camps, you are literally writing

and its React components, but

Also, I know you know this, obviously, but I'll bring it back,

But because we have to make a web component, 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 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 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,

the the thing about React Native is that the the UI later layer is native. So it's

Obviously, JavaScript

Like, they sort of say use a lot of the same primitives. You can share some things, But we encourage you certain parts of your page, if you don't, we'll need them to be. If they can just be server rendered, the pat just the padding right, you know, if you are saying

which is good and, yeah, also confusing sometimes. But, especially, Dark theme with contrast. It's it's a little bit monochrome. I'm slightly color blind, so my my idea was but, yeah, I mean, Twitter, obviously, has a lot of incoming.

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 You're it doesn't it doesn't cascade.

doing Something new seemingly every week almost,

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 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, implement themselves. Yeah. So disclaimer 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.

syntax across both of them, but, you know, we can go into it. I think There's I mean, that's all just mapping to React Native, And, to to get past the cascade because you're basically not cascading in in React Native.

You just import style sheet from React Native,

You just kinda do it in JavaScript.

Yeah.

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

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

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 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.

The problem is

like, on our website, I think a good example is if you look at tomandgooe.dev,

To have to go through 2 levels of React

and it's blue.

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.

And then you're doing that for every single

and or a motion or style components 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 It'll actually just flatten that into a div I joined them about a year ago, actually. So I've been working on the preview comments,

as, like, a as a more, like, react solution from from Meta.

It'll analyze all of that,

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

and it'll pull it all out. It'll and it'll return just a div. So what's But that next screen will come down as a sort of data representation of the components 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.

or stitches.

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,

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 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

Style layouts, which is funny.

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,

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

Which is okay. You can you can mostly do it, but it definitely is nowhere. I mean, grid is, like, 2 ZSH.

kind of an unbelievably powerful

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, 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, You want some dynamic elements maybe around it. Maybe you want, like, a like button.

are to render stuff in the web. You know? Like, Are they meant to be like, some of them are kind of human readable. Like, I see is underscore button

to be worth talking about? Like, I think there's What about your terminal and shell? I term

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.

like, you can't build that Tomaguay website a 100%

For doing layouts and and, the flexibility

stuff, but, like because I think 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, 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.

people complain about CSS, but, like, nay literally name anything better

Oh, yeah. Totally.

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 And then by So you're having every single div in your entire app.

come on. Like, it's class now.

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.

strict, I would say, and it lets you do class name, a a book on XML.

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 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 React is moving in in so many interesting directions at once. Like, React Native is trying to adopt all these web

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

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, Well, sort of. I mean, it's a React project, but but,

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, 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 x 0 if you set up a shorthand.

things now. So they're gonna adopt things like role attributes, data attributes, just like how you do it on a div.

Like, 2 crazy API shipping almost immediately after, like, we we've just got

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,

container queries in Firefox.

Okay Lab. No. PGN. But they they shipped the new, like,

now granted it's just chrome, but had

animations.

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

Yeah. The latest Chrome release,

CSS has is really cool. All the color mixing stuff is really cool. It's just endless new cool stuff.

the color level 4 whatever and page transitions, which 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,

really diving into that and hopefully getting to use it in something real at some point,

I sure hope you're hungry.

This is

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

the Syntax Supper Club.

so buckle up and grab that old handle because this ride is going to get wild.

Hoo. I'm starving.

API the animated API.

There's discussion of adding even just recently, there's 2 RFCs for adding float 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.

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, version of CSS, 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

the advanced libraries. Like, so so Reanimated It took me a long time, I think, to really understand it. I don't know if I still do.

that comes included, 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 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, 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, beautiful div, 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, 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,

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 I would say it's like What else is cool? That is, like, kind of the advantage. I think, And Apple's pretty strict about, like, not letting you just dynamically change things, But if it gets longer, 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, 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 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 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 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.

do animations work. And, also, when I was thinking about the compiler, I was really I read Hacker News pretty they do a bunch of cool stuff. They're like a consulting company from Poland. They Somehow just do these incredible

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.

animated component.

back when I did a React Native app, the the the layout System we had was Flexbox. They had ported

but it's also a bit Finicky. It's not the most elegant API. I think they are planning to rewrite it.

Kinda confused because I was like, wow. So compiling, All the, like, 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, that should be there,

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

and then I think Dripsy property

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?

either React Native web you know, detecting the screen is, like, unified into 1 API.

understands the surface area of what Tomagui is because it's it's obviously What what's The thinking behind that when you're not authoring it like that. So, actually,

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 like, still trying to understand it.

awesome.

it's like, is this really gorgeous 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, beef you know, I've been doing software in some form or another for a long time and, usually, front end

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, So thank you. I'm glad I'm glad that it is.

addictively.