Evolution of Componentization in the Operations Backend Platform: From FIS to React and the Third‑Generation Solution

With the explosive growth of Baidu Takeaway's delivery business, the operations backend faced a surge in development volume, resulting in a bulky, tightly coupled architecture with extensive duplicate code.

Initially, the team used Baidu's FIS build tool, which provided good module isolation and PHP integration but mainly offered modularization rather than true component reuse; inheritance‑based components were hard to understand and maintain.

After adopting React, the team moved to a React‑Redux architecture, gaining a unified component lifecycle, clearer state management, and access to rich open‑source UI libraries, which markedly improved maintainability and development speed.

The second‑generation solution brought better code maintainability, higher development efficiency, and increased component reusability, yet repetitive CRUD page development remained a pain point.

The third‑generation strategy proposes a three‑step plan: (1) abstract common business models (search, pagination, CRUD forms) into configurable components; (2) build a component sharing and visual configuration platform; (3) continuously integrate more business models to enrich the component library.

Example of a searchable page component:

<xp-searchPage ref="sp" change={this.filterChange}>
  <xp-filter components={filterComponents}></xp-filter>
  <xp-buttonBar components={buttonComponents}></xp-buttonBar>
  <xp-table components={tableComponents}></xp-table>
</xp-searchPage>

Configuration for filter and table components is expressed as JavaScript objects, enabling developers to declare fields, validation rules, and actions without writing repetitive UI code.

The platform provides a drag‑and‑drop visual editor that generates a JSON tree representing component hierarchy; the system then traverses the tree to render Vue components in real time using Vue’s Vuify tool.

By sharing source code directly (instead of packaged npm/git artifacts), business components can be quickly modified, versioned, and re‑uploaded, fostering a virtuous cycle of reuse, sharing, and productivity gains.

In conclusion, the third‑generation componentization solution eliminates duplicate development, boosts developer happiness, accelerates delivery, and creates a scalable ecosystem for future feature expansion.