Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai

I sure hope you're hungry.

Hoo. I'm starving.

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, so buckle up and grab that old handle because this was going to get wide eyed as old.

This is the Syntax Supper Club.

Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, Hey. We've got Aiden Bai on today who is claiming to make React 70% faster just by wrapping your components In a function.

So pretty excited to talk to Aidan about that and whatever else goes on, with today. Maybe he'll talk a little bit about his JavaScript journey. I think he's a pretty young guy, so I'm curious about how how he got into it and all that. So welcome, Aidan. Hey. So happy to be on. So, Yeah. A couple I think last week, it just started popping off on Twitter where you I don't think you released it because I looked into it. Million. Js has been around for a couple years now, but it seems like last week I don't know if you've released Something big or whatever, but everyone was talking about this 1,000,000 JS, which will, make react 70% faster. I'll let you actually explain what it is. Did you release something last week?

Yeah. Last week, we released automatic mode. So, originally, we had, like, 1 or 2 primitive APIs you could use to wrap your components. But with automatic mode, it kind of automatically does that for you. And so, a lot what a lot of people were excited about was basically a drop in, like, enhancement for React. Awesome. So

Let's give us a quick rundown of what it is, and then we'll we'll get into the the nitty gritty.

Yeah. So fundamentally, 1,000,000 is both is essentially a virtual DOM replacement for React, and that's a mouthful. Right? Like, what does that actually mean? Basically, it takes React's rendering engine. So, like, whatever it does to put stuff on the page and says, You know what? For this component, it's not your job anymore, and it tells and it has, like, a faster version. So imagine if you took, like, like, a Chevy truck, And then you, like, put it like a Tesla motor in it, and now it's faster. That's, like, kind of the idea there. Right now, we have support both the manual and automatic modes. Manual allows you to define components as blocks. So, essentially, optimizing certain components on, like, a granular basis. We also have automatic mode, which tries to make those decisions for you.

It's really pretty simple in in in conceptually.

The main part that Milliant optimizes is the reconciliation process.

Not a lot of libraries do this. You may see, like, Libraries like pre act signals, those opt those optimize reconciliation. But, like, let me think of a good example. Like some state management library, those optimize rendering, Our memo optimizes rendering, but 1,000,000 specifically optimizes reconciliation.

Okay. So can you give us a a quick rundown of how does React.

Do rendering right now, and and maybe explain what the virtual DOM is for our listeners. Sure.

So the React kind of renders in cool phases, but, just like in simple form, once you have a component and you render it, It runs the component. Like, you can literally imagine it runs the component once.

And so so, like, you calculate the hooks, you calculate the data, and then you return the JSX.

Reconciliation happens when React takes all that return JSX and does something with it. So, essentially, The virtual Dom kicks in here. Reconciliation contains the virtual Dom. It figures out the differences between what you currently have on the page and what you currently have on your JSX, Figures out the sniffer says and makes those updates.

So essentially, it's kind of your update thing. Oh, okay. I see. And and React

It has this idea of a virtual DOM, meaning that it it sort of maintains what your entire page or application or component looks like.

And then when something has changed, React diffs those 2 things, and it knows where To update the pieces on the page. Is that correct? Exactly.

And so what does 1,000,000 JS do

to make that faster? The river is slow because you have the dip of things. Right? So as your tree or as your JSX gets bigger, the slower the component is gonna get, especially if it renders a lot.

So what we do is we we say, okay. What if we treat the virtual GOM as kinda, not as the work we need to do, but rather as a reference. So we can use a compiler essentially use a compiler to Figure out where kind of your data goes into your j sec. So, like, imagine, like, solid JS direct updates without signals.

That's If you know SolidJS. So, like, if you have some count data and it goes into, like, a very, very nested DIV, in your JSX, It essentially doesn't need to diff every single div that goes down. It just needs to, you know, check that 1 piece of data, and it updates it. And so it's direct DOM updates using the virtual DOM but without diffing. Oh, okay. Yeah. Because so we talk a lot about React on this podcast, and we also talk a lot about,

like Svelte on this podcast. And that's that's kind of the difference is is React is virtual DOM, and and Svelte doesn't diff the entire thing. It just knows where that span is on the page, and it knows to directly go to that span and update it. Yeah. It's 1,000,000 is basically conceptually the same.

Like, the one difference is we follow a component model. And so whereas Svelte has, like, these templates, we have components.

And we know that certain parts like your component is data and the components go JSX, and conceptually, it's the same as Svelte From there. Interesting. So the compiler really is the secret sauce because

I think, you know, when we first see all of this, we all say, Well, this is this is really amazing. Why isn't React themselves doing this? Right? And is it really Just that fact that you're you've introduced a compiler here and and, you know, that would be a big step for React to do themselves. It it's well, first, yeah, Part compiler, part trade offs. So,

with any solution, there will come trade offs. Right? And so if you think about it, we don't support a couple of things. We don't support, conditional expression. So, like, early returns in your component.

And you can imagine why because we need to collect when we compile the component, we want the JSX to be static. So we'd know where, like, the certain, like, parts in the JSX are, and we can update those.

