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

That's what I

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.

Yeah. Yeah. Go away.

What are you doing for the glitch effects? How are you managing to do the the glitch stuff on here? like, Implementation details. I'm talking more like build process stuff.

I I'm using guest code, but, like, I

come up to speed fairly quickly. So if you had to start coding from scratch or somebody came at you and said, hey,

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.

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,

kind of very minimalist setup,

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 don't know. Weirdos on there. You know? Like, you can tell people are just, like, cosplaying as

Really? Yeah. And also using BIM. I I really like the whole

but it's like using JSX to build on that so it's and I was, like I I wrote my whole capstone project just analyzing the benchmark. And so I got really into kind of 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 is essentially a virtual DOM replacement for React, and that's a mouthful. Right? Like, what does that actually mean? And so you can just go there, Contribute your example if you you're you're a library author or just getting into it.

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, So with that, we what we do initially is we build that entire map,

So, yeah, just I just wanna give you a big shout out for this this whole site design, but also, like, Or drop a review if you like this show.

I wanna get into to programming. What would you tell them to learn? Would it be JavaScript React? Or is there a specific

there's a lot of, it would also make sense to say, alright, well,

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 But, hopefully, we can ship to,

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

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

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.

Zen'd out. And so it's just like imagining a completely it looks like VIN, basically.

lot of tech. Oh, yeah. 302.

Yeah. Same. It's yeah. I was watching a video of someone.

with, like yeah.

There's a lot of people that don't add any

Yeah.

I saw actually a very offensive meme the other day that was about how Millennials love LinkedIn. I'm like, I don't wanna 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,

Alright. Here's here's a good one. And I'm really interested in this because

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?

is underrated in interface design.

businessmen what was I using? Hyper terminal, which is a React based terminal

just get right up in there.

Fun or the like, your personal website should make you smile. It should show that you are curious pipe the data from their Google Analytics into the browser support. So So you say 70% faster with with 1,000,000. Js.

a Anything inside a 4, it turns into a block. So it optimizes the content within a 4.

I was like, okay. What if I made this in total complete vanilla JS courses on Udemy and stuff. So, like, just for context, I I started coding in 5th grade.

not really working a million. And so,

I have, like,

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

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.

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 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 And then when something has changed, Fast enough. So there's not actually 3,000,000 divs on the page, which every line there's

is is a trade off.

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 we we say, okay. What if we treat the virtual GOM as kinda, the bundle becomes, like, Twenty characters bigger.

shaky or leaky.

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?

we can't overly optimize that. And so that's something we opt out of. Another thing we opt out of is very,

So,

conditional expression. So, like, early returns in your component.

or not stable,

JSX are, and we can update those.

if in, like, CS terms.

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.

we don't support a couple of things. We don't support, been a big follower trying to buy It's the things like that. It's like how do we prevent, like, stupid things and also, And so so, like, you calculate the hooks, you calculate the data, and then you return the JSX.

But If we have an early return, like, let's say we return a null when the data isn't loaded,

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

Be able to find good defaults for performance to for developers to have great performance. Yeah. Yeah. That's awesome.

projects that get in these situations,

Open it's really really interesting because, like, especially in, like, Open source, it's really

Are you looking at Rust? Like, I know you're probably pretty focused on this right now, but, like, I'm sure

areas of programming that you would like to solve? 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,

hit, so to say.

in production on, like, Wyze,

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

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

easy, but, like, it's easier to get viral compared to, like, other

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

That's good. Yeah. What else,

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.

And so I really like party counts concept. It's a little bit buggy right now, but, like, being able to offload, like,

And so Mhmm. We're less likely to get, like, spam issues, Solid does, and it's like so cool because So I was, like, 1 of 2 engineers They're not easy to create, and they're often with any solution, there will come trade offs. Right? And so if you think about it,

which is good.

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.

Frameworks,

And and and it seems like you've got a A really great start to all of that here. And and so

you'd like to touch on. Are you gonna are you gonna build a new TypeScript compiler?

have you been dreaming of of working on? You know? Like, is there other I I would say I'm intimately familiar with, which is the Wise WebRTC,

people will just open an issue for anything. You know?

third party scripts because I mean, To be honest, that is, like, the majority of your performance concerns.

areas of

web

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.

just because there's so many front end developers, and also it's just really accessible.

It essentially doesn't need to material, and I have, like, Everything

