This article explores Umi's useModel lightweight state management solution, covering basic usage, performance optimizations with selectors, custom hooks, Babel plugin automation, and an in‑depth source code analysis, while also discussing its drawbacks and practical considerations for frontend projects.
This article explains the architecture and key features of ZhiZhu's customer service workbench, covering the overall system, the iframe‑based IM communication, multi‑tab third‑screen design, conversation caching with LRU, and full‑event tracking implementation using React, Umi and Ant Design.
This article explains the micro‑frontend pattern, introduces the MicroApp framework, outlines when to adopt micro‑frontends, compares existing solutions, and provides a step‑by‑step guide for building a React‑based micro‑frontend base with code examples, cross‑origin handling, proxy configuration, and data communication.
Umi, an extensible enterprise‑grade frontend framework from Ant Group, offers out‑of‑the‑box routing, plugin lifecycle, dual build engines, and best‑practice integrations, with detailed quick‑start instructions and a chart example that demonstrate its capability to serve thousands of diverse applications.
The article explains plugin systems by likening them to interchangeable vacuum‑cleaner heads, outlines their benefits, defines core‑and‑plugin architecture, describes four plugin styles with code examples, and demonstrates building a minimal front‑end calculator plugin framework that emphasizes a stable core and extensible modules.
The article outlines how an enterprise back‑office monolith can be progressively migrated to a Qiankun‑based micro‑frontend architecture—allowing independent Vue, React, Angular or legacy apps, shared SDKs, route isolation, keep‑alive state, and sandboxed styling—resulting in over 90 % legacy integration, a unified React stack for new features, and significantly improved development efficiency and ROI.
Umi 4 is now available on npm and brings a host of new capabilities—including dual Vite/Webpack builds, faster default compilation with MFSU V3, Umi Max for enterprise back‑office, React Router 6, Vue support, automatic HTTPS, build progress UI, terminal logging, plugin APIs, dead‑code detection, and a lightweight UI—while outlining future roadmap items such as MFSU V4, Father 4, dumi 2, and bundless ESMi solutions.
This article explains how to design a unified permission system's frontend SDK, detailing its core APIs, integration methods for standard React and Umi projects, dynamic route generation, and menu/button level permission controls, accompanied by practical code examples.
An inspiring journey traces a developer’s evolution from a rigorous university computer club to leading frontend tooling at Ant Financial, detailing challenges, early adoption of AngularJS, Vue.js, hybrid apps, the creation of father‑doc (later dumi), and the broader impact on component ecosystems and design engineering.
This article explains how Umi 4 redesigns its ESLint setup to reduce rule overload, eliminate unstable dependencies, make configurations transparent, and boost linting performance by removing type‑aware checks, offering a stable, fast, and maintainable linting solution for frontend projects.
This article explains how Umi 4 accelerates the build phase by replacing traditional terser and cssnano compressors with esbuild, details configuration for JS and CSS minifiers, describes dependency compilation optimizations, and introduces remote caching to further reduce build times.
At SEE Conf 2022, Ant Group’s frontend lead Yun Qian detailed Umi’s evolution, covering its compilation-time architecture, dependency pre‑bundling, multi‑build engine, performance optimizations like MFSU, and the balance between community openness and internal constraints, offering practical lessons for modern frontend development.
This article presents a comprehensive micro‑frontend solution using Qiankun to migrate legacy jQuery/JSP modules, decouple a monolithic front‑end, enable independent development, deployment and scaling, and details the architecture, lifecycle, integration steps for React, UMI, Vue, Angular sub‑applications, as well as deployment, monitoring and permission strategies.
This article explains how to automatically enable CSS Modules in React applications by creating a Babel plugin that adds a query parameter to CSS imports and configuring webpack loaders to recognize the parameter, providing a concise and practical solution for scoped styling.
This article analyzes common source‑code management patterns for numerous small projects, identifies their drawbacks, and proposes a hybrid solution that combines a single‑git repository with git‑submodule based sub‑projects, automated shell scripts, and Umi‑based tooling to achieve unified yet isolated development and deployment.
The article summarizes Chen Cheng's 2019 InfoQ talk on Ant Financial's frontend framework evolution—from early Sea.JS and Arale to Umi and Bigfish—detailing the merged architecture, plugin system, asset market, micro‑frontend strategy, routing, performance optimizations, testing, monitoring, and future plans.