But If we have an early return, like, let's say we return a null when the data isn't loaded, we can't overly optimize that. And so that's something we opt out of. Another thing we opt out of is very, like spread expressions in your attribute search come children. Essentially, Anything that makes the component quote, unquote nondeterministic, or not stable, is is a trade off.

Compiler is also another doozy.

They're not easy to create, and they're often shaky or leaky.

So,

making a really good one is also very hard. Yeah. Let's let's even dive into that a little bit more. Like, what what what goes into the process of creating a compiler? What languages did you choose to build in and, like, maybe what kind of things do you have to look out for? Right now, I'm just using, using babble transform.

I guess compiler is a little bit like, it it only applies to web development world. It's more of like a like a preprocessor if in, like, CS terms.

But, essentially, I just walk the walk the bag babble AST, figure out where certain quick things are, and then compile it out.

It's the same

Tech that Solid uses to to compile as well. So one thing I'm curious about is you said I I sent you a DM, to say, hey. You wanna come on on on the show? And you said, yeah. I was a big fan of your beginner JavaScript is one of the main reasons I learned to program in the 1st place, which is not to toot my own horn because, like, obviously, You're way in.

You're way ahead of me on this stuff. How do you go from taking my course a couple years ago To writing compilers and trying to figure out how rendering engines works on. Like, what's your background in this stuff? Yeah. Yeah. For I I I remember vividly just, like, looking up,

courses on Udemy and stuff. So, like, just for context, I I started coding in 5th grade.

I'm 18 right now.

So I've it's been around 5 years or 6 years.

I started coding because I wanted to play cool math games in my Chromebook, but I couldn't because of a firewall.

And so yeah. I mean, like, that's a good way to learn, like, get into coding, but, like, Not enough to learn, like, foundational skills. And so I was like I remember I was looking I don't know when this was, but, like, I remember either middle school or high school, I was, like, Looking on looking on, like, Udemy and, like, online courses, I was looking at, like, Dan Abramov's course, and I was like, I stumbled across your course. And I was like, this is really cool. I wanna try it out. And yeah. And I remember, I don't know if it was you, but, like, there's, like, guides online on certain things. And I was, like, looking at this stuff, and I I remember, like, the name West Boss on, like, half of the Mhmm. Things looked at.

That that's awesome. So you just learned. You're you're 18 years old, and you just picked up

programming casually while you're in high school? Like, you you haven't got a university or college or anything like that? No. I'm I'm going this in, like, in 2 months. Wow. That's that's amazing. And you've put out something that people are are seeming to latch onto and see the benchmarks and see how Exciting it is. I you know, I even sitting in to meetings, I'm hearing people talk about 1,000,000 JS. Like, oh, we should experiment and Explore this. And that how does that feel to be, you know essentially, I don't wanna say you're you're super new to this, but you're you're new ish to this and you're in this Position now, you you're you haven't even gone to university, and and people are are talking about a project that you've used. How does that how does that feel as a developer? It it's really cool.

A couple of people have I put out a tweet. I was like, hey. Who's using this in production? And they're like couple of people were like, I just merged the PR using 1,000,000. I was like, it's it's really cool to see these things because I don't know. It's like, as someone who's new, it's really weird to see people kind of respond to things that you create or respond to things that And they use it in their own projects. So it's it's really validating. It's really cool.

It's really exciting to see. And so you also worked on a a piece of software, which I I would say I'm intimately familiar with, which is the Wise WebRTC, stream. Right? You were you were just as an intern? Because for the longest time, you couldn't get Wyze On the desktop. And that's something I like to do is have my cameras open sometimes when I'm working. So, when when that came out, I was beta testing it, and I went deep on that thing because I was like, I gotta find how to, like, reverse engineer and get the streams from this thing. You know? And they did a very good job at at just stopping you from doing that.

So you you just got a job interning for Wyze and and helped build that whole UI? Yeah.

I I didn't build UI specifically, So I was, like, 1 of 2 engineers on that project.

And so I was, we we optimized the RTC by, like, from 40 seconds to, like, 10 seconds on at least are from our benchmarks.

Mhmm. And I also implemented a million there as well. That whole interface is a nightmare.

It just had Mhmm. I mean, I like, literally, I was doing support requests on the forums instead of, like, some I don't even wanna talk about it. It's it's it's a nightmare.

Well, it as a user, it it's nice.

I'm sure it was it was tricky to build, though. That That's kinda interesting. But, like, how do you even get a internship at Wise when you're in do do you did you have an in with them, did they recognize your your work online and ask you, or what does that even look like? Yeah. It's a little bit of both. So,

I I got the CEO to kind of email my, GitHub. So, like, I sent my GitHub to the CEO. The CEO kind of forwarded to, like, everyone in the company, they're like like, there's this kid who has, like like, a project with so and so many stars. We should hire him. And I know this sounds kind of contrived, but it was it was just like, okay. And I was like, this is I I thought they're because I I'm a big Wyze user. Like, I use all their cameras and Doorbells and whatever. And so I was like, okay. Let me try try doing this thing here. Let let's talk a little bit about benchmarking. So you've now talked about, like, benchmarking a couple of things. Like, What are you using to

