Introduction
To be honest, it fills me with great joy to finally be able to witness the launch of the 3.0.0 major release of Million.js; this is something that has been talked about since maybe July 2023, but, Aiden Bai finally assembled a team to get it out there and just last week on the day 2 February as at 8:00 am PST (Pacific Standard Time) Million v3 was released!!
Not to ruin the pace we're going with here, I just have to introduce myself. Hi, I'm Tobiloba and I'm the Community Engineer at Million.js, a role I volunteered for last year in January (2023).
What is Million
If you had asked me last year what Million was, I would say:
Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% Faster.
However, following the v3 release; I can however now tell you that:
Million is an optimizing compiler for React that does it's work automatically
As simple as that! Although, we've always had the compiler, I think the hint to catch here is that Million works automatically to help with the necessary optimizations it offers. If you need a deep dive on how Million works, let me know in the comments and I can explain it or refer you to resources.
To get Million installed in your React / Next / Astro / Vite / Remix / Gatsby project, just do:
npx million@latest
The way I would go through this will be in sort of an unconventional way as I only want to focus on the necessary information
Hydration And Performance Fixes
Challenge: Making large React apps with server-side rendering (SSR) interactive was slow in Million 2 due to hydration complexity (attaching event listeners).
// Normally, React SSR will traverse every node in the component (👎 ❌)
<div>
<h1>Hello, world!</h1>
<button onClick={handleClick}>{count}</button>
</div>
Solution: Million 3 introduces a smarter hydration system that only interacts with dynamic parts, improving performance from O(n)
to O(d)
(d being dynamic nodes).
// Million 3 only hydrates `handleClick` and `count` (✨ ✅)
<div>
<h1>Hello, world!</h1>
<button onClick={handleClick}>{count}</button>
</div>
Benefit: Faster initial page load and smoother interactions, especially in complex apps.
Additionally, Removing <slot>
elements in the next release will further reduce overhead and style issues.
Compiler Stability
Stability is key, and that's why we've completely rewritten the compiler in Million 3. This rebuild focuses on making your experience more solid and dependable by covering a wider range of scenarios. You'll benefit from:
- Enhanced TypeScript support for smoother integration.
- Multiple return statements handled flawlessly.
- Conditional logic working as expected, every time.
- Nested React components managed seamlessly.
We're not stopping there! In upcoming minor releases, we'll be turbocharging the compiler's performance, making Million v3 even faster.
Million Wrapped
I haven't been able to deep dive into it's inner workings yet, but, let's just say it was cooked with Remotion and as opposed to us just having you only have to show us how your faster your app is with this in your terminal:
We now have MILLION WRAPPED! and it looks like and feels like this (note that the image below was taken from a test and it is merely to show you how Million Wrapped works).
Internationalization
I remember working on this and it took me like a week to properly setup! My initial plan with this was to get the website and docs translated to:
- Chinese
- French
- Spanish
However, this may just be due to the lack of proper documentation from the Nextra side of things (shoutout to Nextra though, regardless).
Before the new release, we were able to score a few points like getting the entire docs translated to Spanish, a lot of other pages,and a few blogs translated to French as well.
There has been none on Chinese though, but, we're actively looking for help and we have opened a few issues for people to help with here.
Thank you in advance.
Million Lint
I cannot say much about this, because I don't know much, but, just know that it is certain that with the Million linter in your React applications, you will not be writing any less-performant React code again!
I'm really looking forward to the public release of this linter.
Million Is Hiring
We are looking for talented frontend (dev tools) and pl/ml engineers to join us in the Bay Area. If you are interested, please email aiden@million.dev with your resume and something you built using Million.
Extra Gist
If you have been following the build-up up until the release day last week, you will know that we had a launch party and a LOT of cool people turned up!
I really enjoyed being part of the organizers of this awesome event and reaching out to speakers was super fun!
You can watch the entire event on Corbin Crutchley's Twitch
Thank you very much for reading up until this point! I appreciate you! Honestly, I am both scared and excited as to what the future holds for Million, but, we are hyper-focused on helping users build performant software be it frontend or backend
We are still celebrating the launch and we would like you to give us your experience using Million in your applications.
⭐️⭐️ Feel free to join our Discord to ask questions or share feedback and please give us a star on Github!
Top comments (4)
Does it allow passing
react components
in props?Does it allow passing
functions
in props?Last time I tried Million.js it only allowed serializable simple value props.
So it was not really usable to me since the most simple components (the only use cases where it could be used) were never really in need for optimized performance to begin with.
You can as well try and let me know, you shouldn't have any problems though if you will be using automatic mode
O(n) === O(d), that's just how O works. So, the algorithm isn't faster, but it operates on less input?
Nope it actually is. Two things called: Static-Analysis and Dirty-Checking that blocks have make it so.
million.dev/blog/virtual-dom