Million.js with Aiden Bai and Tobiloba Adedeji

Episode Description

Aiden Bai and Toby discuss Million JS, a block virtual DOM tool that makes React apps faster through static analysis and opt-in component optimization.

Episode Summary

In this episode of JavaScript Jam, hosts Anthony Campolo and Scott Steinlage sit down with Aiden Bai, the creator of Million JS, and community advocate Tobiloba Adedeji to explore how this open source project aims to dramatically speed up React applications. Aiden, who began building Million as a high school sophomore, explains the project's evolution from a WebAssembly-based virtual DOM experiment to its current approach using a block virtual DOM with static analysis. The core idea is that instead of diffing the entire virtual DOM tree like React does, Million identifies which parts of the DOM are static and which are dynamic, then only updates the data where changes actually occur. Crucially, Million isn't a compatibility library that replaces React — it works alongside React on a component-by-component basis, with unsupported patterns gracefully falling back to standard React rendering. A live demo illustrates the performance gains when handling expensive UI elements, and the conversation touches on community building, the landscape of React optimization solutions, integration possibilities with meta frameworks like Astro, and Aiden's vision for promoting the block virtual DOM pattern as a broadly adoptable idea across the framework ecosystem.

Chapters

00:00:00 - Introductions and the Origin Story of Million JS

Anthony Campolo welcomes Aiden Bai, the creator of Million JS, and Tobiloba Adedeji, the project's community advocate, to the JavaScript Jam podcast. Both guests are still students — Aiden is an incoming CS freshman at the University of Washington who started building Million during his sophomore year of high school, while Toby is studying computer science at the University of Lagos and focuses on open source advocacy and content creation.

Aiden explains that Million JS started out of boredom as an experiment to build a virtual DOM using WebAssembly, under the assumption that WASM's speed would translate directly into performance gains. However, they discovered that the serialization overhead between JavaScript and WASM — roughly 10 to 20 percent according to estimates from Ryan Carniato — made this approach impractical, leading them to pivot toward the block virtual DOM approach that defines the project today.

00:04:41 - How the Block Virtual DOM Works

Aiden introduces the concept of a block virtual DOM, inspired by a project called Block DOM. Traditional virtual DOM implementations diff two entire blueprints of the UI to find changes, which becomes expensive as the tree grows — and this is fundamentally what makes React slow at scale. The block virtual DOM instead performs static analysis on a template, identifying which nodes are static and which are dynamic, then skips diffing entirely and inserts updated data directly where it belongs.

Aiden explains that Million JS is essentially a reimplementation of this block virtual DOM concept that works with JSX and integrates directly with React. This compatibility isn't without challenges — static analysis doesn't handle every JSX pattern, and edge cases like Next.js hydration mismatches between server and client output have required ongoing fixes. To handle limitations gracefully, Million uses progressive enhancement: components that can't be fully analyzed simply fall back to standard React rendering, so nothing breaks even when Million can't optimize a given component.

00:10:19 - React Philosophy and the Opt-In Approach

Aiden shares that he learned React by rebuilding it, implementing every hook to understand how each one works. This experience informed Million's design philosophy, which deliberately avoids the compatibility library pattern used by projects like Preact Compat or Inferno. Those libraries replace React entirely and must constantly keep up with React's non-standardized internals, creating a perpetual game of catch-up and subtle behavior differences that can mislead users.

Million takes a different approach: it acknowledges that React works well enough for most use cases, and lets developers opt in to Million's optimizations on a per-component basis by wrapping individual components in a block function. This means Million isn't pretending to be React — it's working alongside it, taking over rendering only where performance gains justify it and leaving React to handle everything else normally.

00:13:23 - Toby's Journey and Community Building

Tobiloba recounts how he discovered Million JS through an article feed Chrome extension, tested the library himself, and was impressed enough to reach out to Aiden for a coffee chat. He joined the team earlier in the year, focusing on advocacy and developer relations work, and has contributed through testing, demos, and community engagement. Aiden describes how the community organically grew from GitHub discussions before migrating to Discord, starting with just five or six active members.

Scott Steinlage offers community-building advice, emphasizing consistency, providing value, building in public, and making community members feel like participants rather than just spectators. He suggests user stories, live shows with community members, and highlighting what people are building with Million. The conversation touches on how storytelling — sharing real experiences of things breaking and being fixed — draws people in and makes technical projects relatable and human.

00:21:52 - Live Demo and Performance Comparison

Aiden walks through a live demo comparing React, React Fiber, and Million JS when rendering a large number of expensive UI elements. Standard React visibly lags under the load, while React Fiber spreads the computation over time but drops update frequency, analogous to dropping frames in a video game. Million handles the same workload with noticeably better responsiveness, and the key point is that the code is essentially the same — just wrapped in a single block function.

Examining the source code, Aiden reveals that the demo uses intentionally expensive table rows with many hidden elements to simulate real-world scenarios where DOM diffing is costly. With a traditional virtual DOM, React must diff all those extra nodes on every update, while Million skips them because it already knows which nodes are static. He notes that without the extra hidden elements, performance would be comparable — the demo is designed to highlight the specific scenario where Million's approach shines.

00:31:30 - Server-Side Integration and the Meta Framework Question

The conversation shifts to how Million JS fits into the growing world of server-side rendering and meta frameworks. Aiden acknowledges that server-side work isn't currently Million's focus, though the team has considered building a meta framework or integrating with existing solutions like Qwik React. Anthony notes that Million already works with Astro as a component-level integration, which may be the simplest path to meta framework capabilities without building a router from scratch.

Aiden outlines his broader vision: rather than trying to do everything, Million aims to create a golden path for performance-focused React developers. He presents a work-in-progress chart categorizing React optimization solutions along two axes — data-driven versus data-agnostic and rendering versus reconciliation optimization — positioning Million as uniquely data-agnostic, meaning it doesn't require developers to restructure their data management to achieve performance gains.

