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!
Latest comments (23)
Can i use millionjs uselist and usedelta on nextjs 12 project? Will it compile and will it make a difference?
can it use with vite.js+vuejs?
I'm looking forward to seeing the next steps for this. Having a real-world use case and solution would be a great selling point for this, as it will allow you to highlight the benefits in a more tangible way.
Yup! Working hard to achieve that future and thanks for the encouragement
Quit interesting
Just pointing out a typo:
From:
"It's goal is to be a compile target"
To:
"Its goal is to be a compile target"
Thanks for sharing!
Thanks! Fixed
great
Looks like uiedbook.js build and buildTo
Not sure where you're getting this, but that library's goal, API, and function are nothing like Million.js
Looks like mithriljs
mithril.js.org/
Mithril.js also uses Virtual DOM, which is why it looks similar. In fact, the Million "sensible" API is basically a mix of mithril.js/snabbdom. It's a result of the same architecture.
why brotli? brotli is not really good. why not gzip?
The reverse is true!
I guess it depends, but yeah, generally speaking brotli is better. You download the source code and serve it anyway, and you can choose what compression format you want to use.
Why continue to guide new developments when web components exist? You can take advantage of those features like lit.dev
This isn't really a new development -- React, Next.js, and Virtual DOM library friends are deeply embedded in the web development. If anything, it's an attempt to improve upon what is already established (standing on the shoulders of giants). Web components are the new kid on the block. It's a great option, but Million.js is just working in a different area of webdev.