ZanApi: YouZan's Solution for Frontend-Backend Collaboration and API Management

With the widespread adoption of frontend-backend separation in modern web development, improving collaboration efficiency between frontend and backend teams has become a critical challenge for companies. This article explores the common problems faced during project development cycles and how YouZan addressed them with their ZanApi tool.

Key Collaboration Challenges:

In the early stages of projects, frontend and backend teams need to agree on API definitions and maintain them persistently throughout the development lifecycle.

During parallel development, frontend developers need to mock API data before backend APIs are ready.

Before integration testing, frontend developers need a reliable way to determine whether backend APIs are truly ready for integration.

Traditional Approaches and Their Limitations:

For API documentation, many companies including YouZan initially relied on manual maintenance through generic documentation sites, which introduced problems such as high maintenance costs, manual errors, and poor API presentation. For data mocking, approaches evolved from hardcoded mock data in frontend code (using setTimeout to simulate AJAX) to remote mock servers using Node.js, but each approach had significant drawbacks including inability to fully simulate real requests, code modifications required before production deployment, and delayed response to backend API changes.

ZanApi Solution:

ZanApi provides a comprehensive solution with three main components:

1. API Documentation Generation: YouZan developed an IntelliJ IDEA plugin that allows Java developers to generate and update API documentation with one click. A remote Java parsing server extracts comments from Java code to generate API field annotations, making documentation generation essentially zero-cost for developers who maintain good commenting habits.

2. Data Mocking: The solution uses ZanProxy to filter requests from clients (PC/mobile), routing mocked API calls to ZanApi. Features include simultaneous modification by both teams, notification system for mock data changes, support for multiple mock data sets with automatic parameter-based matching, and automatic random data generation based on JSONSchema definitions derived from API return value structures.

3. Integration Testing Support: ZanApi allows creating test cases for each API in different environments and organizing them into API collections. The one-click test feature runs all test cases in a collection and identifies failed interfaces. Additionally, it can compare actual API responses against API definitions or existing mock data to validate correctness.