So what we do is Barbie lately, if anyone knows. Oh, nice. Everyone has. Yeah. I watched We have Barbie in a theater.

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, So I've it's been around 5 years or 6 years.

and it knows to directly go to that span and update it. Yeah. It's 1,000,000 is basically conceptually the same.

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.

like Svelte on this podcast. And that's that's kind of the difference is is React is virtual DOM, and and Svelte 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

doesn't diff the entire thing. It just knows where that span is on the page, 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.

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.

in your JSX,

That's If you know SolidJS. So, like, if you have some count data and it goes into, like, a very, very nested DIV,

internship

GitHub. So, like, I sent my GitHub to the CEO. The CEO kind of forwarded to, like,

Yeah. So I'm using the JS framework. There's, like, a whole community around it. So, it's really hard to, those optimize rendering, Specifically, like well, one of the the experiences that I had was

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 the compile time? But I don't really know any other cases I used React icons, and I didn't tree shake it. It's self importing like The main part that Milliant optimizes I did not dress in pink, which is, like, definitely a sin. But, Not specifically, but I think,

I'm sure it was it was tricky to build, though. That That's kinda interesting. But, like, how do you even get a Maybe somebody who's sitting in front of a MacBook has never

like, We're

And so

I I didn't build UI specifically,

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 I got the CEO to kind of email my,

actually

tests you can do. So, like, there's, like, create a 1000 rows or create 10,000 rows or delete 10,000 rows,

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.

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,

etcetera.

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

I was, But there's no harm in, you know, putting it there because React kind of renders in cool phases, but,

on that project.

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 Sometimes it stresses you out. Yep. I got too many emails already.

test things in this type of way to be confident that your your benchmarks are reasonable? 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,

It just had Mhmm. I mean, was there any interest in that beforehand? Yeah. No. It's it's more of like a rite of passage for a framework.

so Syntax podcast is part of Sentry.

Yeah.

something weird, then, you know, we die. It just doesn't work. Or, like, style components especially if you have a lot of, like, DIVs and, like, spans and whatever.

Like, what if we could use, like, real world monitoring data, whether it be from Sentry or some browser API 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,

5 companies have, like, reached out on Twitter or, like, put something on Twitter 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.

Yeah. It's it's funny because, and it's all vanilla JS, 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, So it's a little bit weird, but also,

the the well, I think one of the set like, couple Sentry devs has reached out, and we're we're actually working on

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.

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 don't use a map, use a like a four component.

to inform automatic mode

And,

I think just in the last couple days, 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.

also is a pain. But other than that, it's pretty smooth so far. I've had an

Is there any other

is,

But, like, some specific examples that Bun has, which has similar API to us,

you can tell me if this is is right or not, Aidan. Is a macro will

talked about how they run all your top level code the it has actually run. So an example I gave is that, like, a 100 milliseconds later. Right? And then I I switched to the Rust based terminal, which is warp, it would lock up the whole UI.

So it gets really, really fast,

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

like, Git commits, like fetching the Git, like or, like, Git Compiler is also another doozy.

for 30 milliseconds while I generate a big array of of possible courses.

But I also don't want to have to generate

Fastly.

commit at, we we optimized the RTC by, like, from 40 seconds to, like, 10 seconds on at least are from our benchmarks.

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.

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

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.

Yeah. Hypothetically, you probably could achieve the same result

Fast

Like, the classic example is, like, if you have a heavy function like Fibonacci, why don't you do it at, 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.

let's do it.

I can go ahead and scaffold out the objects that contain all of those

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

if you need if somebody sends a request and you need to Calculate 1 plus 1.

Values there. And that way, when somebody clicks on the team page, they're not sitting there waiting

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, It's the same required you have you're required to put a reproduction or you're required to put, like, A description.

build time.

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

And then for each of my courses, I have a beginner course, advanced course, and then I have team licenses that go,

Yeah. And how does it do that optimization?

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,

that

Yeah.

Firefox.

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

I need to I have a website. We talked about this on a couple episodes ago. I have a website that has where To update the pieces on the page. Is that correct? Exactly.

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.

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, 18 packages each. Right? I'm not going to explicitly go make All 40 of those.

not not my favorite. Oh, that always drives me crazy.

I think. I it were I think it works with React 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,

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,

because I don't I I I just don't truly don't trust

certainly would

I'm assuming that is

on page find,

Help me in that case because I'm just painting

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

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

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.

And I type l s, and I go, oh, and not actually building business. I did a business. Yeah.

