Evolution of Our Frontend Architecture: From Legacy Backbone to Model‑Oriented Pure‑Model and Monorepo

Jade Gu, a senior frontend expert at Ctrip, introduces the current wireless frontend architecture, its history, and the motivations behind recent redesigns.

In 2016 the team migrated core applications from C# ASP.NET to Node.js, adding React on top of a Backbone.js framework to achieve full front‑back separation. However, integrating React raised two major issues: the large bundle size (adding over 140 KB) and the need for ES2015/JSX compilation. To keep bundle size acceptable, a lightweight react-lite implementation reduced the size to around 20 KB. Additionally, the existing module system relied on RequireJS with dynamic and remote modules, making a switch to Webpack difficult due to strong runtime dependencies.

To address these problems the team created the isomorphic framework React‑IMVC, which follows an MVC pattern (Model, View, Controller) that runs both on Node.js (SSR) and in the browser (CSR). The Controller handles lifecycle hooks (e.g., shouldComponentCreate, pageWillLeave) and abstracts side‑effects such as fetch, redirect, and cookies, allowing developers to write code without worrying about the execution environment.

New challenges emerged as the product expanded to multiple platforms (domestic/international PC sites, H5 sites, React‑Native apps, mini‑programs, etc.). While Web, React‑Native, and Flutter each offer cross‑platform capabilities, they have trade‑offs in performance, ecosystem maturity, and development cost. The team concluded that a full rewrite with Flutter was not suitable for their existing codebase.

Observing that most modern UI frameworks bind state tightly to the view (a View‑Oriented Programming approach), the team proposed a shift to Model‑Oriented Programming (MOP), where the Model layer manages state and business logic independently of any specific view framework.

After evaluating state‑management libraries (Redux, MobX, Vue 3 reactivity, RxJS), the team chose Redux because it aligns with their existing Relite library and provides powerful devtools. They built Pure‑Model , a Redux‑based framework that maximizes the Model layer by exposing React‑style hooks for state ( Model.useState) and actions ( Model.useActions), and adding lifecycle hooks ( setupPreloadCallback, setupStartCallback, setupFinishCallback) to support SSR and side‑effects without external middleware.

Example code demonstrates a dynamic module load using RequireJS: require('/path/to/' + isInApp ? 'hybrid' : 'h5') To share the Model code across many projects, the team adopted a Monorepo structure, placing the core Model in projects/isomorphic and linking it into other projects (React‑DOM, React‑Native, GraphQL‑BFF) via soft links. This approach simplifies version management and enables consistent TypeScript typings generated from GraphQL schemas.

Looking ahead, the team plans to further separate the view into Container and Atom components, using React context to inject platform‑specific implementations while keeping the shared Model unchanged. This gradual abstraction aims to retain the benefits of existing frameworks while moving toward a more unified, reusable codebase, potentially replacing lower‑level renderers with Flutter in the future.

In summary, the evolution from Backbone to Pure‑Model, combined with Monorepo and GraphQL‑BFF strategies, demonstrates how a large organization can modernize its frontend stack, improve code reuse across platforms, and maintain long‑term maintainability without a disruptive full rewrite.