Million.js

The Fastest Compiler-Augmented Virtual DOM for the Web


🔗Description
💽 GitHubView source code
📝 PaperRead more about the research
🚧 PresentationBrief glance at research
🌇 VideoLive research presentation
💡 ManifestoPast, present, and future of Virtual DOM
🌐 WebsiteRead 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 modern internet, however, they are still created with tools that sacrifice both user and developer experience. This led me to create Million.js, the fastest compiler-augmented virtual Document Object Model (DOM) for the web. Million.js reduces load time and time-to-interactive by creating a compiler to pre-compute interactive regions of a web application before the user visits the page. The virtual DOM run-time optimizes interactive content through compiler flags, compute batching, scheduling, and reactive data primitives to achieve optimal performance. After comparative benchmarking, Million.js resulted in 133% to 300% faster rendering and 2347% faster load time compared with the most popular virtual DOM libraries. When Million.js is compared with a real-world web application with both comparative benchmarks and an informal user study, the initial findings show that 35% rendering speed is compared to React.js. With Million.js, web developers can also use React.js' Application Programming Interface (API) to create web applications. The findings show that through a React.js compatibility layer, web applications have the potential to be orders of magnitude faster than what is currently available.