BestHub
Sign in
Tagged articles

component library

127 articles · Page 2 of 2
vivo Internet Technology
vivo Internet Technology
Sep 2, 2020 · Frontend Development

vivo Mall Frontend Architecture Upgrade: A Layered Architecture Exploration

Vivo Mall transformed its Java‑centric frontend into a layered Vue‑Node architecture, separating frontend and backend, unifying multiple platforms with BFF and SSR, building a shared UI library, adopting extreme modularization, and enforcing coding standards and quality tools to double development efficiency and improve scalability.

BFFFrontend ArchitectureNode.js
0 likes · 17 min read
vivo Mall Frontend Architecture Upgrade: A Layered Architecture Exploration
JD.com Experience Design Center
JD.com Experience Design Center
Aug 19, 2020 · Frontend Development

Revamping JD VSP: From Legacy PC UI to Modern Vue & TypeScript Architecture

This article details the comprehensive redesign of JD VSP's PC platform, covering the motivations for the overhaul, the adoption of Vue, TypeScript, Gaea scaffolding, Legao component library, performance enhancements with icon fonts and PWA caching, and the implementation of robust development tooling such as ESLint and code‑generation workflows.

ESLintPWATypeScript
0 likes · 26 min read
Revamping JD VSP: From Legacy PC UI to Modern Vue & TypeScript Architecture
JD Tech Talk
JD Tech Talk
Aug 19, 2020 · Frontend Development

Step‑by‑Step Guide to Building and Publishing a React Component Library with Create‑React‑App, Docz, and Netlify

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.

DoczNetlifyReAct
0 likes · 20 min read
Step‑by‑Step Guide to Building and Publishing a React Component Library with Create‑React‑App, Docz, and Netlify
Ctrip Technology
Ctrip Technology
Aug 6, 2020 · Frontend Development

Building and Maintaining a Sustainable Frontend Component Library with React

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.

AutomationCI/CDPackaging
0 likes · 14 min read
Building and Maintaining a Sustainable Frontend Component Library with React
JD.com Experience Design Center
JD.com Experience Design Center
Jul 31, 2020 · Frontend Development

Scaling JD’s 福礼 Platform: Frontend Architecture, Component Library & Cross‑Platform Lessons

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.

Cross‑Platform IntegrationData CollectionFrontend Architecture
0 likes · 24 min read
Scaling JD’s 福礼 Platform: Frontend Architecture, Component Library & Cross‑Platform Lessons
iQIYI Technical Product Team
iQIYI Technical Product Team
May 22, 2020 · Mobile Development

Building a Mobile Component Library: Practices and Lessons from iQIYI

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.

Mobile UIbest practicescomponent library
0 likes · 12 min read
Building a Mobile Component Library: Practices and Lessons from iQIYI
Alibaba Cloud Developer
Alibaba Cloud Developer
Apr 24, 2020 · Frontend Development

How to Build and Maintain a Scalable Component Library for Micro‑Frontend Projects

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.

AutomationCLIDocumentation
0 likes · 17 min read
How to Build and Maintain a Scalable Component Library for Micro‑Frontend Projects
58 Tech
58 Tech
Apr 22, 2020 · Mobile Development

magpie_fly: An Open‑Source Flutter Component Library for Unified UI Development

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.

DocumentationUI frameworkcomponent library
0 likes · 10 min read
magpie_fly: An Open‑Source Flutter Component Library for Unified UI Development
58UXD
58UXD
Mar 30, 2020 · Fundamentals

How to Build a High‑Quality Design System for a Growing Mobile App

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.

Design GuidelinesUI/UXcollaboration
0 likes · 8 min read
How to Build a High‑Quality Design System for a Growing Mobile App
Huawei Cloud Developer Alliance
Huawei Cloud Developer Alliance
Mar 13, 2020 · Frontend Development

How DevUI Boosts Design Efficiency with JSON‑Driven UI Assets

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.

Design CollaborationJSON UI assetsagile design
0 likes · 10 min read
How DevUI Boosts Design Efficiency with JSON‑Driven UI Assets
58UXD
58UXD
Mar 11, 2020 · Product Management

How 58 Mall’s Design Strategy Overcame Scaling Challenges

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.

B2B e-commerceModular DesignUI/UX
0 likes · 9 min read
How 58 Mall’s Design Strategy Overcame Scaling Challenges
Youzan Coder
Youzan Coder
Jan 20, 2020 · Frontend Development