00:41:16 - Content Strategy, Technical Blog, and the Million Thesis

Aiden showcases Million's technical blog, which explains the project's core methodology through detailed posts featuring colorful Excalidraw diagrams. The blog lays out why traditional virtual DOM diffing is slow, how static analysis and dirty checking offer a faster alternative, and why Million chose an opt-in model over a full compatibility library replacement. The implementation works by rendering a loader component that grabs a ref from React and hands the actual rendering off to Million's virtual DOM without React knowing.

The discussion turns to the importance of good media and content in open source, with Aiden mentioning a well-edited promotional video produced with help from an editor friend. Anthony and Scott note that media production is a separate skill set from coding and that projects investing in polished content stand out dramatically. Aiden wraps up by directing listeners to million.dev and the project's Discord, while the hosts invite him to future JavaScript Jam spaces and express enthusiasm for the project's potential and Aiden's accomplishments as a young developer.

Transcript

00:00:04 - Aiden Bai

All right.

00:00:04 - Anthony Campolo

Hello, everyone. Welcome back to JavaScript Jam, the podcast. We have a really interesting episode for you today about Million js. We got the creator and the main advocate of the framework here with us, Aiden and Toby. Thank you guys so much for being here. We'd love to know a little bit about you and about your framework.

00:00:27 - Aiden Bai

Hey, I'm Aiden Bai. I'm the creator of Million.js. I'm an incoming CS freshman at the University of Washington. I've been working on Million for two years now. It's been really fun, actually.

00:00:45 - Anthony Campolo

So were you in high school when you created?

00:00:46 - Aiden Bai

Yeah, I was just in high school. I started sophomore year of high school, I believe. So yeah, it's been a really fun time, and it's really cool seeing people use it. That's all I have to say. Toby.

00:01:03 - Tobiloba Adedeji

Yeah, hello, everyone. I'm Toby. I'm a software engineer. I'm in school, and I just finished exams, so I think I'm in my third year now of CS at the University of Lagos. At the moment, I love doing open source work, accessibility stuff, and creating tech content.

00:01:34 - Anthony Campolo

That's so cool that you guys are both still in school and have kind of created this framework that's got a decent amount of buzz.

00:01:41 - Aiden Bai

And I know, oh, you created that.

00:01:44 - Tobiloba Adedeji

You created that framework.

00:01:48 - Aiden Bai

The thing is like, you're building it with him, though.

00:01:54 - Anthony Campolo

I was gonna say, I was gonna say that I have a friend also, Nexel. He created Create T3 app and he's also. He's like 17, I think, when he started it. So I think it's cool that in the open source world you have, you know, anyone could get involved. You know, even if you are someone who is a professional software developer or someone who's still kind of, you know, getting your start and maybe still a student. So I guess, Aiden, what inspired you to create this framework in the first place?

00:02:25 - Aiden Bai

I mean, I think as with all side projects, it's definitely boredom. It's like, wow, I have nothing to do right now. Of course, there is always something to do. It's more that I don't want to do the productive thing, and I want to do something else instead. So we started off with, what if we made a virtual DOM with WASM? Because WebAssembly is fast, right? So virtual DOM with WASM should be fast. Then we realized probably not. There are trade-offs between the two. WASM has bigger bundle size, et cetera. We slowly pivoted to this compiler and block virtual DOM model that is a great trade-off between performance and developer experience.

00:03:17 - Anthony Campolo

Let's break down what you just said there. You originally tried to do it with WASM, but that didn't really make a whole lot of sense in the long run because WASM is not really a performance solution. WASM was kind of a "we want to write every language in the browser" kind of solution, which is a bit absurd in the first place and probably leads to a lot of overhead to make that possible. That's kind of my reading on that situation. Yeah.

00:03:48 - Aiden Bai

In the current state of WASM.

00:03:50 - Anthony Campolo

Yeah.

00:03:51 - Aiden Bai

I believe the last time I heard from Ryan, Ryan Carniato, it was like a 10 to 20% overhead on base vanilla rendering performance. You have that because you need to serialize and deserialize values between JavaScript and WASM. So there's a bit of overhead there.

00:04:10 - Anthony Campolo

Yeah, because you're adding a step to where you either have a language that just runs natively or you're adding a step that allows another language to run. So exactly just that inherently involves overhead because you're adding something that wouldn't need to be there otherwise. There's code that exists that wouldn't have existed otherwise. That makes a lot of sense. Then what did you say after that? You said that instead of that you went to some DOM based method. You said virtual DOM or not virtual dom.

00:04:41 - Aiden Bai

It was definitely a bit of R&D. There's this project called Block DOM, and Block DOM introduces this concept of a block virtual DOM. I don't know if it's the first one, but that's the concept. Normally in virtual DOM, you take two blueprints, figure out the differences, and then make those changes to the DOM. That can get really expensive. If your blueprint gets really big, you're going to have to do a lot of diffing, and that's what makes React slow. What Block DOM does is treat the virtual DOM as a template, kind of like Vue. It does static analysis on the template and figures out what parts in the virtual DOM can change and what parts can't. Static nodes like a div or image can't change, but dynamic stuff like your props or state inside JSX can change.

00:05:53 - Aiden Bai

It identifies those things. Every time you update your user interface, you don't diff the virtual DOM anymore, you just insert the data where it is. If you think about it, it's like Solid fine-grained updates, but without the signals part.

00:06:08 - Anthony Campolo

