Improving Front-End Development Efficiency with Serverless ViewModel Architecture

Front-end development is evolving rapidly, with numerous frameworks (Vue, React, Angular) and platforms (mini‑programs, smart devices) creating high maintenance costs when separate pages are built for each scenario.

The ViewModel layer, commonly used in front‑end projects, abstracts data exchange with the server and processes callbacks from the view. It acts as a bridge between the view and backend logic.

This article explores moving the ViewModel to the backend using a serverless architecture, allowing a single ViewModel implementation to be reused across multiple front‑ends, reducing duplication and simplifying updates.

Serverless, built on cloud technology, consists of Function‑as‑a‑Service (FaaS) for running code on demand and Backend‑as‑a‑Service (BaaS) for common services such as authentication and storage. By deploying ViewModel logic as FaaS functions, developers can focus on business logic without managing servers.

Using the Gaia platform (a FaaS solution), backend APIs are defined: a first‑screen data API that returns fine‑grained fields for each UI element, an update API that accepts the current page data and an action, and an open‑service API. The data structures are designed to match front‑end modules, enabling direct mapping.

On the front‑end side, the received data is rendered directly with minimal processing, turning the front‑end into a thin data‑binding layer. When business requirements change, only the backend ViewModel needs modification, and the same logic can be reused on native, web, or mini‑program clients.

Practically, this approach simplifies front‑end development, improves efficiency, and allows ViewModel reuse across platforms. Future work includes further modularizing ViewModel logic, addressing interface debugging, and optimizing development costs.