Frontend Technology Exchange Meeting: YouZan and Meicai Share Development Practices

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.

Desktop applicationElectronPrint Service
0 likes · 6 min read
Frontend Technology Exchange Meeting: YouZan and Meicai Share Development Practices
Aotu Lab
Aotu Lab
Dec 4, 2019 · Frontend Development

Top 10 Must‑Try Taro Materials for Faster Multi‑Platform Development

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.

Open SourceTaROcomponent library
0 likes · 6 min read
Top 10 Must‑Try Taro Materials for Faster Multi‑Platform Development
Meituan Technology Team
Meituan Technology Team
Sep 26, 2019 · Mobile Development

Beeshell 2.0: Design, Architecture, and Customization of a React Native Component Library

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.

Beeshellarchitecturecomponent library
0 likes · 27 min read
Beeshell 2.0: Design, Architecture, and Customization of a React Native Component Library
Didi Tech
Didi Tech
Sep 13, 2019 · Frontend Development

Chameleon (CML) 1.0 Release: An Enterprise‑Grade Cross‑Platform Framework

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.

MVVMMini-ProgramOpen Source
0 likes · 19 min read
Chameleon (CML) 1.0 Release: An Enterprise‑Grade Cross‑Platform Framework
Sohu Tech Products
Sohu Tech Products
Sep 4, 2019 · Frontend Development

Organizing a Vue Component Library with Mono‑repo, Scripts, and Lerna

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.

CLILernabuild-scripts
0 likes · 13 min read
Organizing a Vue Component Library with Mono‑repo, Scripts, and Lerna
Youzan Coder
Youzan Coder
Jul 19, 2019 · User Experience Design

How UI Standardization Transformed Youzan Retail’s Mobile Apps

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.

AndroidSketchStandardization
0 likes · 17 min read
How UI Standardization Transformed Youzan Retail’s Mobile Apps
网易UEDC
网易UEDC
Oct 30, 2018 · Product Management

How to Rapidly Elevate a QA Tool’s UX: Lessons from the Goapi Redesign

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.

Product RedesignTeam Collaborationcomponent library
0 likes · 11 min read
How to Rapidly Elevate a QA Tool’s UX: Lessons from the Goapi Redesign
Meituan Technology Team
Meituan Technology Team
Sep 27, 2018 · Mobile Development

Beeshell: An Open-Source React Native Component Library for Mobile Apps

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.

component librarycross‑platformmobile development
0 likes · 25 min read
Beeshell: An Open-Source React Native Component Library for Mobile Apps
Youzan Coder
Youzan Coder
Mar 23, 2018 · Frontend Development

Building an Excellent React Component Library: Design, Development, Testing, and Maintenance (Zent Case Study)

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.

ReActUI designZent
0 likes · 10 min read
Building an Excellent React Component Library: Design, Development, Testing, and Maintenance (Zent Case Study)
Youzan Coder
Youzan Coder
Mar 21, 2018 · Frontend Development

Why Vant 1.0 Redefines Lightweight Mobile Vue Components

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.

FrontendMobile UIOpen Source
0 likes · 6 min read
Why Vant 1.0 Redefines Lightweight Mobile Vue Components
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Oct 18, 2017 · Backend Development

How to Build Maintainable Backend System Prototypes with Axure

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.

AxureBackend PrototypeDynamic Panels
0 likes · 23 min read
How to Build Maintainable Backend System Prototypes with Axure
Liulishuo Tech Team
Liulishuo Tech Team
Jan 24, 2017 · Frontend Development

Engineering Practices and Tooling for Frontend Development at Liulishuo (2016‑2017)

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.

component librarydeploymenterror monitoring
0 likes · 10 min read
Engineering Practices and Tooling for Frontend Development at Liulishuo (2016‑2017)
We-Design
We-Design
Dec 15, 2015 · Mobile Development

Build WeChat‑Style Mobile Web Interfaces in Minutes with WeUI

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.

WeChatWeUIcomponent library
0 likes · 4 min read
Build WeChat‑Style Mobile Web Interfaces in Minutes with WeUI
21CTO
21CTO
Dec 11, 2015 · Frontend Development

Why KISSY Became Alibaba’s Front‑End Powerhouse: Architecture & Real‑World Use

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.

KISSYcomponent librarycontinuous integration
0 likes · 22 min read
Why KISSY Became Alibaba’s Front‑End Powerhouse: Architecture & Real‑World Use