Yeah, the static analysis part sounds like the real core there. With static analysis, you're able to look at a thing and analyze it based on what's in the code. If you can do that with the DOM, then you'll be able to more fine-grained understand what needs to change and what needs to be diffed between the two. That's fascinating. I think that actually makes sense to me. You took this Block DOM thing and wrote another type of virtual DOM, a similar thing. Is that what you did?

00:06:51 - Aiden Bai

It's basically a reimplementation of the block virtual DOM, but it works with JSX and React.

00:07:00 - Anthony Campolo

Okay, so Block DOM originally was not based around JSX, so it had no sort of compatibility with React.

00:07:07 - Aiden Bai

Yeah, exactly.

00:07:09 - Anthony Campolo

Okay, so then how compatible is Million with React? Is it fully compatible, mostly compatible, or just kind of compatible?

00:07:18 - Aiden Bai

Yeah, I mean, theoretically we say that most things are compatible. It is not.

00:07:27 - Anthony Campolo

Well, I guess in practice, have you ever tried to migrate a fairly sizable app and seen where the rubber meets the road?

00:07:35 - Aiden Bai

Yeah, there are definitely issues. One thing with static analysis is it's not a one-size-fits-all solution. We still need to work on a bunch of edge cases that can happen in JSX or your component. At the end of the day, React isn't a template, it's more of a UI runtime API. With Vue or Svelte, you have a more defined language or DSL. But it's harder with React, so we're still working out the edge cases. One issue we faced the other day was with Next.js hydration. The output we were generating for Next SSR on the server side and the output we were generating for the client side were different. Every time we tried to migrate it, we'd hit a hydration bug. The reason was our transforms. Basically, the transformed code didn't match the original component. We were using the original component for the server and transformed code for the client, and it would break. We literally just fixed that last night. It's definitely in an experimental stage where we are trying to make it not break, but it breaks.

00:08:54 - Aiden Bai

The thing about our philosophy with this is we want to make it progressively enhanceable. What I mean by that is certain things that technically aren't supported by Million will degrade to React. One limitation we have is deterministic returns. Generally speaking, you should have one return at the end for us to analyze in the component. If you have conditional JSX above it, like an early return, we aren't able to analyze it yet. So what we do is tell React to handle that component instead.

00:09:36 - Anthony Campolo

We say this is fallback to React, essentially.

00:09:39 - Aiden Bai

Exactly.

00:09:40 - Anthony Campolo

That's really clever. Yeah, because people are going to want to do all the crazy stuff they usually do in React. And to support the sum total of React in a new paradigm is really hard. I know Qwik is going through a similar battle too. There's Qwik and there's Qwik React. Qwik React is meant to be this version of Qwik that's compatible with React. But then you end up with things that don't necessarily work exactly the way they would in React. So the next time I talk to Misko, I'm going to ask what happens when stuff breaks in Qwik React. Does it fall back or just break? Because that sounds like a pretty elegant solution.

00:10:19 - Aiden Bai

Yeah, that's definitely what we're aiming for. For me, I really, really like using React. It's like something like it's weird because most people are like oh f React.

00:10:32 - Anthony Campolo

I don't use svelte on the same camp as you. Like I've used all the frameworks and I like them all for their own unique reasons. But I learned coding through React. Not even like JavaScript. I learned through React. Those people, they say that you learn React before you learn JavaScript, then you're all screwed up for the rest of your life. I'm that person.

00:10:53 - Aiden Bai

I have a funny story, actually. The way I learned React wasn't the normal way. Learning through the new docs is definitely the way.

00:11:06 - Anthony Campolo

So much nicer.

00:11:07 - Aiden Bai

Yeah, yeah, it's so nice, right? But for me, I learned React by rebuilding it. For our initial version, what we tried was compatibility, kind of like what Preact Compat or Inferno Compat does. I was literally building every single hook and trying to understand things like, what does useId do, or what does useSyncExternalStore do? It was really cool doing that. One thing that differentiates us from Compat libraries is that we don't replace React. It's not a masquerade of the whole application. Compatibility libraries pretend you're writing React and replace React with their compatibility layer, and every part is implemented on their side.

00:12:01 - Anthony Campolo

It's kind of like a polyfill.

00:12:02 - Aiden Bai

Exactly. It's exactly a polyfill. But there's two issue with this specific polyfill is that React isn't based on standards. And so every time you want to update, it's quite.

00:12:17 - Anthony Campolo

You're kind of just looking at the repo and seeing what changed and then figuring exactly what that means.

00:12:22 - Aiden Bai

So it's a constant, like cat and mouse, right? You're trying to update your stuff and you have to handle react 18 or handle react 19 maybe. And so it's like, it's hard to keep up with that. Another thing is there's always going to be behavior differences if you're making a Compat library. Not making that clear, it can be very deceiving to users. What we do is essentially we understand that. We say, okay, you know what, React is good enough for most things. We don't need to care about performance all the time, but in certain cases, there will be performance issues. And so what we allow you to do is we allow you to opt into Million on a component by component basis, essentially. And we can demo this later. But you can wrap your component with a block function and it turns it into a million components that way. It's not a compatibility library. It's using React kind of.

00:13:23 - Anthony Campolo

Okay, yeah, I have so many questions. I can go on this for a while, but I want to pause here and ask Toby, Toby, how did you first hear about Million and how'd you get involved in the project?

00:13:36 - Tobiloba Adedeji

Funny story, I first heard about Million from an article feed provider I use in Chrome, probably Daily.dev. I was scrolling through it randomly one day and saw, "This library makes your React application up to 70% faster." I was like, oh cool. I clicked it and went to what I think was an old doc, maybe a blog post. From there, I found the website link and installed it. I instantly set up a Vite project and got it working on my machine, then installed the library. I was like, okay, I'm super excited, let's test it out. I tested the counter example, and I could actually see the improvements Million was making in my application. I was like, okay, how is this even possible? All I did was compare my counter components without block, then compare that to when I wrapped it with block and passed it as reference.

