Skip to content

EgorKazachenko/million

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Million Banner

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.

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

Sponsors

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:

About

The Virtual DOM Replacement for React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.4%
  • JavaScript 8.5%
  • CSS 0.1%