actually test things in this type of way to be confident that your your benchmarks are reasonable?

Yeah. So I'm using the JS framework. There's, like, a whole community around it. So, it's really hard to, like, Not, like, fail. It's just like you can from what I understand, the JS Framework uses, like, a Chromium thing. And so, like, it loads and it measures, like, the painting and, like, the Painting times and then there's, like, several tests you can do. So, like, there's, like, create a 1000 rows or create 10,000 rows or delete 10,000 rows, etcetera.

And so the benchmark just does all of that and figures out what how fast it does in those tests and then, like, it rates them. And so you can look up JS Premier Benchmark right now, and you can see million is so and so fast compared to something else. That's what we're mainly using.

I don't think we're using anything else for benchmarking. Cool. So the whenever you see images like these little tables that you see on, like, Twitter with these green through red boxes, is this always coming from JS framework benchmark. Is that, like, the the aesthetic of JS framework? Okay. Because I've seen that a number of times, but I never knew where exactly those images came from. That's That's neat. I'll I'll make sure that's in the show notes here. The it it's really, like, frustrating because when you run when you run a benchmark, it's like you have to wait, like, 5 minutes to run. So I remember, like, all of November December, I was just doomscrolling on TikTok while I was just waiting for benchmarks to load. It's like

That's amazing. And, like, how do you even get into performance work at all? Like, was there a specific project you're working on where you noticed an issue?

Like, what what makes you wanna even get into this? Yeah. It it's 2 parts. It it's first of all, it's really cool. I think it's cool to make things faster, but also it's Important.

My grandma owns a 2015 iPad, and so every time I send her, like, a TikTok or some one of the websites I create, it just doesn't load. It's just complete garbage. It is so slow. Mhmm. And I I kinda think about it, and it's just like, why can't the websites we create today be optimized for, You know, the devices that we have and the majority around the world. Because, like, the majority of people around the world don't have, like, an iPhone. They have, like, a, you know, $100 Android. And these, like, devices can't necessarily load heavy, heavy React websites, yet a lot of the websites we create on the web are heavy React websites. Yeah.

So just kinda thinking about how we can make that a lot faster. Yeah. We talked about that

all the time. We're like It's a it's actually a problem that our laptops, these, you know, m one max or whatever, You know, these m one powered laptops or m powered laptops are so fast at rendering sites.

You have to, Like, really be vigilant about testing in lower performance situations, in all kinds of ways because it's so easy to just be like, oh, it's fast. It's fast for me. I I'm I'm loading this up. It's fast right now. Yeah. That that's super fascinating. Do you ever see that x kcd comic where people are, the little stick figures are jousting? And somebody says, get back to work, and he says, our code's compiling.

It reminds me of your your benchmarking thing. It's benchmarking. I'm benchmarking. I'm just, I'm don't worry about it. I'm waiting on benchmarking.

How how did you get interested in in benchmarking stuff specifically? Is it just that you you had this This want, like you said, with, you know, these older devices to perform better and then, therefore, the way through that is benchmarking. Is it just like a a tool to solve an issue of performance or,

was there any interest in that beforehand? Yeah. No. It's it's more of like a rite of passage for a framework.

Like, people like Ryan Carniato, like, they just kinda pushed me towards doing this because if you're gonna try to claim performance, you need to benchmark it, because, you know, you kinda have to prove it. It was kind of just something I had to do. But in terms of, like it it got really interesting because I I I dug into somewhat I wrote a whole, like, I I was in, like, AP statistics, and I was, like I I wrote my whole capstone project just analyzing the benchmark. And so I got really into kind of How benchmark, like, sampling works, like, how, like, some certain how to voice and certain inconsistencies, like or even, like, you know, Benchmarking different devices like you mentioned earlier, like low end versus high end devices.

Those are some things I got really interested in. I think If if you do if the if the listener gets into benchmarking, those are also really cool to get into.

Maybe somebody listening to this right now is like, I've never Like, we we talk a lot about performance on this podcast, and a lot of that generally is like, oh, you make sure your you your server is replying fast, and your Database calls are not unnecessary. You're not sending too much data, JavaScript, CSS over the wire, smaller images, CDNs, like, we talk a lot about that in terms of performance, but what you're doing here is not related to that Stuff. It's literally about how fast can you put the text on the page so that the user can see it. So Maybe somebody who's sitting in front of a MacBook has never experienced that. You know, you click a button and it it updates the number. So what does A website that is slowly rendered.

Like, what what what happens there? What does that look like? So I think the best Situation is like so the other day was, trying to buy a, you know, Taylor Swift tickets. And so I was on Ticketmaster and then I you know, there's thousands of people trying to get into Ticketmaster, and that's not the that's not the issue. Right? I have, like, iPhone 12 or whatever. And also I had you know, I have great Internet connection, and I click in. Yeah. And the one reason I didn't get the seat I wanted was Because the UI was slow. I was on my phone. It just wouldn't render fast enough. It's really interesting to think about because what if you're, You know, you're you're you don't have good Wi Fi and you don't have a good device.

