Unleashing Million.js v2.0.0

An extremely fast virtual DOM that makes React up to 70% faster!

In the past 5 months, I've been gearing up for Million.js new direction: React, augmented with performance-improving utilities. In v1.0.0, I announced that we would be embarking to replace React with a compiler--an ambitious goal with ambitious results.

However, I've come to realize that replacing React shouldn't have been the goal--you lose the React ecosystem and the architecture is fragile to change.

So today, I'm more than excited to announce a fully, ground-up rewritten version: Million.js v2.0.0!

What's new?

Million.js is up to 70% faster* than React. But that's not all:

• ⚛️ React.js compatibility
• 🔼 Next.js compatibility
• 🛠️ Opt-in optimizing compiler
• ☑️ Internal Block virtual DOM
• 💥Custom JSX runtime (for simple use cases)

* Local benchmark of JS Framework benchmark, PR currently pending.

It's now super easy to integrate into any React app. Yep, it's literally just one function:

import { block } from 'million/react';

const BigStatelessComponent = ({ test }) => {
  return <div>{test} {Array(1000).fill(0).map(() => <div></div>}</div>
}

// that's it! you can use it like a normal component now:
const BigButFast = block(BigStatelessComponent)

Why Million?

(and not Preact, Inferno, Solid...)

React "alternatives" like Preact and Inferno are awesome. They are great for building performant yet deeply interactive web apps, and even support some compatibility. Libraries like Solid sport the best performance, and are the top-of-the-line options for building extremely fast web apps.

However, these libraries can sometimes lack the things that make React great (namely the rich ecosystem, concurrent rendering, etc). Plus, most web apps don't need hyper optimized performance for their entire app, meaning migration to these tools is not always possible or necessary.

Million.js takes a different approach. Instead of replacing React, it augments it with performance optimizations when you need it. Million.js works out of the box, alongside your favorite metaframeworks (Next.js, Remix, etc.) and React libraries.

TL;DR: Don't replace React, augment it.

How does this work?

Million.js takes heavy inspiration from the work of blockdom.

Million operates off of the concept of a block virtual DOM. Normally, virtual DOM's diff all of the nodes on a tree, which can become computationally expensive.

Million's block tree requires much less updates, as nodes are grouped together into blocks.

The React integration operates off of the same virtual DOM block core, but does not need its own React reconciler. Rather, it mounts an "island" into the DOM.

<div>
  <million-island><!-- block renders here--></million-island>
</div>

I highly recommend reading over blockdom's performance notes to understand why it's fast.

Acknowledgements

• blockdom (Géry Debongnie)
  Thank you to Géry pioneering the concept of "blocks" in the virtual DOM. Many parts of the Million.js codebase either directly or indirectly derive from his work.

• voby (Fabio Spampinato)
  The Million.js "template" concept is derived from Voby's template() API.

• bun for their homepage. The Million.js homepage is a remix of what they have currently.

• ivi, Preact, and more

• Sukka, Tom, and all of the other contributors!

Are you as excited as me? Get started!