Low‑Code Platform Practices at vivo: Front‑Back End Separation, Custom Rendering Engine, and Visual Configuration

Based on Wang Ning’s talk at the 2022 vivo Developer Conference, this article shares the practical experience of vivo’s low‑code platform (named “Houyi”) across five major dimensions.

1. Front‑back end separated low‑code solution – The early platform bundled most front‑end work, but rapid growth of business scenarios required independent page output and server‑side low‑code capabilities. The architecture was refactored into a clear front‑end/back‑end separation, supporting both a product‑oriented “no‑code” mode for non‑technical users and a developer‑oriented low‑code mode that exposes DSL‑driven page generation, BFF layers, micro‑service APIs, and flexible deployment.

The separation also enables a DSL that can be compiled on the front‑end side and interpreted on the back‑end side, allowing the two layers to evolve independently without breaking each other.

2. Self‑developed high‑performance rendering engine – The engine consists of a form renderer, a list renderer, and a dynamic‑interaction interpreter. All three are driven by JSON‑Schema, which decouples UI logic from the underlying framework. The form renderer provides data management, state management, dynamic rendering, and component linking. The list renderer builds on the open‑source vxe‑table library and adds support for images, videos, and custom renderers. The dynamic‑interaction interpreter executes a queue of interaction nodes (typically less than 30 lines of code) to drive complex UI flows such as button‑triggered pop‑ups, form submissions, and list refreshes.

3. Efficient visual configuration scheme – In Houyi, pages are treated as resources and managed hierarchically. This design enables two major benefits: (1) flexible navigation styles (tab‑history, breadcrumb, custom menus) and (2) decoupling of resource management from visual page configuration. Users can drag‑and‑drop to adjust menu structures, view resource details, and perform one‑click version publishing with hot‑updates. Templates and code‑snippets further accelerate development, allowing a page to be built in minutes.

Additional features include built‑in watermarks, menu search, message notifications, and configurable customer‑service widgets. The editor also supports right‑click operations for copy‑paste across blocks, pages, or applications, and direct editing of component schemas.

4. Trillion‑level content delivery – Houyi stores massive operational data in MongoDB with custom sharding for isolation and scalability. Dedicated mirror services, local caches, disk caches, and independent Redis clusters guarantee high availability. The platform handles millions of QPS, with some requests involving hundreds of table joins, scaling to billions of queries. Asynchronous concurrency, dynamic updates, and scheduled reloads further boost throughput.

5. Coexistence of low‑code and traditional development – Houyi does not replace custom development; instead, it complements it. The platform supports iframe and micro‑application embedding, allowing traditional pages to be integrated into Houyi and vice‑versa. Resource‑page isolation enables seamless third‑party integration without altering existing menu management. Additionally, SDKs are provided for developers to extend low‑code capabilities with custom business logic.

Overall, Houyi demonstrates how a well‑designed low‑code platform can accelerate development, improve maintainability, and scale to massive traffic while still allowing deep customization where needed.