Like, what what what happens there? What does that look like? So I think the best Situation is like so the other day was, So just kinda thinking about how we can make that a lot faster. Yeah. We talked about that

you know, Taylor Swift tickets. And so I was on Ticketmaster because

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

It's a little bit chuggy. And worst case, somebody clicks the button again, you know, or like before On the desktop. And that's something I like to do is have my cameras open sometimes when I'm working. So, 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, It says on the website that it works with that, which is pretty cool.

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.

feeling where you go, okay.

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,

Like, even, like, make react 70% faster. I'll let you actually explain what it is. Did you release something last week?

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,

You type l s l, and it shows up, like,

and a lot of that stuff is you don't necessarily realize that it's chuggy

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 have you ever seen a VCR?

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

Until you go on a a faster machine, you go, oh, like, I was using Wait. It was HTML, CSS based editor? Yeah.

a, It's

1,000,000 also supports virtualization,

the I know this is not related to React, but, like, how does Versus Code make that so much faster

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

Versus Code comes along with their 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 you can I've literally opened up a 3,000,000

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,

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.

loading files. Yeah. Same same here. Yeah. It's true. That that's another really good what does

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

if you load up I remember years ago, I would have, like, a CSV with for the URL string,

SQL file, the database

line file in Versus code, and

render

probably 100 or 200 figure out if it can compute stuff ahead of time So that you simply just have the result What computer mouse and keyboard are you using? I am using

Sixty lines of code at once, and it's it's able to

And, I don't know. Can can you explain, like, how does

A wrap wrapped around every single line and and piece of syntax there. That's awesome. Yeah.

Find, I would type it in, and as I typed w e,

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,

the lines that you're scrolling towards

and it would it would just replace, like, local host with westboss.com probably the link got dropped in a lot of Slack rooms last week, I believe.

I would do a find and replace on 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,

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

Blow up. But I I I think 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.

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,

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,

coming together enhancement for React. Awesome. So I used Kitty for a while, but that was really glitchy for me. Oh, yeah? Like Star Wars series

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

people stop reading because they're

it's really cool to see a bunch of framework authors

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

It's exhausting

I do think you're just gonna be seeing more and more signals,

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.

all this React server component stuff? Does that

a bunch of different,

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

how do you test this? Do you just Slap it in your project and and run your tests or Sixty megs of megabytes of It's 60 meg of, like, hospital icons. Yeah.

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 Twenty 1,000 instances of WES in that file and then, These things Like when my application starts or when the application is bundled, So you you just got a job interning for Wyze and and helped build that whole UI? Yeah.

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.

click around and see how it is? Yeah.

except Remix. With the process of, like, Creating all of those, is it a pain to support somehow does not break

we don't ship the babble. You I mean, you can use it, but, like, we we generally ship, like, bundle specific

I think that's why people got really excited about this is that

Yeah. It does. We do Yes.

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,

throw this thing in in auto mode and get some perf wins

Is,

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 Rendering is important, especially when it's high performance, you know, High intensity and whatever.

So that's why we can support so many things. What about Anything that makes the component quote, unquote nondeterministic,

Well okay. So back to,

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

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, 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, For in terms of hits, it's kind of weird.

is a big win. Is is there any times when it would possibly break your thing? Like,

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

Hoo. I'm starving.

I sure hope you're hungry.

the Syntax Supper Club.

Working on I mean, you could definitely try auto mode right now. Just look up million.js, Configs that we share. A Next. Js plug in, Veed, roll up, web anything you could think of,

And don't forget to subscribe in your podcast player

Head on over to syntax.fm

which was shockingly not shockingly good, but it was great,

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 You're a curious guy. Is there any

but yeah.

for a full archive of all of our shows.

I guess that's my fave.

Look up our kitchen sink. It's, die on rendering. And then you also good get pretty good reconciliation

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.

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,

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

for kids, obviously.

These are always great things. So,

yeah, this is neat. Cool. Awesome. Well,

sink dot million dot dev.

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

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

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

So there's a couple things in the docs that say,

downside is if it optimizes a component that doesn't really need to be optimized, 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,

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

If you I mean, fundamentally, if you just like So great performance defaults for all those frameworks.

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

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, What happens then? You know, if I mean, Part of the performance is, like, loading the the content, but also And working on something that kind of can be shared between the frameworks.

build your entire so map, what you do is like it like control app, so Yeah.

