Million.js
A Fast, Compiler-Augmented Virtual DOM for Performant JavaScript UI Libraries
| 🔗 | Description |
|---|---|
| 💽 GitHub | View source code |
| 📝 Paper | Read more about the research |
| 🚧 Presentation | Brief glance at research |
| 🌇 Video | Live research presentation |
| 💡 Manifesto | Past, present, and future of Virtual DOM |
| 🌐 Website | Read documentation |
Why?
My name is Aiden Bai and I'm really interested in HCI research, particularly within user interface (UI) and web development. At the time of writing this, I'm a student at Camas High School.
In July 2021, Million.js began as an experiment with Virtual DOM because I was curious with how UI libraries worked. I was frustrated with the lack of a modern, fast, and modular Virtual DOM library for JavaScript. Virtual DOM had been around for almost a decade, yet many Virtual DOM libraries still struggle with render speed compared to newer methods of rendering.
Today, Million.js is the first effort to bring Virtual DOM into the future after hundreds of hours of experimenting. Traditional Virtual DOM libraries have yet to leverage new technological paradigms in the new age of compiled Transitional UI Libraries. Million.js leverages the compiler to create predefined paths, instead of executing all the work in the browser. Because of of this, Million.js sports exceptional rendering speeds, as is used in many open source projects.
Abstract
Interactive web applications have increasingly dominated the web through social media sites to online entertainment, yet are still created with tools that sacrifice performance, extensibility, and load time. Enter Million.js, a fast, compiler augmented Virtual DOM for performant JavaScript user interface (UI) libraries. By creating a compiler to pre-compute interactive regions of a web application before the user visits the page, Million.js reduces load time and time to interactive. To achieve optimal performance, the Virtual DOM runtime optimizes certain types of interactive rendering through compiler flags, compute batching, and scheduling. Additionally, reactive data primitives can perform at bare metal speeds with constant time complexity by bypassing computation altogether. After comparative benchmarking, Million.js had results of 133% to 300% more operations per second when contrasted with the most popular Virtual DOM libraries with default diffing methods. When reactive data primitives are used, Million.js can render up to 40 times faster. My findings show that through a React.js compatibility layer, Million.js allows developers to use traditionally recognized Application Programming Interfaces (API) and create web applications that are orders of magnitude faster than currently available.