Front‑end Middle‑Platform Development for Ctrip and Trip: Componentization, Dark Mode, Internationalization, and Automated Testing

To meet Ctrip’s internationalization needs, the flight‑ticket front‑end team unified the separate Ctrip and Trip codebases, addressing the difficulty of merging business logic and reusing code across the two sites.

Background : Trip uses native iOS/Android and React for H5, while Ctrip relies on a custom React‑Native (CRN) framework and CRN‑WEB for H5, resulting in multiple parallel tech stacks and duplicated implementation of the same business logic.

Challenges included inconsistent technical architecture, redundant feature iteration, and fragmented release and monitoring processes across different platforms (MCD, Ares, PAAS, etc.).

Solution 3.1 – Componentization : The team abstracted shared and platform‑specific modules into a public component library consisting of atomic UI components, business components, event handlers, and utility functions. Example style constants are shown below:

const BasicIBU = {
  // Fonts
  subHead: 20, // sub head
  headline: 18, // title
  headlineS: 16, // title
  bodyText: 15, // body
  callout: 14, // title
  textNormal: 14,
  bodyTextS: 13,
  footnote: 13, // void
  caption1: 12, // caption
  // Colors
  black: '#0F294D',
  secondaryBlack: '#455873',
  tertiaryBlack: '#8592A6',
  titleBlack: '#042950',
  grey: '#ACB4BF',
  switchGrey: '#AAA',
  lightGrey: '#F5F7FA',
  lineGrey: '#DDDDDD',
  placeholderGray: '#F0F2F5',
};

Solution 3.2 – Style Splitting : A baseline style constant table was created to map font sizes and colors for both Ctrip and Trip, then overridden with site‑specific values, allowing a single stylesheet to be referenced by all platforms.

Solution 3.3 – Dark‑Mode Adaptation : Semantic color tokens (e.g., ThemeWhite, PrimaryContentWhite) were introduced and mapped to appropriate dark‑mode shades; shadows and borders were handled specially, and vibrant colors were desaturated for dark mode.

Solution 3.4 – Internationalization (i18n) : The team leveraged Ctrip’s Shark translation platform. Translation keys are defined as objects, for example:

export const sharkCommon = {
  goToDetailPage: { id: 'key.flight.postservice.common.godetail', defaultMessage: '去订单详情' },
  calendarTitle: { id: 'key.flight.postservice.calendar.title', defaultMessage: '选择日期' },
  // ...
};
export const refundSelectTrip = {
  changeTagTxt: { id: 'key.flight.postservice.refund.select.change.tag.txt', defaultMessage: '航班调整' },
  refundBtnTxt: { id: 'key.flight.postservice.refund.select.refund.btn.txt', defaultMessage: '申请退票' },
  // ...
};

During page load, Trip fetches translations from Shark while Ctrip uses built‑in Chinese defaults, avoiding unnecessary network calls.

Solution 3.5 – Localization (l10n) : Unit, currency, date, and number formats are dynamically converted based on the device’s locale, using the same Shark‑provided bundles for measurement standards.

Solution 3.6 – Automated Testing : GitLab pipelines integrate static analysis, unit tests, and UI automation (Cucumber + Puppeteer). A Chinese‑character detection utility flags untranslated strings at runtime:

static checkChildren(children?: ReactNode) {
  const chineseReg = /[\u4e00-\u9fa5]/;
  if (StringChecker.needCheck && children && typeof children === 'string') {
    if (chineseReg.test(children)) {
      if (!StringChecker.data[children]) {
        StringChecker.data[children] = DataStatus.DEFAULT;
        Expose.sendError('Error:find chinese', { str: children }, true);
      }
    }
  }
}

Solution 3.7 – Release and Monitoring : After unification, both sites share the same MCD publishing pipeline, enabling hot updates and synchronized releases. Monitoring is consolidated into a single platform (hickwall/Bigeyes) with alerts for client errors and missing translations.

Conclusion : The middle‑platform approach dramatically reduced duplicated code, shortened iteration cycles, lowered development costs, and improved overall efficiency for Ctrip and Trip front‑end products.