0 views collected around this technical thread.
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.
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.
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.
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.