What's that about? Why are maps slow? So You seemingly have have Well, it as a user, it it's nice.

like, limitations.

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

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.

a lot of the websites we create on the web are heavy React websites. Yeah.

CDNs, like, we talk a lot about that in terms of performance, but Smarter rendering.

heavy, heavy React websites, yet

Like,

like, sampling works, like, how, like, some certain how to voice and certain inconsistencies,

experienced that. You know, you click a button and it it updates the number. So

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

like or even, like, I won't say it's

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

like you said, with, you know, these older devices

you know, Benchmarking different devices like you mentioned earlier, like low end versus high end devices.

You have to, Like, really be vigilant about testing in lower performance situations,

you put the text on the page

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, people have gotten pretty good perf wins.

all the time. We're like 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

what you're doing here is not related to that Stuff. It's literally about how fast can

How how did you get interested in in benchmarking stuff specifically? Is it just that you you had this This want,

so that the user can see it. So He specifically Example is

A website that is slowly rendered.

And somebody says, get back to work, and he says, our code's compiling.

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,

It reminds me of your your benchmarking thing. It's benchmarking. I'm benchmarking. I'm just,

are so fast at rendering sites.

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

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,

And so what does 1,000,000 JS do 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 Five different courses.

the

happens when React takes all that return JSX and does something with it. So, essentially, How benchmark,

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.

React diffs those 2 things, and it knows That that's awesome. So you just learned. You're you're 18 years old, and you just picked up Introduction to looping and Python. Yeah.

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.

Reconciliation

Figures out the sniffer says and makes those updates.

faster stream. Right? You were you were just as an intern? Because

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,

just by wrapping your components

So pretty excited to talk to Aidan about that

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% and whatever else goes on, those every single on page load. So what I do is before

Yeah. A couple I think last week, That's amazing. And, like, how do you even get into

In a function.

Okay. So

like, let me think of a good example. Like some state management library, like spread expressions in your attribute search come children. Essentially,

can you give us a a quick rundown of how does 25,000

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

Our memo optimizes rendering, but 1,000,000 specifically optimizes reconciliation.

React.

is the reconciliation process.

So like, there there are a couple things that are interesting.

Not a lot of libraries do this. You may see, like, Libraries like pre act signals, those opt those optimize reconciliation. But, 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 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 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

is one of the main reasons I learned to program in the 1st place, which is for the longest time, you couldn't get Wyze

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,

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,

To writing compilers and trying to figure out So they're overwhelmed.

I started coding because

I'm 18 right now.

you know

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, Astro uses the Gatsby uses web you can inject Webpack plug ins. Next. Js, you can do Webpack,

taking my course a couple years ago

You're way ahead of me on this stuff. How do you go from

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 Pretty much every application out there is still client rendered at some point, and being able to just

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.

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

You're way in.

not to toot my own horn because, like, obviously,

You know? Is this is this your, like, first Open source

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.

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.

you think about,

like, what browsers you should support for CSS 10, 15, 20, 30, all the way up to, like, I think a 100 people. Right? So I don't explicitly just scrolled that thing like it's butter.

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,

you're you're getting tossed into a lot of different React setups.

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.

A project like this, where now you you're getting into a lot of, like

Oh. So that's a really cool thing. Oh, that would be that's actually a great idea because

And a lot sometimes people just

are slow, so Maybe somebody listening to this right now is like, I've never by the time you need it? Exactly. Yeah. And what obviously, 1 plus 1 is a silly example.

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.

performance work at all? Like, was there a specific project you're working on where you noticed an issue?

React

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

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, I'm don't worry about it. I'm waiting on benchmarking.

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

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

a lot what a lot of people were excited about was basically a drop in, like,

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,

It's really pretty simple in in in conceptually.

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

1,000,000 is both

it takes React's rendering engine. So, like, whatever it does to put stuff on the page and says, like, a Chevy truck, This thing,

Yeah. So fundamentally,

improvement. And so on automatic mode,

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%, All of those license packages in code because it's it's 5 courses times

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

That's probably somewhere it works really, really well.

about 20,000 spans or with CSS,

on your reconciliation, so how fast it takes to dev.

when you apply it to a specific component, it may say, like, this Could be 46% faster

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

Like, did you ever have a VCR? Did you even have a DVD?

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

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,

really awesome experience there. I'm sure that's gonna be a good one. Well at

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

Oh, that's great. I I got 1 more random question. Is your your web's Your personal website

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