Million.js

A Fast, Compiler-Augmented Virtual DOM for Performant JavaScript UI Libraries


🔗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 web through social media sites to online entertainment, yet are still created with tools that sacrifice performance, extensibility, and load time. I created Million.js, the fastest compiler-augmented Virtual DOM for the web. 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 run-time 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 11 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 what is currently available.

Last updated on August 16, 2022