What happens then? You know, if I mean, Part of the performance is, like, loading the the content, but also a lot of it is how fast the UI can render with a bunch of, like, seats and, like, visuals and whatever. And so, like, that's a really specific case where a million could work very well.

Rendering is important, especially when it's high performance, you know, High intensity and whatever.

Like, that specific situation. Yeah. I could I could definitely see that. Anytime there's, like, a lot of data that is changing on the page or, like Like, even, like, you click a button and you expect something to happen. But if you have to go through that whole song and dance, you're on a low power device, It's a little bit chuggy. And worst case, somebody clicks the button again, you know, or like and a lot of that stuff is you don't necessarily realize that it's chuggy Until you go on a a faster machine, you go, oh, like, I was using what was I using? Hyper terminal, which is a React based terminal For years. And everyone's like, it's slow. It's slow. I was like, what are you talking about? It's slow. It's fine. Like, I would have it shows up when I have it.

You type l s l, and it shows up, like, a 100 milliseconds later. Right? And then I I switched to the Rust based terminal, which is warp, And I type l s, and I go, oh, okay. I see it. Like like milliseconds is not it's not like you're sitting there being, this is slow, But it's just that, like, little feeling where you go, okay.

I totally understand how responsive this type of thing is. Totally. Yeah. I I have a very similar experience.

I used brackets before. Like, I don't even know if people remember that. It's like the Yeah. Oh, I remember brackets. Oh, yeah. It was,

Wait. It was HTML, CSS based editor? Yeah.

It was just like you if you load, like, over 20 files, it would just crash. Or, like, you and Adam. Like, Adam was, like, a terrible experience for me,

loading files. Yeah. Same same here. Yeah. It's true. That that's another really good Example is if you load up I remember years ago, I would have, like, a CSV with 20,000 lines in it. And I would if you try to open it up like, the big one was when I used to do WordPress, I would do a find and replace on SQL file, the database for the URL string, and it would it would just replace, like, local host with westboss.com or whatever. And I realized there's better ways to do that, but that was the cowboy way I was doing it at the time. And that Find, I would type it in, and as I typed w e, it would lock up the whole UI.

I have to wait a second or 2, and then I could type s. And then it would lock up the whole UI because it was trying to highlight Twenty 1,000 instances of WES in that file and then, Versus Code comes along with their Smarter rendering.

And you can I've literally opened up a 3,000,000 line file in Versus code, and just scrolled that thing like it's butter.

And, I don't know. Can can you explain, like, how does the I know this is not related to React, but, like, how does Versus Code make that so much faster

Or you can open up millions of lines. I think they use some sort of Canvas API. Like, I think they literally paint the pixels on the screen.

But I don't know in specific Because I know they have, like, 2 ways to render and, like, one of them is Canvas, and I don't know if it's They actually virtualize all of the lines. At most, you're seeing

Sixty lines of code at once, and it's it's able to render the lines that you're scrolling towards Fast enough. So there's not actually 3,000,000 divs on the page, which every line there's probably 100 or 200 A wrap wrapped around every single line and and piece of syntax there. That's awesome. Yeah.

1,000,000 also supports virtualization, I think. I it were I think it works with React query or React. Sorry. React virtual right now. I don't know if it works with the the with the The ones by Brian though. Oh, yeah. Tan TanStack virtual.

It says on the website that it works with that, which is pretty cool.

I need to I have a website. We talked about this on a couple episodes ago. I have a website that has 25,000 spans on it, and they all have CSS applied to it. And it's it takes a couple seconds to show up, and it's it's a good example of of a rendering lag. Right? And In my case, I need to I think in my case, I think it's a CSS painting issue. But a virtualization certainly would Help me in that case because I'm just painting

200 divs instead of 20,000 divs. With with virtualization, like, what is the process of getting around the whole command f, though? The you know, trying to find something on page, is there like, do you then have to implement an on page

search, which are always the worst? I think I think you had to. I assume how Versus Code does it is like they have, like, the source text, and then they, like, control f that, and they try to, like, render it when you need it. And they they have, like, a in like, a built in, control app, so I think that's an unfortunate case. But, like, there's always trade offs Did form a solutions right? It's fine. I had one today where,

I had, like, a Twitter mention, and I was trying to find it in my, like, list of mentions. So I just like command f the person's name, and it didn't show up. And I was like, oh, that's because I'm only seeing 5 tweets. Even though it looks like I have hundreds of tweets loaded, the find in the DOM is not working. So and also, like, Firefox doesn't It's not like a live search. So if you type something and then scroll and it shows up on the page, the search doesn't update itself, which is frustrating. Oh,

Firefox.

I don't I don't know if Chrome does it either. I should I should do a little task where you, like, search something and then dump some more stuff into the Dom and see where it's at. Yeah. I would love virtualization

that somehow does not break on page find, because I don't I I I just don't truly don't trust User LAN command finds. I always hate it. What was that discussed? Is that discussed? Is that the the, the forum software that a lot of people have used in the past? Yeah. They have their own command. Fine. And I I just not not my favorite. Oh, that always drives me crazy.

