How We Revamped the Koudou Frontend: Architecture, Performance & TypeScript Insights

What Is Koudou?

Koudou is JD.com’s zero‑budget employee internal‑purchase benefit platform that aggregates high‑quality JD.com products, discounts, and services for large enterprise employees, providing a convenient "cool" shopping experience.

Front‑End Architecture Refactor

To address outdated code, fragmented modules, and poor maintainability, the team adopted a module‑based directory structure using Vue 2, NutUI, TypeScript and the Gaea scaffolding. The new layout separates assets, components, configuration, services, store, views, utilities and core files, improving clarity and collaboration.

├── .bin                # webpack config
├── build               # build scripts
├── node_modules        # dependencies
├── package.json        # project metadata
├── src
│   ├── assets          # css, images
│   ├── component       # shared components
│   ├── config          # env config
│   ├── icons           # svg icons
│   ├── services        # HttpClient, API services
│   ├── store           # Vuex store
│   ├── view            # page components
│   ├── util            # utility functions
│   ├── app.vue         # root component
│   ├── app.ts          # entry file
│   ├── router.ts       # routing
│   └── index.html      # template
├── static              # static assets
├── README.md           # documentation
└── tsconfig.json       # TypeScript config

Performance Optimizations

Adopted SVG icons from NutUI to reduce font‑icon overhead.

Used postcss-plugin-px2rem for responsive rem conversion.

Implemented on‑demand component loading.

Enabled image lazy‑loading with NutUI’s Lazyload.

Integrated RSA two‑way encryption for secure data.

NutUI 2.x Component Library

The project upgraded from NutUI 1.x to 2.x, gaining a faster Webpack 4 build, smaller bundles, automatic polyfill handling, PWA support, CI integration and TypeScript typings, which streamlined development and improved cross‑device compatibility.

Gaea Scaffolding Automation

Gaea, the team’s custom Vue scaffolding, was enhanced with HappyPack for multi‑threaded builds, progress bars, cache loaders, bundle analysis, removal of uglifyjs-webpack-plugin, and environment‑aware API base URLs, allowing seamless switching between development, testing and production.

API Service Modularization

A unified HttpClient class was introduced to centralize request headers (including cookies) and error handling. TypeScript class‑based request parameters provide compile‑time validation, reducing bugs and improving developer experience.

class CartApiService {
  addCart(params: AddCartParams) {
    return this.httpClient.post('/api/xxx', params);
  }
}

class AddCartParams {
  num: number = 1; // quantity
  skuId: string = '';
}

JDUntify Tracking Module

All event IDs were enumerated in a PointType enum and wrapped in a JDUnify class. Developers now report events with this.$JDUnify.point(PointType.event_MyInfo), ensuring consistency and simplifying future additions.

enum PointType {
  event_MyInfo = "event_xxx_MyInfo",
  event_BacktoTop = "event_xxx_BacktoTop"
}

class JDUnify {
  point(eventId: PointType | string, eventInfo?: any) {
    try {
      const click = new MPing.inputs.Click(eventId);
      Object.assign(click, eventInfo);
      click.updateEventSeries();
      new MPing().send(click);
    } catch (e) {}
  }
}

Adoption of TypeScript

The team migrated the codebase to TypeScript, gaining static type checking, reduced comments, fewer runtime bugs, and better IDE support. Survey data showed TypeScript usage rising from 20.8% in 2016 to 46.7% in 2018, surpassing Vue downloads by 2020.

Decorators in Vue + TypeScript

Using vue‑property‑decorator, class‑based Vue components were created with decorators such as @Prop. The decorator translates TypeScript property definitions into Vue props configuration at compile time, enabling clean, type‑safe component APIs.

@Prop({ type: Boolean, default: false })
readonly value: boolean = false;

Conclusion

The three‑month 2020 refactor modernized Koudou’s front‑end stack, introduced TypeScript, improved performance, standardized API calls, and streamlined cross‑platform interactions, laying a solid foundation for future feature development and faster iteration.