This article provides a comprehensive, hands‑on tutorial for quickly creating a React component library using create‑react‑app, configuring TypeScript, ESLint, node‑sass, docz documentation, npm publishing, tree‑shaking, on‑demand loading, and deploying the generated docs to Netlify.
This article details the end‑to‑end process of designing, publishing, packaging, optimizing, and continuously delivering a reusable React component library at Ctrip, covering npm workflow, build tooling choices, CSS extraction, on‑demand loading, package splitting, collaborative documentation, CI/CD, and automated testing.
This article chronicles the rapid evolution of JD’s 福礼 employee‑benefits platform, detailing its Vue‑based frontend architecture, custom build tools, NutUI component library adoption, data‑collection strategies, multi‑device integration, development‑efficiency hacks, and collaborative processes that together drove a 265% YoY active‑user growth.
iQIYI’s mobile component library was built by first auditing 400+ pages to define design specs and business needs, then creating reusable “block‑card” components with a scalable granularity, a backend management platform, and a Sketch plugin, achieving 43% page coverage, 40% workflow efficiency gain and 25% UI consistency improvement while maintaining design flexibility.
This article explores the challenges of component maintenance in micro‑frontend architectures, compares different component types, and presents a practical CLI tool that automates scaffolding, testing, documentation, and publishing to streamline the creation of a reusable, well‑documented component library.
The article introduces magpie_fly, an open‑source Flutter component library created by 58.com to unify component management, provide detailed documentation with live previews and source code, outline its implementation approach, list existing widgets, and describe future plans for community contributions.
This article explains why a design system is essential for large‑scale mobile products, outlines the preparation steps, details how to create and organize components, and offers guidance on rolling out, maintaining, and avoiding common pitfalls to keep development efficient and collaborative.
This article shares the DevUI team's agile design practice, explaining how they transform Sketch designs into JSON data, automate asset versioning, and streamline collaboration between designers and developers to overcome scaling challenges and accelerate product innovation.
This case study outlines the 58 Mall project’s background, stage goals, encountered design problems, and the comprehensive strategy—including de‑visualization, card‑based UI, component libraries, templated product pages, low‑cost personalization, and modular design—that enabled rapid, scalable development for a multi‑business B2B platform.
In a closed-door Frontend Technology Exchange, YouZan and Meicai teams shared practices ranging from YouZan Retail’s cross-platform receipt printing and Electron-based desktop cashier client to Meicai’s ReactNative CRM architecture, RAD rapid project scaffolding, and open-source component library development, sparking cross-team insights and collaboration.
This guide highlights the ten most popular Taro material market resources, covering component libraries, skeleton screens, project scaffolds, list views, multi‑platform examples, and utility libraries to help developers accelerate cross‑platform app creation.
Beeshell 2.0, Meituan’s open‑source React Native component library, adds 38 functions across 33 components and 5 tools, employs a four‑layer architecture with a customizable hierarchy of theme variables to render props, ensures UI consistency via a shared design system, achieves over 80 % test coverage, and plans to grow to 100 + components while welcoming community contributions.
Chameleon (CML) 1.0, Didi’s open‑source enterprise‑grade cross‑platform framework, now supports all major mini‑programs, H5 and native clients, offers a richer Vue‑like DSL, extensive component libraries, significant bundle size reduction, and tooling integrations, enabling developers to consolidate codebases and streamline multi‑platform development.
This article explains how to structure a Vue component library using a mono‑repo approach, set up the project with @vue/cli, manage component creation, demo examples, build and publish scripts, enforce code formatting with ESLint, and handle versioning and changelogs with Lerna.
This article details the background, challenges, and step‑by‑step solution for standardizing UI across Youzan Retail’s iOS and Android apps, covering designer and developer perspectives, the creation of a shared style library, component architecture, resource management, delivery outcomes, pitfalls, and future automation plans.
This article explores the development of NutUI 2.0, a Vue component library, detailing why Webpack was chosen over Rollup, how to configure UMD builds, manage external Vue dependencies, and leverage tree‑shaking to reduce bundle size.
This article shares a step‑by‑step case study of how a small team transformed the Goapi QA testing tool’s user experience by deeply understanding the product, aligning design rhythm with team workflow, fostering cross‑functional collaboration, and building a reusable component library.
Beeshell is an open‑source React Native component library offering a comprehensive, customizable set of JavaScript and native UI components for iOS, Android, and web, featuring layered architecture, extensive documentation, testing, and a roadmap to expand beyond 100 components.
This article shares the practical experience of creating a Vue 2 mobile UI component library, covering the choice of scaffolding tools, Webpack UMD packaging configuration, component classification, CSS scoping decisions, on‑demand custom builds, and the adoption of SVG‑based icon solutions.
The article details how Youzan’s frontend team created the Zent React component library—defining a unified design philosophy, strict code standards, a CLI‑driven workflow, Jest/Enzyme testing, and disciplined maintenance practices—to replace duplicated code, support diverse business needs, and foster open‑source collaboration.
Vant 1.0, the open‑source mobile Vue component library maintained by Youzan, delivers ultra‑light components averaging 8.8KB, embraces a lightweight, fast‑iteration, and ecosystem‑centric philosophy, and showcases impressive community contributions and tooling support for modern front‑end development.
This article explains how to design standardized, maintainable backend system prototypes using Axure, covering framework layout, dynamic panel setup, responsive functions, multi‑level menus, component libraries, and practical tips for efficient UI design and reuse across projects.
The article reviews Liulishuo's 2016 engineering experiments, covering their base library choices, componentization for consumer apps and internal tools, mock data generation, unit testing, error monitoring with Sentry, deployment using shipit‑deploy, and outlines goals for improving performance, testing coverage, and robustness in the coming year.
WeUI, the official WeChat design team's component library, offers a collection of native‑look UI elements such as buttons, cells, dialogs, and icons; by integrating its CSS and copying demo markup, developers can quickly create mobile‑friendly web pages that match WeChat’s visual experience without extensive design work.
An in‑depth overview of KISSY, Alibaba’s home‑grown front‑end framework, covering its origins, architectural layers, modular system, component library, tooling, mobile support, testing, CI, and real‑world deployment examples such as shop and product detail pages, highlighting strengths and current challenges.
