Tech Stack

The Modern.js framework comes with built-in popular libraries and development tools from the community.

In this document, you can learn about the main technology stack involved in the Modern.js framework, as well as some optional libraries and tools.

UI Library

Modern.js uses React 18 to build user interfaces and is also compatible with React 17.

Rsbuild supports building Vue applications. If you need to use Vue, you can refer to "Rsbuild - Vue".

Routing

Modern.js uses React Router 6 for routing and is also compatible with React Router 5.

Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to "Routing" to make your choice.

Micro Frontends

Modern.js provides out-of-the-box support for the Garfish micro frontend framework.

We are also working with Zack Jackson, the author of Module Federation, to provide a more comprehensive solution.

State Management

Modern.js can be used with any community state management library, such as Redux, Jotai, Zustand, Valtio, and more.

Modern.js also provides a wrapper around Redux called Reduck for state management. You can refer to "Reduck State Management" for usage.

Package Manager

Modern.js can be used with any community package manager, such as npm, yarn, pnpm, or Bun.

We recommend using pnpm for faster installation speed.

Bundler

Modern.js uses Webpack 5 or Rspack to bundle your web applications.

The default bundler used is Webpack 5. You can refer to "Using Rspack" to switch to the faster Rspack.

Transpiler

Modern.js uses Babel, SWC, or esbuild as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.

  • When using Webpack for bundling, the default tool is Babel, which can be switched to SWC or esbuild.
  • When using Rspack for bundling, the default tool is SWC, which can be switched to Babel.

Minimizer

During production builds, Modern.js uses Terser, SWC, or esbuild to minify JavaScript code, and cssnano to minify CSS code.

  • When using Webpack for bundling, the default tool for minifying JS code is Terser, which can be switched to SWC or esbuild.
  • When using Rspack for bundling, the default tool for minifying JS code is SWC, and switching to other tools is not currently supported.

CSS Transformer

Modern.js uses PostCSS to transform CSS code and enables autoprefixer by default to add CSS prefixes.

Modern.js supports enabling "Tailwind CSS" and is compatible with both Tailwind CSS v2 and v3.

CSS Preprocessors

Modern.js supports three CSS preprocessors: Sass, Less, and Stylus:

  • Sass and Less are supported by default and ready to use.
  • Stylus is optional and can be used by referring to the "Stylus Plugin".

CSS Modules

Modern.js provides out-of-the-box support for CSS Modules, which is implemented internally based on css-loader.

Please refer to "Use CSS Modules" for usage instructions.

CSS-in-JS

Modern.js supports the use of styled-components. Please refer to "Using CSS-in-JS" for usage instructions.

If you need to use other CSS-in-JS solutions, you can integrate them into your project on your own.

Testing Framework

Modern.js supports the use of Jest for unit testing or integration testing. This feature is optional. Please refer to "Using Jest" to enable it.

If you need to use Vitest or other testing frameworks, you can integrate them into your project on your own.

UI Components

Modern.js can be used with any React UI component library from the community, such as MUI, Ant Design, Arco Design, Semi Design, Radix UI, and more.

Additionally, Modern.js provides built-in support for on-demand import of Ant Design and Arco Design.

Component Development

Modern.js supports the use of Storybook for developing UI components. This feature is optional. Please refer to "Using Storybook" to enable it.

Node.js Framework

Modern.js supports Express.js and Koa.js as optional BFF runtime frameworks. Please refer to the BFF - Frameworks for more information.