Umi React Framework

Umi 4 introduces several major architectural improvements:

• MFSU V3: Enabled by default, offering significantly faster compilation and page load speeds. It can also run independently of Umi.
• Dual Build Engines: Supports both Vite and Webpack 5. Developers can choose different engines for different environments (e.g., Vite for dev and Webpack for build).
• React Router 6: Built on React Router 6, featuring a new routing structure designed for configuration-based routing and future extensible request handling.
• Dependency Pre-bundling: Locks both Node-side dependencies and certain runtime dependencies like core-js and @babel/runtime for improved stability.
• Umi Max: A centralized framework version based on the internal Bigfish framework.
• Micro-generators: Inspired by Modern.js, allowing for on-demand feature enablement (e.g., adding Prettier with its configuration and dependencies automatically).

Umi is an extensible, enterprise-grade frontend application framework. It is built around a robust routing system that supports both Config-based Routing and Convention-based Routing.

Key features include:

• Plugin-based Architecture: Umi itself is composed of plugins, allowing you to extend or modify almost any part of the lifecycle from source code to build output.
• MFSU (Module Federation Speed Up): A Webpack-based bundling solution designed to be faster than Vite for large-scale projects.
• Routing: Built on React Router 6.
• Rendering Modes: Supports Client-Side Rendering (CSR), Server-Side Rendering (SSR), and Static Site Generation (SSG).
• Enterprise Readiness: Focuses on security, stability, best practices, and constraint capabilities.
• Modern React Support: Framework-level integration for React 18.
• Other Features: Built-in support for Monorepo best practices, ESLint, Jest, and optimized request handling.

Umi follows a convention-based directory structure. Organizing your code according to these conventions allows Umi to automatically handle routing, mocking, and configuration.

Key Directories

• config/: Contains config.ts for centralized configuration management.
• mock/: Contains .ts or .js files for data mocking.
• public/: Static assets accessible via root path (e.g., public/image.png is available at /image.png).
• src/: The main source code directory.
  • pages/: Contains page components. Umi uses file-system routing based on this directory.
  • models/: Contains data models.
  • layouts/: Contains global layout components.
  • app.(ts|tsx): Runtime configuration file.
  • global.ts: Global pre-run scripts.
  • global.(css|less|...): Global styles.
  • overrides.(css|less|...): High-priority global styles for overriding third-party libraries.
  • .umi/ & .umi-production/: Temporary files generated during dev/build. Do not commit these to Git.

Umi 4 introduces several major architectural changes and features compared to Umi 3:

• MFSU V3: Enabled by default, offering improved compilation and page load speeds. It can also run independently of Umi.
• Dual Build Engines: Supports both Vite and Webpack 5 (with physical caching enabled). Developers can choose different engines for development and production.
• React Router 6: Built on React Router 6, featuring a new routing structure designed for configuration-based routing and future convention-based requests.
• Umi Max: A centralized framework version based on the internal Bigfish framework.
• Low Import Mode: An experimental feature that allows using common components and hooks (like Link, useLocation, Button, useModel) without explicit import statements.
• Dependency Pre-bundling: Provides more thorough locking of both Node-side and runtime dependencies (e.g., core-js, @babel/runtime).
• Transpiler Options: Provides choices for source code compilation (babel, swc, esbuild) and minification (esbuild, swc, terser, uglifyJs for JS; esbuild, cssnano for CSS).
• Micro-generators: Allows on-demand enabling of features (like Prettier) with automatic configuration and dependency installation.

The @umi/max data flow management plugin provides a lightweight, hook-based solution for managing shared global data across your Umi project. A 'Model' is essentially a custom hook that, when exported, becomes globally accessible via its namespace.

Namespace Rules

Models are automatically registered based on their file path:

Creating a Model

A Model must default export a function (a hook). This function defines the state and logic that will be shared globally.

// src/models/counterModel.ts
import { useState, useCallback } from 'react';

export default function Page() {
  const [counter, setCounter] = useState(0);

  const increment = useCallback(() => setCounter((c) => c + 1), []);
  const decrement = useCallback(() => setCounter((c) => c - 1), []);

  return { counter, increment, decrement };
}

export default () => {
  const user = { username: 'umi' };
  return { user };
};

Umi vs. create-react-app

create-react-app is a scaffolding tool, whereas Umi is a meta-framework. Scaffolding tools are useful for quick starts but lack the iterative capabilities, deep abstractions, and long-term maintenance required by professional teams.

Umi vs. next.js

• Use next.js if your primary goal is SSR.
• Use Umi if you are doing CSR (it is optimized for it) or if you need higher extensibility. Umi provides more 'out-of-the-box' features for enterprise needs, such as config-based routing, patching solutions, Ant Design integration, micro-frontends, internationalization (i18n), and permission management. Umi also ensures higher stability by locking dependencies to prevent breaking changes during re-installs.

Umi vs. remix

• Remix is a server-centric framework where loader and action run on the server, which imposes specific deployment requirements.
• Umi applies the loader and action mechanisms to both client and server sides. This allows pure CSR projects to achieve theoretical maximum request speeds and provides more flexibility for projects with strict compatibility requirements or large dependency sizes that might struggle with Remix's esbuild-based bundling.