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

Preface

Since its launch in April 2018, the 福礼 project has grown rapidly through fast iteration and feature expansion, achieving a 265% month‑over‑month active‑user increase in 2019 and serving over 3,500 enterprises with more than 6 million personalized benefit deliveries.

From a single activity mode and points‑only payment to six activity modes, mixed/amount/one‑time payments, and embedding in WeChat mini‑programs and native apps, the project continuously refines its functional system to better serve customers.

What Is 福礼

福礼 is JD’s employee‑benefits marketplace for premium corporate clients, focusing on holiday gifts and quarterly labor‑protection exchanges. It aims to improve benefit perception, reduce distribution costs, and provide a one‑stop solution with JD‑branded authentic products, exclusive discounts, and fast logistics.

Frontend Architecture

The project has used the Vue stack since its inception, leveraging a self‑developed Gaea build tool and the NutUI component library, along with Carefree, SMock, and Vuex.

Gaea Build Tool is a Vue‑centric scaffolding solution built on Node.js and Webpack that streamlines development, debugging, and production packaging, and is now used across all Vue projects in the team.

NutUI Component Library is a lightweight, JD‑styled mobile Vue component suite. Over two years of iteration, it has earned 2 k+ GitHub stars, 236 forks, and more than 14.5 k NPM downloads, providing reusable base components that accelerate development.

Carefree offers a one‑stop mobile web real‑device testing solution that eliminates the need for Wi‑Fi hotspots, allowing developers to test on real devices freely.

SMock generates mock data and a mock server for early‑stage development, improving front‑end efficiency and supporting cross‑origin requests.

Better 福礼 – Component Library Benefits

“A trustworthy component library makes development multiply its effectiveness.”

Since adopting NutUI, the project has moved from selective 1.x components to broad 2.x usage. NutUI’s strong community support and continuous upgrades have earned the team’s trust.

Key advantages include:

Business Components : NutUI abstracts common business logic into reusable components, such as an address selector that handles custom and existing addresses, icons, and toggling, reducing repetitive code.

High E‑commerce Coverage : NutUI covers essential e‑commerce UI patterns better than MintUI and VantUI. Feature support comparison:

Feature            | MintUI | VantUI | NutUI
-------------------|--------|--------|------
Pull‑to‑refresh    | o      | ×      | o
Dialog            | o      | o      | o
Swiper            | o      | o      | o
Tab               | o      | o      | o
Toast             | o      | o      | o
Back‑to‑top       | ×      | ×      | o
Swipe‑delete      | ×      | o      | o
Upload            | ×      | o      | o
Popup             | o      | o      | o
Stepper           | ×      | o      | o
Lazy‑load image   | o      | ×      | o
Timeline          | ×      | o      | o
Search bar        | o      | o      | o
Price tag         | ×      | ×      | o
Badge             | o      | ×      | o

NutUI’s unified JD design language ensures consistent styles and logical interactions, with theme customization for diverse visual needs.

Data Collection – “子午线” Service

To better understand users, the team integrated JD’s proprietary data‑collection service “子午线” for interaction tracking.

1. Dynamic PV Injection – Instead of hard‑coding PV scripts, the code now injects them after login, clearing previous scripts when activity data changes. this.$JDUnify.JDPV(data.data); 2. Unified Point Method – A class manages both PV and click tracking, sharing common data via this.obj. Example snippet:

point(eventId, eventInfo) {
  if (JSON.stringify(this.obj) == "{}") return;
  // encrypt special fields
  const xxx = MD5(xxx + "");
  try {
    let click = new MPing.inputs.Click(eventId);
    click.xxx = this.obj.xxx;
    if (eventInfo) click = Object.assign(click, eventInfo);
    click.updateEventSeries();
    new MPing().send(click);
  } catch (e) {}
}

The overall class structure:

class JDUnify {
  constructor() { this.obj = {}; }
  point(eventId, eventInfo) { /* as above */ }
  content(html) { /* dynamic script insertion */ }
  JDPV(obj) { /* PV handling */ }
}
export default { install(vm) { vm.prototype.$JDUnify = new JDUnify(); } };

Multi‑End Integration

福礼, originally an H5 project, supports embedding in WeChat mini‑programs and native apps.

WeChat Mini‑Program uses the native <web-view src="{{url}}"></web-view> component. Parameters are appended to the URL and retrieved on the H5 side.

Communication from H5 to mini‑program uses

wx.miniProgram.reLaunch({ url: `/pages/xxx?url=${encodeURIComponent(url)}` })

.

Native App Embedding relies on a custom JS API via postMessage. The H5 page detects the user‑agent ( fuli/android or fuli/ios) and calls the appropriate bridge:

if (navigator.userAgent.indexOf('fuli/android') !== -1) {
  window.callApp.postMessage(jsonStr);
} else if (navigator.userAgent.indexOf('fuli/ios') !== -1) {
  window.webkit.messageHandlers.callApp.postMessage(jsonStr);
}

Additional methods such as setTitle, newWebView, closeWebView, and openLogin are exposed via the same class.

Development Efficiency

Real‑device testing posed two main issues: unstable hotspot connections and varying HTTPS certificates. The team moved the proxy to a dedicated server, allowing phones to connect to a fixed port with a single certificate.

However, some Android apps after Android 6.0 ignore user‑installed certificates, making proxy‑based testing impossible. The solution shifted to publishing test builds on JD’s object storage, letting devices fetch resources directly via IP‑based URLs.

To mitigate caching problems during frequent test releases, the build process injects a buildTime variable and displays it via a toast in non‑production environments:

new webpack.DefinePlugin({ 'process.env': { buildTime: JSON.stringify(new Date().toString()) } })

if (!config.isPrd) {
  this.$toast.text(`Current version: Pre‑release – ${config.buildTime}`, { duration: 3000 });
}

Collaboration Optimization

The team standardized Git commit messages using prefixes like feat, fix, docs, style, refactor, test, and chore. For urgent work, git stash xxx preserves unfinished changes across branches.

Code formatting is enforced with vscode + vetur + prettier + eslint, configuring Vetur to use prettier‑eslint as the JavaScript formatter. A global npm script "prettier:fix": "prettier --write src/**/*.{js,vue,scss}" formats the entire codebase.

Process & Retrospective

A timeline‑based development workflow aligns multiple departments, and post‑release retrospectives capture lessons, improving coordination for future features.

Key takeaways include handling real‑device testing difficulties, defining native‑app embedding standards, and solving cross‑origin issues in test environments.

Conclusion

Over two years, 福礼 added more than 30 functional modules and achieved a 265% YoY active‑user increase. Continuous upgrades remain essential; the front‑end team will keep enhancing user experience, development efficiency, and process optimization to drive further growth.