00:14:46 - Tobiloba Adedeji

I was like, okay, okay, this is really insane. So I reached out to Aiden from his website. I joined the server first, then I reached out to him on Discord, and we set up a coffee chat. All this happened earlier this year, by the way. I didn't join Million until earlier this year.

00:15:09 - Scott Steinlage

So.

00:15:10 - Tobiloba Adedeji

So then we set up a coffee chat, and there was some need for help working on advocacy stuff and DevRel stuff. So I was like, yeah, that's kind of my niche, and I have some experience doing that even though I haven't done it professionally. So yeah, that was how I joined the team, and here I am now. I've done a couple of things for Million. Not really intense engineering stuff like Aiden, because he does most of the engineering work. He just says we, we, we all the time.

00:15:39 - Anthony Campolo

Well, you probably help I would guess you probably test out like you know, demos and changes things. Yeah, you have still worse when you're upgrading. It's like that you'd be surprised how, how far that goes and then how much you're going to learn in the process of doing.

00:15:54 - Tobiloba Adedeji

Yeah, exactly.

00:15:55 - Anthony Campolo

Yeah, yeah. That's why getting involved in these open source projects like it really accelerates you as a developer. I found that when I got involved in Redwood I started learning so much more and just even though I wasn't like writing the code in the repo, you know, I was seeing what they were doing. I was seeing the change. I was seeing like downstream effects on the, on the demo apps I was building. And then you started like kind of putting pieces together and you said you just started doing this at the beginning of this year. Aiden, when did you start kind of making this into a project that had a community? Because I was like, you have a discord. So it's like, when did you just decide to create a discord? Did you kind of have a conscious idea of I want to build this into a thing or was it. People started showing up and saying, hey, we need a discord?

00:16:40 - Aiden Bai

Yeah. I'm honestly really bad at like building communities, so I'm probably not the person to ask, but originally we were on GitHub discussions and like, that got really hairy and so I was like, you know what?

00:16:52 - Anthony Campolo

So the community showed up before the discord? That was kind of my question.

00:16:56 - Aiden Bai

Yeah, yeah, a little bit. I wouldn't say like there was a large community in a sense, but there was probably like five or six active people, which is really cool. So we were just like, ah, move to. Move to Discord. And it just kind of ballooned from there. It's something that we're still working on. Community management is hard. I'm sure you know that. It's like you have to like not only be able to like have your, your bells and whistles with roles or whatever and also, but also like engage the community somehow. So yeah, that's definitely something we're still working on. But

00:17:32 - Anthony Campolo

do you have any words of wisdom to them as people building community right now? Someone who knows so much about community.

00:17:40 - Scott Steinlage

Ah, community,

00:17:45 - Anthony Campolo

yeah.

00:17:46 - Scott Steinlage

So I don't know about words of wisdom, but, you know, it takes consistency, like you were saying, you know, it takes engagement, right. Engaging the community, being consistent with, you know, producing things that of value.

00:18:02 - Anthony Campolo

Right.

00:18:03 - Scott Steinlage

Giving value to your community. And that doesn't necessarily have to be from like million. It could be, you know, other partnering things that you do, you know, and, and bring that value into the community. It also means people. People want to be a part of something. Right. And so what are you doing? You're kind of like building this in public, right? It's open source. You're doing all this fun stuff with it. So that's very important. That's a huge key factor as to probably why your community has grown so much.

00:18:34 - Anthony Campolo

Right.

00:18:36 - Scott Steinlage

And I would say that to continue that growth, just get people involved more.

00:18:43 - Tobiloba Adedeji

Right?

00:18:43 - Scott Steinlage

Like, that's a big piece of it. The more People are involved and not even necessarily contributing to the open source, but just having people state their opinions and things like that. Maybe even doing some live shows with some users, you know, things like that and just getting them, getting their take on things and you know what they're using million for. Maybe do like user stories or something like that. Some fun things like that. Not necessarily like case studies, I hate that word by the way. Just some fun things that you could highlight the users and the people in the community because you know, the more you can make them a part of this, which they are, the more that people are going to want to contribute and do things with it. So yeah, I'd say that's a big thing. So you're, you're, you're already doing most of it. You just gotta keep at it, add in some more things and be like consistent as much as you can.

00:19:43 - Tobiloba Adedeji

So noted. Thank you, Scott.

00:19:47 - Aiden Bai

It's funny because we, we were working on like a thing where we try to like integrate to like community projects and we literally call it case studies. Yeah.

00:19:58 - Scott Steinlage

So you know what I'm talking about.

00:19:59 - Anthony Campolo

But I like the term case studies. I think it's, it's because it's a very corporate kind of word. But, but it's like, you know, you have like, like this was the case and we did a study on the case, you know, like

00:20:13 - Aiden Bai

so it gives me like Sherlock Holmes vibes. We're like trying to investigate.

00:20:19 - Anthony Campolo

Yeah, no, it's, it's true. When it comes to tech stuff it can be like I really like companies that have like technical blogs, like, like even companies videos like Netflix. You know, we'll have like very in depth technical blogs and we'll write these stories or write stories of like, you know, times things broke and how they kind of, you know, debugged it and like first figured out what was even wrong with it. It's like you have to narrow it down to like such a very specific thing that had gone wrong. You know, I saw one, I forget which company it was, but they're always datadog. Like they're, they're a company based around monitoring when stuff breaks. So it's like what happens when the company that monitors the stuff breaking breaks itself and their entire system went down. They were multi cloud so they already were like they had like Amazon Azure. No, specifically there was those clouds, but they had like two big clouds, maybe even more. And they both went down because they broke it in such a profound way. And it broke both of their multiple clouds that were set up for fallbacks and so you just never know.

