Million.js 1.0.0 Release!

<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 …


This content originally appeared on DEV Community and was authored by Aiden Bai

<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.

YT Video

What is Million.js?

It's a Virtual DOM, or the architecture React is built off of. It's 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:


This content originally appeared on DEV Community and was authored by Aiden Bai


Print Share Comment Cite Upload Translate Updates
APA

Aiden Bai | Sciencx (2021-11-28T19:23:23+00:00) Million.js 1.0.0 Release!. Retrieved from https://www.scien.cx/2021/11/28/million-js-1-0-0-release/

MLA
" » Million.js 1.0.0 Release!." Aiden Bai | Sciencx - Sunday November 28, 2021, https://www.scien.cx/2021/11/28/million-js-1-0-0-release/
HARVARD
Aiden Bai | Sciencx Sunday November 28, 2021 » Million.js 1.0.0 Release!., viewed ,<https://www.scien.cx/2021/11/28/million-js-1-0-0-release/>
VANCOUVER
Aiden Bai | Sciencx - » Million.js 1.0.0 Release!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/28/million-js-1-0-0-release/
CHICAGO
" » Million.js 1.0.0 Release!." Aiden Bai | Sciencx - Accessed . https://www.scien.cx/2021/11/28/million-js-1-0-0-release/
IEEE
" » Million.js 1.0.0 Release!." Aiden Bai | Sciencx [Online]. Available: https://www.scien.cx/2021/11/28/million-js-1-0-0-release/. [Accessed: ]
rf:citation
» Million.js 1.0.0 Release! | Aiden Bai | Sciencx | https://www.scien.cx/2021/11/28/million-js-1-0-0-release/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.