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.
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.
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:
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:
Despite these drawbacks, Million.js can still be a viable choice for projects that prioritize lightweight and efficient solutions.
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.
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:
Learn more →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>
Million.js offers various options for deploying your application. Some popular options include:
These options give you the flexibility to choose which deployment method is best for your project’s needs.
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:
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.
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!
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Making carousels can be time-consuming, but it doesn’t have to be. Learn how to use React Snap Carousel to simplify the process.
Consider using a React form library to mitigate the challenges of building and managing forms and surveys.
In this article, you’ll learn how to set up Hoppscotch and which APIs to test it with. Then we’ll discuss alternatives: OpenAPI DevTools and Postman.
Learn to migrate from react-native-camera to VisionCamera, manage permissions, optimize performance, and implement advanced features.
