DEV Community

Anak Wannaphaschaiyong
Anak Wannaphaschaiyong

Posted on

Agent-Oriented Development Pattern: BFF - The Aggregation Differentia

Agent-Oriented Development Pattern: BFF - The Aggregation Differentia

Watch an agent work: gather data from multiple tools, transform it, deliver exactly what's needed. This is BFF thinking - the aggregation differentia that makes microservices human-friendly.

The Agent Differentia

Agents naturally operate in a three-step cognitive pattern: Gather → Process → Deliver. When you ask an agent to create a dashboard, it doesn't just "call multiple APIs" - it instinctively aggregates diverse tool outputs, transforms the data for your specific context, and delivers a specialized response tailored to your needs.

This is precisely the Backend-for-Frontend (BFF) pattern, but most explanations miss the cognitive alignment. Traditional BFF descriptions focus on technical aggregation. The agent perspective reveals why BFF feels so natural: it mirrors how intelligence actually works when solving multi-source problems.

The differentia? Agents don't just compose data - they contextualize it. A mobile client needs different information than a web dashboard. Agents intuitively understand this specialization requirement.

Concrete Example: Chat Dashboard

Consider our chat platform dashboard. Traditional approach requires multiple client calls:

// Without BFF (Client complexity)
const user = await fetch('/api/users/me');
const conversations = await fetch('/api/history/recent');
const analytics = await fetch('/api/analytics/usage');

// Client must merge complex data structures
const dashboard = mergeComplexData(user, conversations, analytics);
Enter fullscreen mode Exit fullscreen mode

Agent-native BFF approach mirrors natural intelligence:

// BFF Service (Agent-like aggregation)
app.get('/api/bff/dashboard', async (req, res) => {
  // GATHER: Parallel tool execution (like agent workflow)
  const [user, conversations, analytics] = await Promise.all([
    userService.getProfile(req.user.id),
    historyService.getRecent(req.user.id, 5),
    analyticsService.getStats(req.user.id)
  ]);

  // PROCESS: Transform for specific context
  const dashboard = {
    user: { name: user.name, avatar: user.avatar },
    recentChats: conversations.map(c => ({
      title: c.title || 'New Chat',
      preview: c.last_message.substring(0, 50) + '...'
    })),
    stats: { totalChats: analytics.conversation_count }
  };

  // DELIVER: Specialized response for UI needs
  res.json(dashboard);
});
Enter fullscreen mode Exit fullscreen mode

Agent Thinking Visualization

AGENT WORKFLOW:
[Tool A] ──┐
[Tool B] ──┤──► [Agent Brain] ──► [Contextualized Response]
[Tool C] ──┘     (Transform)           (For specific need)
  │
  └── Gather diverse data

BFF PATTERN MIRROR:
[API A] ──┐
[API B] ──┤──► [BFF Service] ──► [UI-Optimized Response]
[API C] ──┘     (Aggregate)         (For specific client)
  │
  └── Gather service data
Enter fullscreen mode Exit fullscreen mode

Implementation Trigger

Recognize BFF opportunities by asking: "Am I in gather-process-deliver mode?" When you find yourself thinking "I need data from multiple sources, transform it, and deliver something specific to this context" - that's your agent brain recognizing a BFF pattern.

Next pattern: How agents naturally break complex problems into atomic tasks (Todo-Driven Development).

Top comments (0)