Repository files navigation

Want toautomatically find and fix performance issues? Check outMillion Lint.

📚 Read the docs

🎦 Watch video

💬 Join our Discord

🌐 Follow on Twitter

Million.js is an extremely fast and lightweight optimizing compiler that makecomponents up to70% faster.

Oh man... Another/virtual dom|javascript/gi framework? I'm fine withReact already, why do I need this?

Million.js works with React and makes reconciliation faster. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of diffing (try it out here)

TL;DR: ImagineReact components running at the speed of raw JavaScript.

The Million.js CLI will automatically install the package and configure your project for you.

npx million@latest

Once your down, just run your project and information should show up in your command line!

Having issues installing?→ View the installation guide

To understand why to use Million.js, we need to understand how React updates interfaces. When an application's state or props change, React undergoes an update in two parts: rendering and reconciliation.

To show this, let's say this is ourApp:

functionApp(){const[count,setCount]=useState(0);constincrement=()=>setCount(count+1);return(<div><p>Count:{count}</p><buttononClick={increment}>Increment</button></div>);}

In thisApp, when I click on the button, thecount state will update and the<p> tag will update to reflect the new value. Let's break this down.

The first step is rendering. Rendering is the process of generating a snapshot of the current component. You can imagine it as simply "calling" theApp function and storing the output in a variable. This is what theApp snapshot would look like:

constsnapshot=App();// snapshot =<div><p>Count: 1</p><buttononClick={increment}>Increment</button></div>;

In order to update the interface to reflect the new state, React needs to compare the previous snapshot to the new snapshot (called "diffing"). React's reconciler will go to each element in the previous snapshot and compare it to the new snapshot. If the element is the same, it will skip it. If the element is different, it will update it.

• The<div> tag is the same, so it doesn't need to be updated. ✅
  • The<p> tag is the same, so it doesn't needs to be updated. ✅
    • The text inside the<p> tag is different, so it needs to be updated. ⚠ ️
  • The<button> tag is the same, so it doesn't need to be updated. ✅
    • TheonClick prop is the same, so it doesn't need to be updated. ✅
    • The text inside the<button> tag is the same, so it doesn't need to be updated. ✅

(total: 6 diff checks)

<div>-  <p>Count: 0</p>+  <p>Count: 1</p>  <button onClick={increment}>Increment</button></div>

From here, we can see that the<p> tag needs to be updated. React will then update the<p> DOM node to reflect the new value.

<p>.innerHTML = `Count: ${count}`;

React is slow.

The issue with React's reconciliation it becomesexponentially slower the more JSX elements you have. With this simpleApp, it only needs to diff a few elements. In a real world React app, you can easily have hundreds of elements, slowing down interface updates.

Million.js solves this byskipping the diffing step entirely and directly updating the DOM node.

Here is a conceptual example of how Million.js reconciler works:

functionApp(){const[count,setCount]=useState(0);constincrement=()=>setCount(count+1);// generated by compilerif(count!==prevCount){<p>.innerHTML = `Count: ${count}`;}<button>.onclick = increment;  // ...}

Notice how when thecount is updated, Million.js will directly update the DOM node. Million.js turns React reconciliation fromO(n) (linear time) toO(1) (constant time).

How fast is it?→ View the benchmarks

Looking for the docs? Check thedocumentation or theContributing Guide out. We also recommend readingVirtual DOM: Back in Block to learn more about Million.js's internals.

Want to talk to the community? Hop in ourDiscord and share your ideas and what you've build with Million.js.

Find a bug? Head over to ourissue tracker and we'll do our best to help. We love pull requests, too!

We expect all Million.js contributors to abide by the terms of ourCode of Conduct.

→ Start contributing on GitHub

This repo is a "mono-repo" with modules. Million.js ships as one NPM package, but has first class modules for more complex, but important extensions. Each module has its own folder in the/packages directory.

You can also track our progress through ourRoadmap.

Million.js takes heavy inspiration from the following projects:

• 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'stemplate() API.
• Hack the Wave (Melinda Chang) for their homepage.
• react andturbo for their documentation. Many parts of the current Million.js documentation are grokked and modified from theirs.
• ivi,Preact,and more

Million.js isMIT-licensed open-source software byAiden Bai andcontributors: