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

What is JD VSP

JD VSP (VSP) is an enterprise‑level procurement platform that provides standardized or customized procurement management services for large‑scale customers, aiming to improve internal purchasing collaboration efficiency.

Reasons for the Redesign

Since 2015 the VSP PC interface has not changed, leading to outdated visuals, complex interactions, and an architecture that can no longer support rapid business growth. User feedback and data analysis showed deficiencies from login to order placement, prompting a full‑scale experience upgrade.

Technical Selection

Two main aspects were considered: foundational architecture and performance optimization.

Foundation Architecture

Gaea Scaffolding Automated Build

Gaea is a Vue‑based single‑page application scaffolding built on Node.js and Webpack, offering a complete development, debugging, and build workflow with significantly improved speed and performance.

Legao Component Library

The Legao UI component library, aligned with JD’s design system, supports multiple tech stacks (jQuery, Vue, React) and provides both basic and business components for rapid development.

Component Usage Statistics

Out of 43 available components, 29 are used in the project, achieving a 67% coverage rate. The library greatly improves development efficiency, though early‑stage bugs and missing features require active feedback and iteration.

Component Improvement Feedback

Report issues directly to component developers.

Aggregate feedback to the component team via project leads.

Specific Component Issues

Various bugs were encountered during early adoption, highlighting the need for continuous testing and refinement.

Project Progress and Component Library Maturation

To keep the project on schedule while improving the component library, a three‑stage iteration plan was executed, balancing feature delivery with library enhancements.

TS Standards Project Code

TypeScript was introduced to provide static type checking, improve IDE assistance, and catch errors at compile time, while still preserving JavaScript flexibility.

Declaration and Declaration Merging

TS supports namespaces, type declarations, and value declarations. Declaration merging allows multiple same‑named declarations to combine, enabling powerful type reuse and overload handling.

Type vs Interface Differences

Both can describe object shapes, but type can define primitive, union, and tuple aliases, while interface supports declaration merging and can be extended in class implementations.

Vue Multi‑Level Component Communication

Beyond Vuex for global state, a dedicated Vue instance ( this.$public) is created to emit and listen to events across deeply nested components, ensuring reliable data propagation.

Singleton Pattern for Shared Data

A singleton Search class is attached to Vue.prototype.$search, allowing all pages to share search parameters and callbacks through a centralized object.

Page Load Performance Improvements

Image Handling Evolution

Traditional <img> tags cause many HTTP requests. Sprite sheets reduce request count but increase maintenance complexity. Icon fonts offer scalable, color‑changeable icons with minimal requests.

Icon Font Advantages and Drawbacks

Icon fonts reduce HTTP requests, scale without loss of clarity, and are easy to style, though they support only single‑color icons and require careful design.

Offline Caching and Immersive Experience

Progressive Web App (PWA) techniques, especially Service Workers, cache static resources to improve load speed and enable offline usage.

Service Worker Core Logic

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(res => {
      if (res) { return res; }
      return fetch(event.request);
    })
  );
});

After enabling Service Worker, static assets are served from cache, dramatically improving performance.

ESLint Code Formatting and Automatic Detection

ESLint enforces coding standards and can automatically fix issues with the --fix flag. Configuration hierarchy includes .eslintrc.js, .eslintrc.json, and package.json. Example script:

{
  "scripts": {
    "lint": "eslint --format codeframe --fix --ext .ts,.vue src"
  }
}

Various output formats (e.g., codeframe, stylish, json) are available.

Conclusion

After more than three months of iterative upgrades, the VSP PC project has achieved significant UI, performance, and development workflow improvements, while continuing to evolve toward an even better user experience.