00:21:21 - Anthony Campolo

Like you, the. The most professional, best people in the world, you know, still managed to break their stuff in unfathomable ways, which, you know, makes me feel better as a developer.

00:21:31 - Scott Steinlage

Yeah, and see that, that's another thing right there. You know, just like Anthony was stating, like, he just told you a story, right? I mean, I think storytelling is a very big piece of all this, right? And the better you get at storytelling, the better you're going to be able to communicate things with people, and then the better they're going to understand the process of what you're going through, the more they're going to relate to things and the more they're going to want

00:21:51 - Aiden Bai

to be a part of it.

00:21:51 - Scott Steinlage

So.

00:21:52 - Anthony Campolo

Yeah. So let's tell a story about Million right now. You said you have a demo for us?

00:21:59 - Aiden Bai

We do, yeah. So long ago. No, let's see. Let's see if I can share my screen. This is the demo we show everyone. Essentially.

00:22:18 - Anthony Campolo

You can increase your text a couple times.

00:22:24 - Aiden Bai

Okay, cool.

00:22:24 - Anthony Campolo

Yeah, that's pretty good. I like this demo, by the way. It's pretty cool.

00:22:29 - Aiden Bai

Yeah, essentially. It's basically, what if we had a bunch of expensive UI elements, like a lot of them, and this is completely unrealistic, but we just.

00:22:42 - Anthony Campolo

You know what, what you're kind of doing here is you've kind of created like a visual representation of the JS framework benchmark, which gives you a table with a whole bunch of elements, right?

00:22:53 - Aiden Bai

Yeah, essentially. Except, like, way less scientific. But we're just going to ignore that. Essentially, like, when I click this, the count will go up and it would just like multiply a random value and get its product. Essentially.

00:23:06 - Anthony Campolo

When I click on this, you're trying to do a lot of computation on the screen at one time.

00:23:12 - Aiden Bai

Exactly.

00:23:13 - Anthony Campolo

Yeah.

00:23:14 - Aiden Bai

And you can see that it's kind of slow. And to be fair, we're not using Fiber. So when we switch to Fiber, it's better.

00:23:24 - Anthony Campolo

But what is React Fiber?

00:23:27 - Aiden Bai

Oh, yes. So React Fiber is essentially when you use something like start transition or suspense. Instead of doing all the work at once, it spreads it over a time period. It's like instead of paying your house all at once, you pay over 30 years or whatever. That's great, but let's say I'm clicking really, really fast. It's missing a lot of clicks. You can see here I'm clicking like 10 times per second, but it's only updating maybe one time per second. So that's the issue with Fiber. It does make the page not lag as much, but it's not updating as frequently. It's like dropping FPS.

00:24:26 - Anthony Campolo

It's a frame. Frame rate being dropped.

00:24:28 - Aiden Bai

Frame rate. Yeah, exactly.

00:24:29 - Anthony Campolo

Yeah. Because when you have a nice smooth frame rate, like 60 frames per second, then everything moves smoothly, like you're watching a movie. But then if there's lag, if you're dropping frames, then you'll see jitter. And that's when you know that basically you're throwing too many pieces of computation at your computer at once. Because at the end of the day, a computer is a physical object with the number of bits that it can compute in a certain amount of time. And if you try and throw too many at it, it'll basically say, hey, I don't have this many bits. And then it'll drop bits.

00:25:03 - Aiden Bai

Exactly. Yeah, but what if we just made it faster? And that's kind of what Million tries to ask. The caveat here is that this is the same code but wrapped in one function. So just note that. And when I click really fast,

00:25:18 - Anthony Campolo

Cheating. Yeah.

00:25:20 - Aiden Bai

Oh, yeah, yeah. So, I mean, like, the point is, like, you don't have to, like, write a different framework here. So it's pretty good. Like, it's a lot better than React if we look in comparison. And we can always like, oh, my gosh. Okay,

00:25:36 - Scott Steinlage

can we just code something to be like, on hover click 1000.

00:25:42 - Tobiloba Adedeji

Honestly,

00:25:44 - Aiden Bai

yeah, you can always attach, like, a fiber or, like a fiber solution here where it's like, it, like, amortizes it as well, but like. Or like, it just spreads it over as well. But yeah, like, this is just raw million. It's pretty fast. And you can also see, like, the actual benchmark instead of this. This demo that you. Million performance pretty fast. The virtual DOM itself, from what I remember.

00:26:16 - Anthony Campolo

It's.

00:26:16 - Aiden Bai

I mean, we can look at it right now. You see?

00:26:20 - Anthony Campolo

Yes, you have the code for this. I cloned down that repo and I didn't see a start script. Like, how do you start it?

00:26:30 - Aiden Bai

What I do usually is. Or it's like a NPM run dev, whatever the. Whatever the package manager is.

00:26:38 - Anthony Campolo

No dev script is what I'm Saying, oh, interesting.

00:26:40 - Scott Steinlage

A song. Bad. And then it just starts.

00:26:49 - Aiden Bai

Hold on, let me see.

00:26:51 - Anthony Campolo

Yeah, I was profoundly confused when I cloned the repo down. Like, how do I run this? I even ran PNPM vite and that. It got confused and didn't know what to do.

00:27:00 - Aiden Bai

Interesting. Is. Is this what you're. Okay, is this the repo you cloned Million Dash demo?

00:27:05 - Anthony Campolo

So it was whatever goes. So when you go back to your. Go back to the demo itself.

00:27:12 - Aiden Bai

Oh, okay. Let me. Man, let me share my entire window instead. Yeah, that'd be easier.

00:27:18 - Anthony Campolo

It was. I just clicked the. Yeah, so I just clicked the GitHub thing on the top left. What does that go to?

00:27:29 - Aiden Bai

