Written by Isaac Okoro✏️
The frontend ecosystem has seen lots of recent improvements for making development easier and increasing productivity. Some of these improvements have come through the introduction of faster tools and frameworks like Svelte, Bun, Preact, Blitz, and more.
In this guide, we will take a look at one such framework called Million.js. We’ll look at why it was created, how it works, and the pros and cons that may arise from using this new framework. By the end of this article, you’ll understand how and when to adopt Million.js strategically in your projects.
What is Million.js?
Million.js is an open source, minimalistic JavaScript compiler designed to revolutionize and improve React performance overhead. It lets you write JSX code like React, but compile your code so you ship a lot less JavaScript to the browser.
Created by Aiden Bai, Million uses a granular approach when updating the DOM. This works differently from how React handles DOM updates, where it updates the entire DOM tree. Million’s approach reduces memory usage, improves rendering speed and performance without sacrificing flexibility.
Million.js achieves these feats by utilizing a special feature known as blocks. A block is a lightweight and highly performant higher-order component (HOC) optimized for rendering speed that you can use as a React component.
Further reading:
Why use Million.js?
Million.js offers a revolutionary approach when dealing with millions of data points compared to frameworks that employ traditional virtual DOM approaches. Let's see some reasons why you should consider using Million.js:
- Blazing fast speed: Million.js utilizes specialized data structures and a unique diffing strategy, making it extremely fast at handling applications. Million analyzes and automatically compiles your React code into optimized HOCs before rendering them, making the code 70 percent faster compared to React code written without Million.js
- Low memory usage: Million reduces memory usage and increase performance by using less than half the memory that React does for every single operation. By using observers on DOM nodes to tract state changes more effectively, Million does away with the need for a virtual DOM, thereby reducing memory usage and performance overhead
- DX: Since Million.js aims to be a simple and lightweight compiler for React applications, DX was a major factor in its creation. This shows how easy it is to set up and use Million.js, both for new developers and those with plenty of React experience
- Integrations: You can integrate Million.js seamlessly with not only React, but also with React frameworks like Astro, Gatsby, Next.js.
- Documentation: The comprehensive and user-friendly Million.js documentation provides clear guidance on using the framework effectively. The docs also cover installation instructions, API references, and usage examples, and making it easy for developers to get started and integrate Million.js into their projects
Further reading:
Drawbacks of using Million.js
While Million.js offers advantages like low memory usage and performance optimization, it's essential to consider potential drawbacks before deciding to use it in a project:
- Community & ecosystem: As a newer tool, Million.js has a relatively limited ecosystem compared to more established frameworks. You may face challenges finding community support, third-party plugins, or comprehensive documentation
- Learning curve: The learning curve for Million.js might be steeper for developers accustomed to more mainstream frameworks due to its unique approach and how some of its features work
- Future updates & support: As with any newer technology, you might also be concerned about long-term maintenance and support, as the framework's future development and updates are uncertain
Despite these drawbacks, Million.js can still be a viable choice for projects that prioritize lightweight and efficient solutions.
Getting started with Million.js
We have discussed the reasons why you should use Million.js in your next React application, along with some potential drawbacks. Let's now take a look at how you can get started with Million.js.
First, create your React application by running the command below:
yarn create vite
Follow the prompts to create your React application and then run yarn to install all dependencies.
Next, install Million into your project with the command below:
yarn add million
With that done, copy the code below into the vite.config.js file of your application:
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [million.vite({ auto: true }), react()],
});
Now, you are ready to use Million.js features in your project.
Understanding blocks, a key Million.js feature
Million.js introduces a unique concept called a block component. These blocks are the fundamental building blocks for creating user interfaces within your Million.js applications.
Million.js blocks go beyond simple components. They’re wrapped in a special HOC that optimizes their rendering performance. The HOC analyzes the block's structure and data flow to identify opportunities for efficient updates, leading to smoother and faster UIs.
At their core, blocks are essentially functions that accept an object containing properties (props) that define the block's behavior and appearance. This is similar to how traditional React components work.
Here’s an example of how to use blocks in your application:
import { block } from "million/react";
const MyFirstMillionCompomemt = block(function Component() {
return <h1>I just created my first Million component!</h1>;
});
function App() {
return (
<div>
<MyFirstMillionCompomemt />
</div>
);
}
export default App;
In the code block above, we imported a block from Million, used it to wrap the component, and then rendered the wrapped component inside the App component. The result in the browser should look like the image below: 
There are certain rules you should follow to use the block component effectively.
When declaring a block, you should define it as a variable declaration. For example:
const Block = block(() =><h1>Hey Hey</h1>) // ✅ Correct
export default Block;
Declaring it any other way is wrong and throws an error. Below are examples of invalid declarations of blocks:
console.log(block(() => <h1>Hey Hey</h1>)) // ❌ Wrong
export default block(() => <h1>Hey Hey</h1>) // ❌ Wrong
When importing a block, the block component must be imported from "million/react" and not from 'million' as shown in the code block below:
import { block } from 'million/react'; // ✅ Correct
The <For /> method is recommended when displaying a list within a block in Million.js. This happens because the Array.map() method used in React degrades performance and is not ideal, especially if the component that holds the list is a block:
<For each={items}>
{(item) => <div key={item}>{item}</div>}
</For>
Deploying your Million.js project
Million.js offers various options for deploying your application. Some popular options include:
- Static hosting: This straightforward approach is ideal for simple Million.js projects. Platforms like Netlify, Vercel, or GitHub Pages allow you to deploy your built static files without any hassle, making them accessible to users
- Custom server setup: For more complex applications requiring specific server-side functionalities, you can deploy your Million.js project on a custom server setup. This offers greater control, but demands more technical expertise to manage the server environment
These options give you the flexibility to choose which deployment method is best for your project's needs.
Use cases for Million.js
Million.js, with its focus on performance and efficiency, shines in specific business scenarios where performance and efficiency are critical. Here are some notable use cases:
- Single-page applications (SPAs): Million.js is well-suited to building SPAs due to its small size and efficient rendering. SPAs require seamless navigation and fast loading times, which Million.js can provide, enhancing the user experience
- Progressive web applications (PWAs): Million.js helps create lightweight, responsive PWAs that have offline functionality and flow memory usage, delivering optimal performance even on low-end devices
- Applications with nested data: Million.js is well suited for applications that utilize nested data. Nested data is typically slow to render due to tree traversal (i.e., going through the entire tree of data to find the data points your application needs) but Million’s optimized blocks make this faster and more elegant. Some examples of these applications include ecommerce applications and Content Management Systems (CMS)
Million.js vs. similar
Here's a breakdown of how Million.js compares to React, Preact, and Vue.js across key aspects:
| Feature | Million.js | React | Preact | Vue.js |
|---|---|---|---|---|
| Features | Limited. Offers a core set of features with a focus on performance and simplicity. The framework is still evolving, so the feature set is expanding | Extensive. Boasts a vast library of features and third-party components, making it suitable for complex applications | Similar to React. Focuses on a smaller footprint, but with faster performance. It prioritizes compatibility with existing React code | Good balance between features and ease of use. Offers a comprehensive built-in feature set and a strong third-party ecosystem |
| Performance | Potentially fastest. Shines in performance due to its focus on an efficient rendering approach | Good performance. Complex applications with large codebases may experience performance bottlenecks | Good. Similar to React, but with a potential edge due to its smaller size | Generally good. Might not be the fastest option compared to Million.js or Preact |
| Community | Smaller, growing | Very large and active | Leverages React's community | Large and active |
| Documentation | Limited, evolving | Extensive documentation and a wealth of tutorials and learning resources | Leverages React's resources, but its resources are more limited | Comprehensive |
| Learning curve | Easier. Might be slightly challenging for developers from other frameworks to pick up, but those already familiar with React will have an easier time learning Million.js | Moderate due to its JSX syntax and component-based structure | Moderate. Similar learning curve to React as it shares the same core concepts | Generally considered moderate, with a balance between simplicity and features |
This comparison table should give you a good sense of each option’s strengths and whether they’re suited to your use case.
Conclusion
This article took an in-depth look at Million.js, an open source, minimalistic JavaScript compiler designed to revolutionize and improve React performance. We looked at the key features of Million.js, advantages and potential drawbacks with using Million.js.
I hope this adoption guide helps you judge whether Million.js is suited to your needs. Have fun using Million.js in your next React application!
Get set up with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()must be called client-side, not server-side.
NPM:
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Script Tag:
Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
3.(Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
Top comments (0)