sanisoclem/million

📚 Read the docs

🎦 Watch video

💬 Join our Discord

🌐 Follow on Twitter

What is Million?

Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% faster.

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

Million works with React. Million makes creating web apps just as easy (It's just wrapping a React component!), but with faster rendering and loading speeds. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of React (try it out here)

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

📚 Learn Million in <5 minutes! →

Installing Million

Inside your project directory, run the following command:

npm install million

Example Usage

Million.js is a library that enables you to create blocks. A block is a special Higher Order Components (HOCs) that can be used as a React component but are hyper-optimized for rendering speed.

Blocks are essentially components wrapped by block(). Below is an example of a React "counter" component that's been wrapped with Million.js.

import { useState } from 'react';
import { block } from 'million/react';

// Just wrap Counter in a block() function!
const Counter = block(function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  const handleClick = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClick}>{count}</button>;
});

export default Counter;

→ Try the quickstart

Codebase

This repo is a "mono-repo" with modules. Million 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 our Roadmap.

Module	Description
`million`	The main Virtual DOM with all of Million's core.
`react` / `react-server` /	React compatibility for Million.
`preact` / `preact-server` /	Preact compatibility for Million.
`compiler`	The compiler for Million in React.
`jsx-runtime`	A simple JSX runtime for Million core.
`types`	Shared types between packages

Resources & Contributing Back

Looking for the docs? Check the documentation or the Contributing Guide out. We also recommend reading Virtual DOM: Back in Block to learn more about Million's internals.

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

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

We expect all Million contributors to abide by the terms of our Code of Conduct.

→ Start contributing on GitHub

Acknowledgments

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

Million is being used at companies like Wyze and Dimension, as well as open source work like Quartz, TinyPages, and more.

License

Million is MIT-licensed open-source software by Aiden Bai and contributors:

sanisoclem / million