Yeah.

So you say 70% faster with with 1,000,000. Js.

I'm assuming that is is that a certain type of component that you you really see the benefits In there, is there situations that make more sense versus others? Yeah. For 70%,

that's just a benchmark. And so you can imagine the benchmark is pretty, like, Insane. Like, nobody really adds, like, a 1000 rows or deletes a 1000 rows on, like, a normal React application.

But we do measure Or do try to calculate or predict the reconciliation improvement. And so on automatic mode, when you apply it to a specific component, it may say, like, this Could be 46% faster on your reconciliation, so how fast it takes to dev.

And so especially if your React Applications bottleneck is, like, differing the Dom. Like, especially if you have a table, if you have, like, color picker, if you have about 20,000 spans or with CSS, That's probably somewhere it works really, really well.

But there's no harm in, you know, putting it there because the only, downside is if it optimizes a component that doesn't really need to be optimized, the bundle becomes, like, Twenty characters bigger.

So that's, like, the downside there. I was gonna talk about,

like, limitations.

So there's a couple things in the docs that say, don't use a map, use a like a four component.

What's that about? Why are maps slow? So

that's actually one of the bottlenecks that React has.

If you I mean, fundamentally, if you just like build your entire so map, what you do is like it like applies something to an array. And if it applies, like, JSX to an array and it's, like, really huge, it's gonna suck on performance. Like, not only in your rendering, but also your reconciliation because you have to make that entire map every single time. Mhmm. Now with 1,000,000, we don't. With the 4 component, it does it internally. And so you don't have to, like, die on rendering. And then you also good get pretty good reconciliation because Anything inside a 4, it turns into a block. So it optimizes the content within a 4.

So it gets really, really fast, especially if you have a lot of, like, DIVs and, like, spans and whatever.

Yeah. And how does it do that optimization?

Yeah. So, like, fundamentally, it's just, like, You just specify, like, in each prop. And so you could put an array in that each prop.

And then you put, like, Your builder, which is a callback that gives the JSX in the children.

So with that, we what we do initially is we build that entire map, but we don't, like, have to generate the JSX for every single one. We just compare the data for each one and then see if it's changed, and we're good. That's neat. Yeah. I like that. And one more API you have here is the the macro API, which is

you Pre run code. We've talked about this on the show a couple times, and and Babble's had something like that in the past. And go back to episode six 43, Jake Champion of Fast Fastly.

He specifically talked about how they run all your top level code before the it has actually run. So an example I gave is that, like, if you need if somebody sends a request and you need to Calculate 1 plus 1.

You can you can calculate 1 plus 1 at compile time, and then, you know, you're not wasting precious time figuring out What is so macro you can tell me if this is is right or not, Aidan. Is a macro will figure out if it can compute stuff ahead of time So that you simply just have the result by the time you need it? Exactly. Yeah. And what obviously, 1 plus 1 is a silly example.

Is there any other

Situations. Do you have any examples of where that might be useful? Yeah. Frankly, this one was just feature creep. I was like, okay. Because we can do it, let's do it.

But, like, some specific examples that Bun has, which has similar API to us, is, like, Git commits, like fetching the Git, like or, like, Git commit at, build time.

Like, the classic example is, like, if you have a heavy function like Fibonacci, why don't you do it at, compile time? But I don't really know any other cases

Where that really is important. Oh, yeah. Another example I had when when we had Jake on was so I have Five different courses.

And then for each of my courses, I have a beginner course, advanced course, and then I have team licenses that go, 10, 15, 20, 30, all the way up to, like, I think a 100 people. Right? So I don't explicitly generate All of those license packages in code because it's it's 5 courses times 18 packages each. Right? I'm not going to explicitly go make All 40 of those.

But I also don't want to have to generate those every single on page load. So what I do is before Like when my application starts or when the application is bundled, I can go ahead and scaffold out the objects that contain all of those Values there. And that way, when somebody clicks on the team page, they're not sitting there waiting for 30 milliseconds while I generate a big array of of possible courses.

Yeah. Exactly. That's that's definitely a good situation.

Yeah. Hypothetically, you probably could achieve the same result as if you had, like, if you use, like, roll up, replace, Like, you have some, like, process the end, but put stuff here and then compute it at in the bun or in the config. Mhmm. Yeah.

Well okay. So back to, some with how this is, Babbel based. Right? You said this is, using Babble to do the transformation.

Does that does that mean, like, this works anywhere you can run Babble? Are there any limitations on, like, what types of projects you could add this to beyond, like, Implementation details. I'm talking more like build process stuff.

Webpack, Vite, does it work across the board in in typical situations?

Yeah. It does. We do we don't ship the babble. You I mean, you can use it, but, like, we we generally ship, like, bundle specific Configs that we share. A Next. Js plug in, Veed, roll up, web anything you could think of,

except Remix. With the process of, like, Creating all of those, is it a pain to support a bunch of different,

bundlers? No. It's actually pretty well, I mean, with NextFairs, it is a little bit of a pain, but, like, with everything else, it's really simple. We use something called unplug in, which basically allows us to write 1 plug in and then just, like, kinda supports everything else.

Astro uses the Gatsby uses web you can inject Webpack plug ins. Next. Js, you can do Webpack, So that's why we can support so many things. What about

all this React server component stuff? Does that

Play into any of this at all? Yeah. Definitely eats our cake a little bit, especially if you have a lot of server components, but Whenever we I mean, you can basically only use Inclanto Butters because that's where it's able to optimize. Awesome. And that's, Right now, that's literally every single React application out there. Obviously,

like, a lot of applications are currently server rendered, but they They rehydrate on the the client, and then you you still have that whole render tree. Right? So I think that's why people got really excited about this is that Pretty much every application out there is still client rendered at some point, and being able to just throw this thing in in auto mode and get some perf wins Is, is a big win. Is is there any times when it would possibly break your thing? Like, how do you test this? Do you just Slap it in your project and and run your tests or click around and see how it is? Yeah.

It does break, unfortunately. It's like One of the issues we have right now is, like, context. Oh, yeah. Or, like, route especially router context. Like, how how they do that thing. And so Figuring that out is a is a bit of a challenge, but we're we're getting through it. Yeah. I think that's, like, the main thing that people have, like, issues use with or, like, extended JSX. So if they're using, like, React 3 Fiber or, something weird, then, you know, we die. It just doesn't work. Or, like, style components also is a pain. But other than that, it's pretty smooth so far. I've had an people have gotten pretty good perf wins.

I think just in the last couple days, like, 5 companies have, like, reached out on Twitter or, like, put something on Twitter they're using it in production, which is cool. But, yeah, still need to fix a little bit of issues. That's why it's still in beta.

But, hopefully, we can ship to,

Stable soon. It's funny because we I posted it in the chat. I was like, oh, maybe we can get this guy on.

And, so Syntax podcast is part of Sentry.

And some of the century devs were like, yeah, we we were talking about this yesterday in our TSC meeting, which is where they talk about What tech is going to be used? So it's certainly probably the link got dropped in a lot of Slack rooms last week, I believe.

Yeah.

Yeah. It's it's funny because, the the the well, I think one of the set like, couple Sentry devs has reached out, and we're we're actually working on Like, what if we could use, like, real world monitoring data, whether it be from Sentry or some browser API to inform automatic mode

Oh. So that's a really cool thing. Oh, that would be that's actually a great idea because you think about, like, what browsers you should support for CSS And a lot sometimes people just pipe the data from their Google Analytics into the browser support. So it would also make sense to say, alright, well, These things are slow, so you can inform that. That's that's cool. I didn't think of that. And of course, you can use. That's a great use case for centuries error in performance monitoring.

That's a It's a great use case Perfect plug right there. Yeah. I noticed that you're really up on GitHub issues. I mean, there's only 43 issues open. I would imagine with, like, A project like this, where now you you're getting into a lot of, like you're you're getting tossed into a lot of different React setups.

You know? It how how would what do you do to stay on top of that stuff? Because it it does seem like you got a good handle on it. I mean, it look can looks can be deceiving.

It's frankly, I'm not on top of it, but it's, you know, slowly getting there. So, usually, I I just, like, I take a day, and I sit down with, like, other contributors, and I go on a stream. And I just go through every single issue and try to solve them.

Generally, that, like, gets it down by, you know, so and so percent. But, yeah, we do have a bit of issue when you have fakes.

That's a good point. The I I yeah. I'm saying no. I'm saying that the 43 issues is a small amount for what you're doing. I I think that's, like, really impressive. I know these especially projects that get in these situations, people will just open an issue for anything. You know? No. I I I'm I'm super impressed. I mean, there's 2 pages of issues. I've been to some repos that are, you know, 900 issues or whatever. They just let them balloon and, you know, get really intense.

Is this is this your, like, first Open source hit, so to say.

I mean, you I guess you could consider this a hit now. Yeah. Yeah. I would say so. For for the issues, we do provide very good defaults, and so we have, like, required you have you're required to put a reproduction or you're required to put, like, A description.

And so Mhmm. We're less likely to get, like, spam issues, which is good.

Yes.

For in terms of hits, it's kind of weird.

Not weird. It's just, like, very weird feeling.

Open it's really really interesting because, like, especially in, like, Open source, it's really I won't say it's easy, but, like, it's easier to get viral compared to, like, other Frameworks, just because there's so many front end developers, and also it's just really accessible.

So it's a little bit weird, but also,

That's good. Yeah. What else, have you been dreaming of of working on? You know? Like, is there other areas of web you'd like to touch on. Are you gonna are you gonna build a new TypeScript compiler? Are you looking at Rust? Like, I know you're probably pretty focused on this right now, but, like, I'm sure You're a curious guy. Is there any areas of programming that you would like to solve?

Not specifically, but I think, like, there there are a couple things that are interesting.

For me, I think when I work on something, I really care about developers parents, but also really care about user experience. And so I like to build solutions that try to optimize both.

