Hermes Project: Front‑End Architecture, Modularization, Componentization, Automation and Performance Optimization at Meituan‑Dianping

As front‑end projects grow in size and team composition, ensuring a high developer experience, maintainable codebase, and excellent user experience becomes a major challenge.

Since June 2016, Meituan‑Dianping’s overseas vacation front‑end team launched the "Hermes" project for C‑end users, focusing on four key areas:

Front‑back separation: independent development, testing and deployment pipelines for the front‑end.

Modularization and componentization: reusable UI components and business logic.

Process automation: reducing manual work, guaranteeing quality and optimizing resources.

Page‑load performance optimization: monitoring, resource loading optimization and offline strategies.

Front‑Back Separation

Previously, pages were assembled on the Java back‑end using FTL templates, with the front‑end maintaining separate CSS/JS assets. This caused tight coupling, communication overhead, and required front‑end developers to install back‑end environments.

In Hermes, the entire page assembly is moved to the front‑end; the back‑end only provides AJAX APIs. Pages are fully static and deployed to CDN via CI.

Modularization

With the adoption of ES6 modules, front‑end development gains better code organization, dependency management, and optimization techniques such as bundling, code splitting, tree shaking and scope hoisting.

Componentization

Componentization addresses reusable UI elements (buttons, dialogs, carousels). The team chose Vue.js as the base because of its small bundle size (~19 kB gzipped), declarative templates, reactive state tracking, clear lifecycle hooks, comprehensive tooling (webpack loader, devtools, vue‑cli) and good runtime performance.

Using Vue’s single‑file components, the team built a mobile‑focused component library dora‑ui containing 20 Vue 2.0 compatible components, documentation, examples, and a usage‑tracking plugin that outputs a JSON mapping of component‑to‑page relationships.

Local Component Development & Mock Services

Each component includes a demo directory. During build, webpack ’s require.context API discovers all demo files and generates routes for them. The following code illustrates the discovery and routing logic:

var demoRequire = require.context('@component', true, /demo\/.*\.vue$/); // traverse all demo components
const demos = demoRequire.keys().map(demoKey => {
  var [componentName, demoName] = demoKey.split('/demo/');
  componentName = componentName.substring(2);
  demoName = demoName.substring(0, demoName.lastIndexOf('.'));
  return {
    componentName: componentName,
    demoName: demoName,
    component: demoRequire(demoKey)
  };
});
// group demos by component
const demosByComponent = _.groupBy(demos, demo => demo.componentName);
// routes for component pages
const routesByComponent = Object.keys(demosByComponent).map(componentName => {
  return {
    path: '/' + componentName,
    component: require('./component.vue'),
    meta: {
      componentName: componentName,
      demoComponents: demosByComponent[componentName]
    }
  };
});
// routes for individual demos
const routesByDemo = demos.map(demo => {
  return {
    path: '/' + demo.componentName + '/' + demo.demoName,
    component: demo.component,
    meta: { componentName: demo.componentName }
  };
});

A local mock server built on webpack‑dev‑server simulates API responses, automatically discovers mock files, and refreshes on changes.

Page‑Load Performance Optimization

The team established a monitoring system that collects real‑user data, separates technical monitoring (performance & errors) from user‑behavior monitoring (clicks, exposures), and provides visual dashboards.

Network optimizations include:

Deploying overseas CDN edge nodes and a Hong Kong intermediate source to reduce latency and back‑haul costs.

Using SLB in Hong Kong for AJAX traffic with dedicated lines to back‑end services.

Extending main‑document cache to 30 days at CDN edge while keeping a 10‑minute client‑side cache.

Consolidating third‑party scripts into the bundle and serving all static assets from a single domain to reduce DNS lookups and connections.

Offline Strategy

Because overseas networks can be unstable, the team implemented an offline solution based on the HTML Application Cache API. During the build, a manifest file is generated from resource dependency analysis. When the manifest changes, the browser triggers an updateready event, allowing the application to prompt users to refresh.

Future Plans

Further improvements include adopting Vue‑based server‑side rendering with code splitting for initial load, and migrating from AppCache to Service Workers for a more flexible offline experience.

Conclusion

The Hermes project demonstrates how front‑back separation, modular/component architecture, automation, monitoring, and performance engineering can dramatically improve development efficiency, code maintainability, and user experience in large‑scale front‑end systems.

Author

Yu Jie, front‑end technology expert at Meituan‑Dianping, full‑stack engineer, leading the overseas vacation front‑end team since 2016.