Million: Build apps with JSX faster than React and Preact

React is the most dominant frontend web framework around at the time of writing, however, it is not without its issues, for example, an inflated bundle size that can slow down app performance.

While there have been many attempts to minimize these factors, new innovations seek to improve on the progress that has already been made. In this article, we’ll explore Million, a lightweight virtual DOM. We’ll also compare the performance and features of Million with both React and Preact. Let’s get started!

• Common issues with React
• Speeding things up with Preact
• Compilation: The next generation with Svelte, SolidJS, and Million
  • Svelte
  • Solid
  • Million
• Creating a basic counter

Common issues with React

React introduced several useful innovations, for example, an HTML-like syntax for expressing declarative UI that gets transpiled into React.createElement calls. React also provides us with the ability to optimize updates to the DOM. By creating a virtual version of the DOM tree that is used to track differences in the actual DOM, we can limit updates to only things that have actually changed.

However, one issue with React is that you have to ship the React library with every React application. Doing so inflates the bundle size, which can reduce the speed to the first paint, or the initial load of the web application.

React, which is at version 18.2 at the time of writing, is made of two libraries: React, which is 10.7kb minified, and react-dom, which is 131.9.kb minified. This can be a lot to ship the browser, and it doesn’t even include the actual code for the web application itself.

Another issue is the virtual DOM, which can be processing intensive. While the virtual DOM can speed up renders on well-developed applications, it can also add large processing workloads on poorly developed ones that don’t use best practices or enable the virtual DOM to optimize efficiently.

Speeding things up with Preact

While many developers love the developer experience and productivity of using React, alleviating large bundle sizes and virtual DOM workloads is a key priority.

One of the original attempts to address these issues was Preact. Preact creates a Virtual DOM implementation that takes advantage of web standards so less code has to be shipped. The result enabled a 3kb library size, which is much smaller than React, a faster virtual DOM, and the ability to avoid transpilation by using HTM tagged template literals instead of JSX.

Preact has grown significantly in popularity among those concerned with the bundle sizes and virtual DOM processing of React. In fact, it’s the native templating library for Fresh, a new full-stack web framework for the Deno runtime.

Compilation: The next generation with Svelte, Solid, and Million

Another development sought to lower bundle sizes and speed even further by eliminating the need for shipping the framework to the browser altogether. This innovation consisted of popular tools like Svelte, Solid, and, Million, all of which are growing in popularity for their speed.

Svelte

Created by Rich Harris, Svelte embraces traditional web patterns and standards. Svelte applications are compiled to web standard code so no framework has to be shipped to the end user. Rich Harris has recently been hired by Vercel to work full-time on developing Svelte as well as its SvelteKit framework.

Solid

Created by Ryan Carniato, Solid was inspired by frameworks like Knockout but brings a very familiar React style with the use of JSX.

Solid apps, like Svelte, are compiled, and only application code is shipped to the end user. Solid’s reactivity model is quite different than React, so certain patterns play out quite differently even though you’re using JSX syntax.

Instead of component functions being rerun on each update, you designate parts of your code as effects that are reevaluated whenever dependencies are updated. Ryan Carniato has been hired by Netlify to work on Solid full-time.

Million

Similar to Solid, Million allows you to use JSX syntax and compile your code so you ship a lot less to the browser.

Million has a slim virtual DOM implementation, like Preact, to maintain an API more identical to React. In comparison to Preact’s 3kb virtual DOM implementation, Million ships at less than 1kb.

Million’s API is open source, allowing for anyone to build on top of it. Theoretically, if I wanted to create a compiler that compiled Vue components to work with the Million virtual DOM, I could.

Million allows for a faster React-like experience in its current incarnations but opens the door for developers to build new frameworks or extend existing ones on top of its slim and fast virtual DOM approach. Let’s see it at work by building a quick application.

Setting up your Million application

Head over to this Million template and click use template to create your own copy of the template in your GitHub account.

Clone to your computer by running git clone <github repo url>. Then, cd into the newly created folder and run npm install to install the required dependencies. Finally, run npm run dev to run the development server.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

When you go to localhost:3000, you should see the following:

We’re now all set to begin working on this Million app, which should really feel no different than working with React.

Creating a basic counter

Head over to your src/App.jsx file and replace the contents with the code below, which should clear the screen:

import { useState } from 'react';
import './App.css';
function App() {
  // State for the counter
  const [count, setCount] = useState(0);
  return (
    <div className="App">
    </div>
  );
}
export default App;

Now, let’s build our traditional counter, as we would in any early stage React tutorial:

import { useState } from 'react';
import './App.css';
function App() {
  // State for the counter
  const [count, setCount] = useState(0);
  // Function to increment counter
  function addCount(){
    setCount((current) => current + 1)
  }
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={addCount}>Add One</button>
    </div>
  );
}
export default App;

You should now see the following on the screen:

That’s it, you didn’t have to change anything about app development in React to develop in Million, but you are benefitting from the faster virtual DOM implementation and compilation that Million uses for slim bundle sizes.

Conclusion

Million, like Preact, solves the problem of large React bundles and a heavyweight virtual DOM but adds compilation for further speed enhancements and bundle reductions.

With Million, we can enjoy developing applications in the familiar way we’re used to with React without making any major alterations. However, keep in mind that some newer features may not be immediately available. The frontend framework space continues to be the center of a lot of innovation in the web development space, and it’s exciting to see what is to come from this project.