This one? And then.

00:27:30 - Anthony Campolo

Yeah, that goes to this. Yeah, that's. Wait, hold on.

00:27:33 - Aiden Bai

Is that what it was? I think you might have clicked on like the. This one. Right? This is like the main repo and then this is the.

00:27:43 - Anthony Campolo

So I think I ended up at the million.

00:27:45 - Aiden Bai

Yeah.

00:27:46 - Anthony Campolo

Okay. That's why. Yeah, I went to the actual million get repo. It had the website in it. So I should have.

00:27:57 - Aiden Bai

We can analyze the source right now as well.

00:27:59 - Anthony Campolo

Yeah, I'll show this out.

00:28:02 - Aiden Bai

The relevant code, I don't remember where it is, but it's probably here. Yeah. So essentially what we do is each row in the benchmark here is a table row, like a TR element. And this is a really expensive element because we're adding,

00:28:26 - Anthony Campolo

font up a couple times.

00:28:28 - Aiden Bai

Yeah.

00:28:32 - Anthony Campolo

Okay, so what we're looking at right now, this is the table view. And so this is what is actually displaying. You have random and count and then product. So those are the three different things that are displaying in your table.

00:28:48 - Aiden Bai

Yeah, and then we also have a bunch of random hidden TD elements. That's something React has to do, but we don't. We're emulating a very expensive row. If you're using a normal virtual DOM, you essentially have to diff a lot of extra nodes. But if you're using Million, you don't have to do it because you already know where the dynamic nodes are. So this just shows that Million is fast when rows are expensive to diff.

00:29:28 - Anthony Campolo

So you're giving a handicap kind of.

00:29:31 - Aiden Bai

Exactly. Yeah.

00:29:33 - Anthony Campolo

Okay, interesting.

00:29:35 - Aiden Bai

Because, like, if we remove this, the performance would be the same because you're not diffing like that many nodes or that many rows.

00:29:42 - Anthony Campolo

Right. So the table view, we're looking at right now is this for all three of them or for just. Because there's the react is react fiber then there's the millions. How do those three things translate into the code?

00:29:56 - Aiden Bai

It's all three of them using the exact same component.

00:29:58 - Anthony Campolo

They all use this same code here, but then you run them through different frameworks.

00:30:04 - Aiden Bai

Exactly, exactly.

00:30:06 - Anthony Campolo

I see. Interesting. What's the difference in the react one, the react fiber in terms of the actual code? I'm curious, how do you turn react fiber on?

00:30:18 - Aiden Bai

It's in the. This one probably. It's pretty easy. Every time you have like a state, like a, you know, like a state change, you can just wrap it around with the start transition and React will like see this and it will just run like a. Like a. Basically this is like. I don't know what it's called, like either throttle or debounce or whatever but like. Yeah, yeah, basically that's what it does. And so this, when I. Every time I click the button I run a transition and then it will like spread those like computations out.

00:30:56 - Anthony Campolo

Interesting. Yeah. We have to have someone from the REACT team to talk about React fiber. I don't really know much much about it. I just know it's the, the new hotness in React that makes things better for reasons cool. Anything else you want to highlight in this demo or in this code base?

00:31:19 - Aiden Bai

Yeah, that's really it. You can definitely take a look. There's a lot of unnecessary things I over engineered like suspense which you don't need here. But yeah, take a look if you're interested.

00:31:30 - Anthony Campolo

What are you running it on in terms of deployment?

00:31:34 - Aiden Bai

I'm running on Vercel. Basically it's a V project, so it's just a static website in Vercel.

00:31:43 - Anthony Campolo

Sweet. If you ever have interest in that, is there going to be any server stuff? How does the server fit into the world of Million?

00:31:55 - Aiden Bai

The thing is, it doesn't really right now. One thing we're considering is building a meta framework. We're still unsure and we haven't tried it yet, but we eventually want to integrate with existing solutions. For example, maybe integrating with Qwik through Qwik React. If we can't do that, then we have to enter the meta framework world and figure out how to do all this.

00:32:35 - Anthony Campolo

Yeah, yeah. The meta framework world is very interesting right now. Like the fact that Solid Start is now going to use Astro. To me like throws this like huge interesting question mark into the whole thing because now if framework is going to build on Astro as a meta framework, it's like, what does that mean? So it's like, would Million be able to integrate with like Astro? Because that would be very different from integrating with Qwik. Right?

00:33:01 - Aiden Bai

I think it already works with Astro. It's not a full meta framework integration, but you can use Million components inside Astro.

00:33:09 - Anthony Campolo

That'll be the simplest way to add meta framework like capabilities and without having to. Because the question is basically do you want to build a router or not? Or do you want to use.

00:33:18 - Aiden Bai

Exactly, yeah. We've been working with like thinking about like how can we collaborate with existing open source projects, like people who are working on rsc, like React server components, meta frameworks and how can we work with them to add million or things like that. One thing about million is we try to do everything, a lot of things well, but we don't want to do everything well. And so we like eventually what we wanted to try to do is make a golden path where power users and performance focused people can follow this golden path inside React and have good applications essentially.

00:34:04 - Anthony Campolo

Yeah, no, it sounds really interesting. It sounds like it's a kind of a wide open field in terms of where you want to go because you've really honed in on this kind of front end client side type thing that is very much like, you know, it's like React, you know, you're just dealing with DOM and work on the browser and there's this whole world of now server side stuff that all these frameworks are playing in and it can be daunting. So I can understand why it would make more sense for you to want to see what can we plug into versus how do we build our own router and server side stuff. That's a huge thing. You're a college student, you'd be competing against frameworks that have entire companies of people building on this stuff. Yeah, I think that makes a lot of sense and I would definitely recommend getting a good sense of what is out there and what could Million plug into and then find the team that is going to be most willing to work with you to make it happen. Like people who are excited to be like, yeah, let's make this work.

