<1kb compiler-augmented virtual DOM. It's fast!

I initially started Million.js on a whim. I wanted to tinker around and figure out how to build a simple virtual DOM, and maybe share it with a couple friends. Six months later, Million.js 1.0.0 is completed!

It's been a hot minute, but I've genuinely enjoyed every moment of the process. I'm insanely ecstatic to finally present a stable version of something I'm proud of.

What is Million.js?

It's a Virtual DOM, or the architecture React is built off of. Its goal is to be a compile target for Transitional UI Libraries by providing ways for compilers to optimize diffing.

Essentially, Million.js leverages the declaratively and flexibility of the Virtual DOM and while deferring to the compiler when optimizations can be made.

It also is composable, but sensible by default, allowing you to build scalable, increasingly complex logic, but also enjoy best practices with simple API if need be.

// Composable
const diff = node([children(), props()]);
const data = diff(el, newVNode, oldVNode, []);
flush(data.workStack, schedule);

// Equivalent sensible default API
patch(el, newVNode);

And more complex usage of the default API:

import { m, createElement, patch } from 'million';

// Initialize app
const app = createElement(m('div', { id: 'app' }, ['Hello World']));
document.body.appendChild(app);
// Patch content
patch(app, m('div', { id: 'app' }, ['Goodbye World']));

Why?

• 🦁 Built for libraries that compile
• 📦 Lightweight bundle size (<1kb brotli+min)
• ⚡ Fast runtime operations
• 🛠️ Composable using drivers, sensible by default

Next Steps

I want to bootstrap a compiler using babel JSX AST plugins and explore the possibilities around automatically applying flags, deltas, and keys at build time to optimize away unnecessary diffing.

Additionally, I want to see what new paradigms and APIs can be built for new UI libraries, and possibility greater adoption of Million.js or tangential ideology.

All in all, I'm excited for the future of Transitional UI Libraries, and I hope Million.js is a step towards that future!

Learn more:

• Documentation
• GitHub
• Research Paper
• Conference Slides
• Benchmarker
• Video