Multi-Experience Apps: One Back-end, Many Frontends

Managing federated UI layouts. We study GraphQL federation, type-safe API gateways, and web-socket streaming.

VP
SHIVAM ITCS
·24 March 2024·12 min read·1 views

Technical Overview & Strategic Context

Modern businesses build software across web apps, native mobile platforms, smart watches, and spatial computing headsets. Exposing custom API endpoints for every unique client device creates redundant logic and complicates maintenance. A multi-experience backend unifies data streams behind a federated GraphQL gateway.

Architectural Principle: Encapsulate device-specific layouts on the client side, using standardized schema queries to load backend parameters.

Core Concepts & Architectural Blueprint

By federating schema definitions, developers can query multiple backend microservices through a single API gateway. Mobile, web, and IoT nodes query only the fields they need, reducing mobile network bandwidth constraints.

Performance & Capability Comparison

Client PlatformInterface RequirementsOptimal Network ProtocolPayload Payload Profile
Enterprise Web ApplicationRich metrics, high tables countHTTP/2 GraphQL queriesComprehensive nested JSON feeds
Wearable DevicesCompact notifications, minimal metricsgRPC over HTTP/2 / WebSocketsCompressed binary payloads

Implementation & Code Pattern

To configure a federated API gateway that resolves schemas across microservices, configure this gateway route:

  • Define standard schema boundaries for the core user and product endpoints.
  • Expose gRPC channels to handle low-latency mobile updates.
  • Run validation queries to check that client payloads are fully type-safe.
javascriptcode
// Apollo Gateway federation router script (2024)
const { ApolloServer } = require("@apollo/server");
const { startStandaloneServer } = require("@apollo/server/standalone");
const { ApolloGateway, IntrospectAndCompose } = require("@apollo/gateway");

const gateway = new ApolloGateway({
  supergraphSourced: new IntrospectAndCompose({
    subgraphs: [
      { name: "billing", url: "http://billing-service:4001/graphql" },
      { name: "users", url: "http://users-service:4002/graphql" }
    ]
  })
});

const server = new ApolloServer({ gateway });
startStandaloneServer(server, { port: 4000 }).then(({ url }) => {
  console.log(`Federated Gateway ready at ${url}`);
});

Operational Governance & Future Outlook

Standardizing on federated schemas keeps business logic organized on the backend, allowing frontend developers to build interfaces across distinct platforms.

VP
Vijay Paliwal
Founder, SHIVAM ITCS · 18+ years enterprise & AI engineering
MCA · Ex-HiveGPT USA · Ex-Social27 Seattle
Multi-Experience Apps: One Back-end, Many Frontends | SHIVAM ITCS Blog | SHIVAM ITCS