Building a Platformized BFF Layer with GraphQL, JSON Templates, and Service Governance

Backend For Frontend (BFF) is a backend layer that bridges complex multi‑platform front‑end requirements and backend services, allowing each client (App, PC, Mobile Web) to receive tailored data.

The article identifies three main challenges of BFF: on‑demand data fetching, page‑level differences, and version compatibility, and proposes solutions using GraphQL for selective field retrieval, JSON template engines (JSLT/JavaScript) for data transformation, and routing logic for version mapping.

It introduces a platform that lets developers define GraphQL queries, JSON templates, and routing rules through simple forms, automatically generating API endpoints that fetch data via GraphQL, transform it, and return the required structure.

Implementation details include a GraphQL schema example, a GraphQL query, a JSLT template for converting GraphQL results to front‑end JSON, and a Java annotation (

@GraphQLFieldAttach(targetType = "Property", sourceFields = "communityId", targetFieldName = "community", batch = true)

) that binds backend services to GraphQL fields.

type Query {
  hero: Character
}

type Character {
  name: String
  friends: [Character]
  homeWorld: Planet
}

type Planet {
  name: String
  climate: String
}

{
  hero {
    name
    friends {
      name
      homeWorld {
        name
        climate
      }
      friends {
        name
        homeWorld {
          name
          climate
        }
        friends {
          name
        }
      }
    }
  }
}

// GraphQL result (input JSON)
{
  "data": [
    {"id":10000,"title":"房子 1","roomNum":2,"hallNum":2,"area":90.12},
    {"id":10001,"title":"房子 2","roomNum":3,"hallNum":2,"area":99.34}
  ]
}

// JSLT template
{
  "dataList": [
    for(.data) {
      "id": .id,
      "title": .title,
      "label1": "户型",
      "text1": .roomNum + "室" + .hallNum + "厅",
      "label2": "面积",
      "text2": .area + "㎡",
      "link": URLRoute("HousePage", {"id": .id})
    }
  ]
}

The architecture evolves into a GraphQL gateway with micro‑service governance, using federation/DGS to avoid monolithic schemas, and supports dynamic schema updates, field audit, and performance optimizations.

Finally, the platform is integrated with an internal low‑code front‑end system, demonstrating significant reductions in development effort (about 50% less) and response latency (from ~100 ms to ~20 ms) for a real‑estate listing page.