UmiJS: the Shaolin of web frameworks

I stumbled upon UmiJS accidentally when reading about Mako — a Vite analog built with Rust (of course) which I'm very interested in. When I started to dig, I had fallen into a whole treasure trove which I wanted to share with other people who hadn't heard anything about the Umi ecosystem. Maybe it's just me living under a stone, so feel free to skip it if you're already a UmiJS kung fu master. Otherwise, welcome to the ride.

(And just in case someone may consider this journey somewhat derogatory in terms of China and its culture — it's not. I'm a big fan of everything related to this part of the world, and the Shaolin and kung fu reference is not arbitrary — I am myself a certified oriental martial arts instructor, and this philosophy is not an empty phrase for me.)

Table of Contents

• Why Umi
• What is Umi
• Tooling ecosystem
• People behind
• Project example
  • Prerequisites
  • Project scaffolding
  • Project structure
  • Running the app
  • Working with Umi CLI
  • Build and deploy
• My opinionated impressions
• Conclusions

Why Umi

I have a soft spot for metaframeworks, you know. So I eagerly dig into info related to any metaframework projects and tools. There's no shortage of that these days, of course — the landscape is versatile. But some projects are quite esoteric and hidden from external eyes — either because of geographical and cultural reasons, or because of language barriers. Here it is both. UmiJS and tools around that are developed predominantly by the Chinese community of commercial and non-commercial open-source contributors. However, as with many Chinese technological innovations (looking at you DeepSeek), this one sparks curiosity because of how rich and self-sufficient the ecosystem is. So armed with this curiosity and intrigued by the original GitHub source code findings, I had decided to explore it further. Consider it a kind of "Umi for React/Vue/Angular/Svelte developers" research, often resting on the corresponding habitual analogies.

What is Umi

UmiJS is an [extremely] pluggable enterprise-scale React-based web application [meta]framework, offering (as many analogs) routing, build tools, dedicated design system, and everything in between. From what I could see during my reconnaissance, its main market is huge enterprise monorepos for React websites and web applications (something very opposite to tools like, for instance Waku, if you will). Umi itself is not exactly a metaframework though, as I'd say, but rather something React would be if it aimed to resemble Angular as of version 19 — the powerful SPA framework with optional support for SSR/SSG and a whole lot of build options making it very customizable and approachable for performance optimizations specific to each particular use case. Its plugins-driven extensibility is something resembling Vite but for a more dedicated goal of building rich user interfaces. And there's more.

Tooling ecosystem

In addition to the framework itself, the developers behind UmiJS maintain and connect the dots for a whole huge ecosystem of very clever tools and technologies, some of which have gained popularity even behind the Great Wall of China:

• Mako. A bundler and web server — a kind of Vite for the UmiJS web apps. It's a fresh development among other tools (as far as I understand, the team used mostly Webpack and Vite before this in-house tool got up to speed). Built with Rust and declared to be even faster than other Rust-based analogs, not to mention the lame tools like Webpack and such (just kidding, I ❤️ Webpack forever!).
• Dumi. A static site generator specifically designed for component library development. Look at it as something between Storybook and Docusaurus inside the Umi world (but much better integrated between each other, presumably).
• Ant Design. A top-level UI component library that provides a set of high-quality React components. Quite popular even outside of the Umi toolset and can be used independently, but integrated beautifully with Umi — to the extent I had a hard time figuring out where to find the actual components (see below, in the project section).
• Father. A tool designed specifically for building libraries. Used widely by all other tools and from the first look it's hard to find any analog in the world I got used to. Very often dev teams develop some custom approaches for that, but here it's a good set of best practices combined into a decently looking (and functioning) craftsman's hammer.
• Qiankun. An implementation of micro frontends for easier and painless building of production-ready microfront-end architecture system.
• Dva. A plugin-based state management solution (Redux + Sagas). Also quite popular in narrow communities outside of the Umi world.
• CLI. An interesting DX booster for Umi I'll talk about in detail a bit later.

Moreover, with Umi you get a strong plugin system, some of which are included by default with each project scaffolded with Umi CLI. These plugin provide, for instance, capable site analytics, rich charts, robust data storage presets, internatiolization and localization capabilities, and many other enticing (though obscure still, until you try them) things.

There's also something even more huge than Umi itself: the misterious "Bigfish" project (don't search for meaningful resources links, at least if you're not fluent mandarin speaker) — an enterprise-grade wrapper around UmiJS, designed to enhance the capabilities of the framework with additional predefined and finetuned configurations and plugins. It serves as an internal framework for Ant Group, owning the world's largest mobile payments platform Alipay (and if there's something requiring more security and complexity than fintech, I definitely have no idea about it).

Not surprisingly, the Umi organisation on GitHub even has a repository for some AI tool which, I'd assume, will be analogous to Vercel's AI SDK.

People behind

The father of UmiJS and many other tools I mentioned is Chen Cheng, the person leading the Ant Group's front-end work. They're a very productive and insightful person and open-source enthusiast, to the point of curating one of the most popular JS awesome lists — Awesome JavaScript. I would follow their blog or anything willingly but looks like everything they write is behind some esoteric type of a popular Chinese paywall service so I had left my attempts. Their and their team's repositories are quite popular, especially among the Chinese audience (which is fair).

Doesn't all that mean that there is no smoke without fire? Would be too stupid not to check it.

Project example

So I have decided to play with UmiJS CLI and generate a project with a maximum staffed setup to take a look how the results look and feel like. There will be some short tutorial-like guidings and impressions shared, but to dig deeper you can explore the official docs (in English