And so I really like party counts concept. It's a little bit buggy right now, but, like, being able to offload, like, third party scripts because I mean, To be honest, that is, like, the majority of your performance concerns.

Also, like, thinking about how to prevent, like, performance regressions.

Specifically, like well, one of the the experiences that I had was in production on, like, Wyze, I used React icons, and I didn't tree shake it. It's self importing like

Sixty megs of megabytes of It's 60 meg of, like, hospital icons. Yeah.

It's the things like that. It's like how do we prevent, like, stupid things and also, Be able to find good defaults for performance to for developers to have great performance. Yeah. Yeah. That's awesome.

And and and it seems like you've got a A really great start to all of that here. And and so when you go are you going to school for computer science? Is that is that what you're you're going for? Yeah. For computer science. That's sick. So, I mean, you're gonna be hitting the ground with a lot of really awesome experience there. I'm sure that's gonna be a good one. Well at

Introduction to looping and Python. Yeah.

Oh, that's great. I I got 1 more random question. Is your your web's Your personal website is like a VCR. Oh, yes. I wanna talk about this too. Yeah. It's like a like a whole experience. You should go to it. I I won't explain it too much. But my question about that is, have you ever seen a VCR? Like, did you ever have a VCR? Did you even have a DVD?

I I actually never did it. Like, the only time I actually interface with it, I was watching I went to some friend's house, and they had a VCR. We watched, like, the entire, Like Star Wars series

in the on VCI. Yeah. On VCI. Yeah. Yeah.

Those are ones that that's way to watch it too. You got it before all the the weird special effects got added to it. I Yeah. I yeah. That's funny. I it is funny because, you know, the VCR, CR, the whole VHS thing is such an aesthetic. And for being somebody who didn't grow up and experience it, you really nailed it even down at the sound effects. There are sound effects in the site, Wes. If I don't know if you did it with volume up. Oh, yeah. I heard it. I gotta say, we we talked about how using sound on the web is is underrated in interface design.

You know, you you'd use any, like, major interface in the video game or anything like that. And sound design, in menus, in And user interface stuff is there. And on the web, we're just like, ah, sounds annoying. Let's ignore it, you know, completely.

So, yeah, just I just wanna give you a big shout out for this this whole site design, but also, like, going going that much further and thinking about even the sound design and stuff like that is is This is really neat. I love it. Yeah. A little bit of whimsy that we we often talk about. It's nice to add that to your your site. Yeah. What'd you build this in, by the way? It's a really weird setup. I was using I have like a custom JSX transform

and it's all vanilla JS, but it's like using JSX to build on that so it's Yeah. Same. It's yeah. I was watching a video of someone.

It wasn't a VCR, but they had the VCR effect. I was like, okay. This is so cool. I wanna use it here. And at that time, I I wasn't working a million. And so oh, no. I was working a million, but I was, like, kinda not really working a million. And so, I was like, okay. What if I made this in total complete vanilla JS with, like yeah.

Fun stuff. That that's the whole like, it's Really popular right now is the whole y two k aesthetic. You know, it's all coming back, and I think VCR is a part of that. I have a I I had a I had to source a VCR for my parents recently because I wanted to do some conversions. I have some old VHS tapes. I had to to source 1. You're back. I know. I got 1. I have 1 literally hooked up to our entertainment center, which is ridiculous. I was showing my my son how to use it, and he was just like, what? What's this big Think I gotta put this big thing in to watch a movie? Yeah.

What are you doing for the glitch effects? How are you managing to do the the glitch stuff on here?

I'm using some library for that. I think it's I don't even know. I just looked up the 1st Glitch library, and that was the one that was Go back. Nice. Yeah. Google Glitch works. Drop it in. Yeah. I I love it, though. Your personal site's, like, such a great a way to explore and adventure into things and experiment.

A lot of people try to play it really safe, so Yeah. I mean I mean, that's a whole another rabbit hole. Right? Like the whole I mean, the whole linear aesthetic is really cool, but, like, It's also very overused, especially like website templates. Like, I I feel like like one thing your personal site should be is not Eric. It's something that really kind of expresses you. Totally. Yeah. Absolutely. Yeah. Definitely my vibe. That that's great. We often have People submit we do every now and then we do a, syntax highlight where we'll review portfolios.

There's a lot of people that don't add any Fun or the like, your personal website should make you smile. It should show that you are curious and having fun with something because You love this stuff so much and not trying to it's not a LinkedIn profile. You know? You got LinkedIn for that.

I saw actually a very offensive meme the other day that was about how Millennials love LinkedIn. I'm like, I don't wanna

be strapped into the LinkedIn crowd. I'm not, like, a a daily LinkedIn user or something. I'm not a LinkedIn lover. Oh, that's some I like, I I use it now that that my videos get popular on there, but there's some there's a lot of, I don't know. Weirdos on there. You know? Like, you can tell people are just, like, cosplaying as businessmen and not actually building business. I did a business. Yeah.

Yeah. Yeah. Go away.

Oh, alright. Let's move into the next section, which is, supper club questions is a set of questions we ask everybody comes on the podcast.

