Introduction to Modern.js#

Modern.js is an open source web engineering system from ByteDance, which provides multiple solutions to help developers solve problems in different development scenarios.

Currently, Modern.js includes three solutions, targeting web application development, npm package development, and web application building:

As part of the Modern.js engineering system, each of the above solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.

About Documentation#

The current documentation site corresponds to the Modern.js framework, which is used to developing web applications.

• If you need to develop an npm package, please refer to the Modern.js Module documentation.
• If you need to implement a web development framework based on the Modern.js build tool, please refer to the Modern.js Builder documentation.

Modern.js can also be combined with the following solutions:

• If you need to develop a documentation site, Rspress is recommended.
• If you need to introduce micro-frontend architecture, Garfish is recommended.

Modern.js Framework#

The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.

Modern.js can provide developers with an ultimate Development Experience and enable applications to have better User Experience.

In the process of developing React applications, developers usually need to design implementation plans for certain features or use other libraries and frameworks to solve these problems. Modern.js supports all configurations and tools needed by React applications, and has built-in additional features and optimizations. Developers can use React to build the UI of the application, and then gradually adopt the features of Modern.js to solve common application requirements, such as routing, data acquisition, and state management.

It mainly includes the following features:

• 🚀 Rust Bundler: Provides support for dual bundlers, easily switch to the Rspack for faster build speed.
• 🪜 Progressive: Create projects with the most streamlined templates, gradually enable plugin features through the generator, and customize solutions.
• 🏠 Integration: Development and production environment web server are unique, CSR and SSR are isomorphic development, and API service calls are functions as interfaces.
• 📦 Out Of The Box: Default TS support, built-in build, ESLint, debugging tools, fully functional and testable.
• 🌏 Ecology: Self-developed state management, micro-frontend, module packaging, Monorepo solutions, and other peripheral needs.
• 🕸 Routing Modes: Includes self-controlled routing, file-convention-based routing (nested routing), etc.

Comparison with Others#

Next.js#

Next.js is one of the most popular React frameworks in the community. It is developed by Vercel.

Next.js defaults to using React Server Components, which means you will need to render your web application on the server and pay for the server-side rendering costs. In addition, Server Components is not yet a stable technology, and many popular React libraries in the community have not yet finished adapting to RSC. At this stage, you may need to use the Next.js's Pages Router to avoid issues caused by Server Components.

If you want to build a single-page application (SPA) and render it on the client side, Next.js may not be the best choice because many of its features are designed around server-first principles. If you need to use client-side rendering, you can only use limited functionality through Next.js's "static exports" feature.

On the other hand, Modern.js considers both client-side rendering (CSR) and server-side rendering (SSR) to be equally important. When you build a Modern.js application, it defaults to client-side rendering, and you don't need to understand the uses and limitations of Server Components. You can also enable SSR whenever you need it, and even enable SSR for specific pages. The whole process is fully progressive. Please note that Modern.js does not currently support Server Components. We will continue to monitor its potential and provide support when appropriate.

Umi#

Umi is a popular React framework in the Chinese community and serves as the underlying frontend framework for the Ant Group. Modern.js and Umi share many similarities, such as support for plugin system, convention-based routing, and micro-generators.

The main difference between Modern.js and Umi is their approach to optimizing build speed. Umi uses MFSU technology to improve build speed, while Modern.js uses Rspack to achieve 5 to 10 times faster build speed. From our perspective, Rust tools like Rspack are more in line with the long-term evolution of the front-end toolchain, as they can strike a good balance between performance, stability, and ecosystem compatibility.

In addition, Modern.js provides richer server-side features, including comprehensive SSR capabilities, integrated BFF development capabilities, and support for custom web servers. These capabilities have been extensively validated by ByteDance in numerous online applications and can be directly used in production environments.

Next Step#

If you want to learn how to use the Modern.js framework, you can try to create your first application, or read the Quick Start guide.