00:35:09 - Anthony Campolo

Here's someone from our team who can help you out that's going to, I think kind of make or break, you could find something that could be technically the best solution but if they have no time for you and the slightly maybe not quite as refined solution but still pretty good choices like hey we're down for this. This is person who can actually help you that can make a really big difference in terms of what can you actually make happen.

00:35:33 - Aiden Bai

Totally. Yeah. And I'm sure that there's a lot of great people out there in open source projects that are willing to help as well. Definitely, yeah. One thing. Yeah it's interesting because I've mostly been in the front end world and so I have zero real world experience in how do we make not even using certain server stuff but also being able to make a whole metaphor or integrate with meta framework. So it's definitely a space I not only have an explore but need to explore.

00:36:16 - Anthony Campolo

Happy to chat anytime about it. I know me and Scott pretty much know all the people working on all the main meta frameworks right now. We have them on the show and we have them on JavaScript jam and stuff. We need to get you on our spaces. Are you down to come on a Wednesday? We have them at a. It should be a good time for you since you're in Oregon. We do them 12pm eastern time or Pacific time. So yeah, I would love to have you on that. I also want to get you on FSJAM to talk about million because I'm really fascinated by this frame. Right. This is really cool. I think you have a super cool story like what you've managed to accomplish in such a small amount of time is really great. And the fact that there is a community at all and there's people excited about this is great. So yeah, I have some sound in the back. Sorry about that. But yeah, what else do you want to talk about in terms of million and what you got going on?

00:37:12 - Aiden Bai

Yeah, this is just kind of a sneak peek. But I do have like I'm writing an article on this. So essentially one thing that people don't understand is like there are already like a lot of this is not finished at all. But just a sneak peek.

00:37:30 - Anthony Campolo

Can you zoom in just a little bit?

00:37:32 - Aiden Bai

Yeah, no problem. Let's see. There we go.

00:37:38 - Anthony Campolo

Data driven, Data agnostic is the Y axis and optimizes reconciliation versus optimizes rendering is the X axis. You're going to have to explain that a bit more.

00:37:53 - Aiden Bai

Essentially there are a bunch of react rendering solutions or react optimization solutions but people don't understand what they do. We already have existing solutions like useMemo where you can memo some data and then it will not render if you whatever I think this is better Memoir.

00:38:21 - Anthony Campolo

Yeah, the memoization and use memo. This is the part of React that I find actually very few React devs even get into the ones who do have battle scars.

00:38:34 - Aiden Bai

Exactly. That's the point of forget right to explain. Data driven is things that depend on your data. And so for example, memo depends on your props or Jotai depends on you making atoms in your code, or virtualization depends on you having a list of data or list of code or list of stuff. And it renders specific things. Data agnostic is like. It doesn't care about your data, it just renders. We also have this axis of rendering and reconciliation. So rendering reconciliation are actually different. Essentially rendering is the process of running your component function just like running it and it returns that. JSX reconciliation is the thing I'm talking about with the diffing. If we had two blueprints, let's figure out the differences and make the actual change. These things like Jotai or Virtualization or forget, they either reduce the amount of rendering you need to do, or it just prevents this rendering reconciliation process from even happening. But with things like Preax signals, it doesn't necessarily. Essentially what it does, it figures out the relationship between the data and the user interface and it makes that direct change. It doesn't optimize rendering, it optimizes the reconciliation process.

00:39:57 - Aiden Bai

You can render as much as you want, but the thing is going to be really fast. But the thing with all these solutions is that they're all data driven in a sense. Essentially it depends on you having some control over your data. This is the whole signals versus whatever argument. If you have control over your data and you understand the reactivity portion, you can have really fast updates. But that comes at the cost of you have to think of your data. Mini JS is a more agnostic solution. What if we didn't have to care about the data? What if it just was fast?

00:40:36 - Anthony Campolo

This chart also tells me that there's a huge question mark for something that is data agnostic and optimizes rendering.

00:40:45 - Aiden Bai

Right. I'm sure. I think fiber could go down here maybe, but it's something that I have to think about more and you'll probably see release soon.

00:40:58 - Anthony Campolo

I like this. This is an interesting graphic and it's something that I've never even thought of before. So yeah, I would be very curious to check out the blog post that you're. You're writing for this. And we'll. We'll throw that in our newsletter for sure. Do you have other things you've Written like, do you have a blog?

00:41:16 - Aiden Bai

Yeah, we have a technical blog. We like, the first two articles are about our like methodology. Like, okay, how do we, how the hell do we make it so fast? And so we kind of like, yeah,

00:41:28 - Anthony Campolo

you guys had an incredible video. You put out a video like middle of 2022 that I saw that was really well edited that kind of like showed a lot of the stuff you're showing on your webpage. I really did. It was only like a minute long, but it was, it was like, it was really sharp.

00:41:45 - Aiden Bai

Yeah, we, we have a, I have a friend who's an editor who helped us get that together.

00:41:50 - Anthony Campolo

Yeah, that is great. It was really well done. We'll, we'll share that in the show notes.

00:41:54 - Scott Steinlage

Always good to have a good editor friend.

00:41:56 - Aiden Bai

Exactly, exactly. It's funny because I don't know if this is just us that sparked it, but some of the projects I'm seeing now are coming out with really cool Apple style videos. I don't know if that's us, but it's interesting to see that trend.

00:42:14 - Anthony Campolo

Yeah, no, totally. I think it's great. It's really easy if you have people who have the skill set to put out content that blows away most open source projects. Because most open source projects it's people who code stuff and like that's what they do, you know, so they have that skill set and they code something super legit. But media is an entirely separate skill set. Totally.

