#Introduction to Modern.js

Modern.js 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: Modern.js uses Rsbuild/Rspack as the build tool, providing blazing fast compilation.
• 🪜 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.
• 🕸 Convention Routing: Using file-based routing helps developers quickly set up applications.

#Comparison with Others

#Next.js

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

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.

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. You can also enable SSR or Server Components whenever you need it, and even enable SSR for specific pages. The whole process is fully progressive.

#Umi

Umi is 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.

#Remix

Pelease refer to Modern.js vs Remix.