Tobiloba Adedeji

Posted on Feb 5 • Edited on Feb 6

Million 3.0: All You Need To Know

#react #javascript #hiring

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!

Resources

Top comments (4)

Adaptive Shield Matrix • Feb 5

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.