Redesigning JD.com Homepage: Architecture, Performance, and Frontend Engineering with Nerv and Athena

Four months after the 2017 JD.com homepage overhaul, the team faced continuous maintenance and the urge to modernize a legacy stack built on jQuery and SeaJS . Because these libraries were outdated and incompatible with modern Virtual DOM solutions, the team adopted the internal Nerv project as the new core framework.

Why not React/Preact/Vue? Although popular, they could not support IE8, which still held significant traffic. Nerv offered React‑compatible syntax, excellent performance, and a gzipped size of only 9 KB, making it a suitable replacement.

Overall Architecture

The upgraded architecture is built on the proven Athena front‑end engineering system, which now includes:

Athena 2.0: a webpack‑based toolchain with npm dependency management and the latest ES features.

Athena management platform providing project templates for Nerv and H5 projects.

Athena base library and component library rebuilt from jQuery + SeaJS to native Nerv components.

Athena mock interface with automatic API documentation generation.

Athena fallback interface that periodically captures live API data for fallback generation and validation.

Athena front‑end monitoring that alerts developers in real time when asset size, request failures, or other anomalies exceed thresholds.

Athena visual reporting for intuitive data dashboards.

Development Mode

Athena 1.0 relied on vinyl‑fs streams similar to Gulp. In 2017, webpack became the industry standard, so Athena was upgraded to 2.0, enabling npm‑based dependency management, ES6+ syntax, and commands such as init , serve , build , and publish . The recommended project structure is illustrated in the original diagram.

Front‑back separation is maintained: the back‑end supplies JSON data, the front‑end fetches it in componentDidMount , stores it in state , and renders via render . Example component code is shown below:

import Nerv from 'nervjs'
class MyComponent extends Nerv.Component {
  constructor() {
    super(...arguments)
    this.state = { xxx: 'xxx' }
  }
  async requestData() {
    // return await fetch('xxx').then(res => res.json())
  }
  componentDidMount() {
    this.requestData()
      .then(data => { this.setState({ xxx: 'yyy' }) })
      .catch(() => { this.setState({ xxx: 'zzz' }) })
  }
  render() {
    return (
{this.state.xxx}
)
  }
}
export default MyComponent

Code Style Enforcement

To avoid the chaos of 1,000 developers writing 1,000 styles, the team introduced ESLint + Husky checks on every commit, enforcing rules such as prefer‑const , indentation, and no variable redeclaration. These rules are baked into the Athena project templates, gradually becoming a habit for all contributors.

Performance Optimizations

First‑Screen Rendering – Directly outputting critical DOM reduces load time. However, Nerv cannot manipulate external DOM nodes efficiently, so a server‑side rendering (SSR) layer ( Nerv‑server ) is planned. In the meantime, the team replaces the raw DOM with a Nerv component after data collection.

Code Splitting – Instead of bundling everything, dynamic imports are used:

import(/* webpackChunkName: ${chunkName} */ '${chunkName}')
  .then(loaded => { /* handle module */ })

This extracts lazy‑loaded components from the main bundle, reducing its size. The article also demonstrates using react‑loadable for component‑level lazy loading with loading, timeout, and error states.

Legacy Module Loading – To avoid pulling SeaJS into the main bundle, a separate legacy module is dynamically imported only when needed:

import('../legacy')
  .then(({ SeaJS }) => {
    SeaJS.use('xxx', function (XXX) { /* XXX.init(); */ })
  })

Webpack DLL Optimization – Frequently unchanged libraries (e.g., Nervjs , es5‑polyfill ) are built into a DLL using webpack.DllPlugin and referenced via DllReferencePlugin , preventing cache invalidation on each build.

Experience Optimizations

IE8 Compatibility – A lightweight es5‑polyfill provides missing APIs (e.g., Array.prototype , addEventListener ) only for IE8, injected via conditional comments generated by HTMLWebpackPlugin .

SVG Sprite – An svgSprite component defines reusable symbols, which can be dynamically loaded and used with <svg><use xlink:href='#icon'/></svg> syntax.

Data Dashboard – A real‑time operations dashboard (SEE) built with Nerv + Redux and ECharts visualizes performance metrics such as page load time, API success rate, and JS error count.

Reliability and Monitoring

To eliminate environment differences, the build process is moved to a server‑side CI platform, ensuring consistent toolchains and enabling diff‑based code reviews and fast rollbacks.

Automated end‑to‑end tests are driven by selenium‑webdriver ActionChains, with retry logic to suppress flaky alerts.

Asset monitoring checks image size and dimensions against predefined thresholds, alerting via the Athena monitoring platform.

Real‑time alerts are pushed to WeChat after aggregating metrics like screen‑resolution distribution, browser share, load time, and interface success rate.

Future Directions

Plans include full server‑side rendering with Nerv for better first‑paint performance, and adopting TypeScript for static type checking to reduce runtime errors and improve maintainability.

Conclusion

The article provides a concise overview of the JD.com homepage’s overall architecture, performance and experience optimizations, and the safeguards put in place to maintain page stability, illustrating the practical engineering decisions made during the project.