00:42:40 - Aiden Bai

Yeah. And also you have to have like way too much time on your hands to do this.

00:42:44 - Anthony Campolo

But yeah, or money, that's another thing. Time or money.

00:42:46 - Aiden Bai

Exactly.

00:42:48 - Anthony Campolo

Yeah. That's where the Apple style stuff is coming in now. Like the people who are now building Apple style things for their projects because like Apple like money.

00:42:57 - Aiden Bai

Exactly. I'm not complaining though. It looks great. Like I gosh, what is it?

00:43:04 - Anthony Campolo

Like you bump this up a couple.

00:43:06 - Aiden Bai

Yeah. Like the bento boxes on Back in Block.

00:43:10 - Anthony Campolo

This is a deep dive. This is not a beginner friendly post. That's funny.

00:43:15 - Aiden Bai

But yeah, like this is kind of like a. You can definitely read through it. But like the main part is like.

00:43:19 - Anthony Campolo

No, I love this. This is like the million thesis.

00:43:23 - Aiden Bai

Exactly. Like this is slow because we had to diff a bunch. But what if we didn't diff a bunch? Instead we did static analysis and then we just, you know, dirty check the data. Like check the data change or not and then update it.

00:43:42 - Anthony Campolo

Yeah, that was explaining at the very beginning of the episode.

00:43:46 - Aiden Bai

Exactly. Yeah, yeah. We talk about. Also. Why do we not Make a compatibility library. Instead we do this opt in thing. And so first of all, why do we do that and how we do that? Essentially it's just like we render a loader component and the loader gets a ref from React. We can use a useref and that ref stores that element. And so instead of using React to render the virtual dom, we just take that element and then we render it with the Million virtual dom. And so React doesn't know that we rendered it, but Million does. Yeah. And this is definitely like who created these images? I did inside excalidraw.

00:44:37 - Anthony Campolo

These are all just excalidraw. Yeah. Cool. Yeah.

00:44:40 - Aiden Bai

Oh, not the.

00:44:42 - Anthony Campolo

I've never seen excalidraw used with colors. I think that's why it looks slightly nicer than your typical Excalibur draw. Because. Yeah, just like it just pops like it's, it's really clear. But also it looks nice and it's not like, because I have a Mosick Scala draw because it's all just black and white. Yeah. Like it can, it can get the idea across. But it doesn't look very good for like a blog post where it's like, this looks really good in blog post format.

00:45:07 - Aiden Bai

Yeah, exactly. That's a great summarization. I've actually seen. I don't know if we introduced this pattern. I'm pretty sure we didn't. But there are also. What's cool is other things. If you've seen Maverick, they're kind of like a fine grain reactivity thing for React and web components. They're kind of also using this pattern to do like, you know, often rendering to certain to their thing. And so they're like, there's so many solutions to React now. It's both cool, but like one thing I read somewhere someone commented or something, it's like this is more indicative of

00:45:53 - Anthony Campolo

React where it's that there's whole ecosystem of REACT workarounds. Yeah, yeah. It's a little bit absurd, but. So do you think, could you imagine a world where Million JS would exist kind of free floating, separate from React at all? It would just be like another virtual DOM solution that uses jsx. But that has nothing to do with React, right?

00:46:22 - Aiden Bai

I think there could be, but I don't think it's our responsibility to do that. I think our virtual DOM base is really strong, really, really strong. What we're working on now is making React compatibility, Next.js compatibility, whatever, very stable. Eventually my hope is that frameworks adopt the pattern Million uses, like the block virtual DOM. There's already a little bit of that, but definitely not enough. Whether they're using the Million virtual DOM or building their own block virtual DOM and their own framework on top of that, that's the ideal. I guess the point of why we're all doing this is to promote this idea: block virtual DOM is cool and people should try it out.

00:47:25 - Anthony Campolo

No, it's cool. I like that, how you have a very clear thesis of why this framework exists, what approach it has, how it's different from the current approach, what that value prop is. It's really great. I think you've done a really good job of boiling this down and the content you've created around it is really great. So, yeah, I hope that, you know, you can continue to push this message out into the world. We're happy to make connections with anyone. If you're looking to like kind of go on more streams and things like that. I think, yeah, you got like a really kind of well honed pitch. It's. It's really impressive. So great job with that. Great job building this framework. And yeah, I definitely highly recommend people check this out. I think it's has a lot of value to it and if you want to let people know what are some links or places people can go to learn more about this and where they should go to connect with the Million community.

00:48:25 - Aiden Bai

Yeah, I mean, definitely just go to million.dev which is hosted on Google domains. As a side note.

00:48:32 - Anthony Campolo

Oh no.

00:48:35 - Aiden Bai

But yeah, definitely check out that website. We have literally everything on there. If you want to come chat with us, you can go to million.dev chat on Discord. Soon we'll have to migrate, but the day is not today.

00:48:52 - Anthony Campolo

Well, awesome. We'd love to get you on our spaces as well, along with Toby, who had to drop unfortunately. But be cool to have a space and we can have people from the community who want to come up and ask questions. They'd be welcome to do that as well. This is a very cool project, Aidan, and it's really impressive that you built it just as a high school student who is now a college student. I have to imagine that whenever you do eventually graduate, this will serve you very well in your job hunt. Also, it'd be like, hey, I built an entire open source project and framework and community. Yeah, great job, man.

00:49:30 - Aiden Bai

Thank you. I really appreciate and thank you for hosting me on the podcast. I'll definitely check the spaces out. Definitely interested in that.

00:49:38 - Scott Steinlage

Yeah, we'd love to have you.

00:49:40 - Anthony Campolo

All right, well, thank you so much for watching, and we will catch you next time.

00:49:45 - Scott Steinlage

See you in the next one.