What computer mouse and keyboard are you using? I am using

This thing, a lot of tech. Oh, yeah. 302.

I don't know. I got it I got it for a present, so not sure what it is. We got a Keep crawling here. Oh, cool. Nice. Looking nice. I think that's all. Yeah. I have a monitor as well, but I don't know. I just got it from Costco. Yeah. Costco. Nice. Are you Mac or Linux? I'm on, an m on Mac. Beauty. Beauty. Yeah. What about, what kinda what text editor theme and font Do you use? Oh, I have a crazy text editor.

I I'm using guest code, but, like, I I have, like, material, and I have, like, Everything Zen'd out. And so it's just like imagining a completely it looks like VIN, basically.

Really? Yeah. And also using BIM. I I really like the whole kind of very minimalist setup, but I'm also blind. And so I I set, like, the Font size is, like like, 60, so I can't see the text. Yeah. Yeah. I opt for just shoving my face as close to the screen as possible.

That's what I just get right up in there.

What about terminal and shell? I just use Iterm too.

I used Kitty for a while, but that was really glitchy for me. Oh, yeah?

Alright. Here's here's a good one. And I'm really interested in this because You seemingly have have come up to speed fairly quickly. So if you had to start coding from scratch or somebody came at you and said, hey, I wanna get into to programming. What would you tell them to learn? Would it be JavaScript React? Or is there a specific

Direction you'd point them? I would just tell them to build things that are cool. I don't think, like, language specifically matters. Yeah. Yeah. I mean, honestly, I mean, fundamentals are important, but I think it's boring to learn a language. I think it's more fun if you build something that you like. That's so true. Yeah. Fundamentally,

That powers motivation. Like, what what are you wanting to actually do? Very very much agree. Yeah. Language is just a tool. I wanna build a I I wanna build a chair. Alright. Need a saw. You need some wood.

What is, what do you do to stay up to date on stuff? Twitter mostly, sometimes after news.

I I used to read I read, like, JavaScript weekly a lot. I used to read it, but now I'm just, like, kinda there's too many frameworks.

Which is ironic because I'm making a framework, but also you know? Yeah. That we are actually talking about that as We are gearing up to do the Syntax newsletter, and we're saying that. Like, a lot of these weekly newsletters, people stop reading because they're So they're overwhelmed.

It's exhausting to to read that type of thing. Like, no slant at any of the newsletters, but, like, it's just a lot of information, you know, and

Sometimes it stresses you out. Yep. I got too many emails already.

Anything you are excited really excited about in the future of web dev? Definitely the r s c for signals. Yeah. With with Dom and, like, there's a bunch of people on it, but, like, it's really cool. I I think I mean, it basically is what Solid does, and it's like so cool because it's really cool to see a bunch of framework authors coming together And working on something that kind of can be shared between the frameworks.

So great performance defaults for all those frameworks.

It's really cool. Yeah. I I I think we are going to be seeing I mean, not that we haven't been, but I think, you know, signals are one of those topics that did Blow up. But I I I think they're not going to be like a flash in the pan thing. I I I think you know, whatever. If it gets added to the language as a primitive or whatever, I do think you're just gonna be seeing more and more signals, yeah, coming coming down the line. For sure. So let's get into the part of the show that we have sick Picks and shameless plugs, did you come today with a sick pic? I've been watching,

Barbie lately, if anyone knows. Oh, nice. Everyone has. Yeah. I watched We have Barbie in a theater.

I did not dress in pink, which is, like, definitely a sin. But, but yeah.

I guess that's my fave.

Nice. Yeah. We're we're gonna go we're gonna see Barbie at some point here. I haven't seen it yet. We just took our kids to see the new Teenage Mutant Ninja Turtles movie, which was shockingly not shockingly good, but it was great, for kids, obviously.

But, yeah, Barbie's Barbie's gotta be on the list as well.

What about shameless plugs? Anything you would like to plug?

Yeah.

We're Working on I mean, you could definitely try auto mode right now. Just look up million.js, and you'll find it. But we aren't compiling, like, a list of React integrations with 1,000,000, React examples. And so it's a if you're looking into open source contribution or just trying to play with React, Look up our kitchen sink. It's, sink dot million dot dev.

And so you can just go there, Contribute your example if you you're you're a library author or just getting into it.

And we have just a bunch of examples you can try out.

Maybe it can be put in the footnotes as well. Yeah. Wow. This is a cool little, kitchen sink. I love a kitchen sink.

These are always great things. So, yeah, this is neat. Cool. Awesome. Well,

Thank you so much for coming on. I really appreciate all your time and insights into this thing. Seems pretty cool. I'm gonna try

slap it in a couple of my React projects And see how it goes. No. No. Thank you. Thank you guys for your time. I really appreciate it. Like, again, was I've been a big follower fan sort of thing. And so really appreciate the content you put out. Really appreciate you, Scott, as well. Oh, you're welcome. Yeah. This is an awesome opportunity. Awesome. Alright. Thanks again. Thanks, Aidan. Keep up the awesome stuff, man. It's, really inspiring. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.