Apakah itu corak Backend-for-Frontend dan bagaimana ia berkaitan dengan API gateway?

Question

Accepted Answer

Sebuah **Backend-for-Frontend (BFF)** ialah gateway khusus bagi setiap jenis klien (web, mudah alih, rakan kongsi). Daripada satu gateway generik yang melayani semua klien, setiap frontend mendapat backend yang disesuaikan dengan keperluannya.

## Masalah yang diselesaikannya

Aplikasi mudah alih dan aplikasi web mempunyai keperluan data, saiz payload, dan kekerapan komunikasi yang berbeza. Satu API generik memaksa kompromi dan over-fetching.

```text
Without BFF:        With BFF:
  All clients          Web ─▶ Web BFF ─┐
     │                 Mobile ─▶ Mobile BFF ─┼─▶ microservices
  one generic API      Partner ─▶ Partner BFF ─┘
```

## Apa yang dilakukan oleh BFF

- **Mengagregat** beberapa panggilan perkhidmatan menjadi satu respons yang dibentuk untuk klien.
- **Memangkas** payload untuk klien yang terhad (mudah alih).
- Memiliki **logik khusus klien** supaya perkhidmatan kekal generik.

```js
// Mobile BFF: one call → compose a lean screen payload
app.get('/home', async (req) => {
  const [user, orders] = await Promise.all([
    usersApi.get(req.userId),
    ordersApi.recent(req.userId, { limit: 3 }) // small for mobile
  ]);
  return { name: user.name, recentOrders: orders }; // tailored shape
});
```

## BFF berbanding gateway

| | API Gateway | BFF |
|---|---|---|
| Skop | Satu untuk semua klien | Satu bagi setiap jenis klien |
| Logik | Cross-cutting generik | Pembentukan khusus klien |

## Perangkap

Terlalu banyak BFF menduplikasi logik; pastikan ia nipis dan elakkan kebocoran peraturan perniagaan yang sepatutnya berada dalam perkhidmatan.

## Mengapa ia penting

BFF membolehkan setiap frontend berkembang mengikut rentaknya sendiri dengan backend yang sesuai untuknya, dan bukannya memaksa setiap klien tunduk kepada satu kontrak kongsi.

Ia melengkapi (bukan menggantikan) gateway: gateway mengendalikan kebimbangan tepi seperti auth dan penghalaan, manakala BFF mengendalikan pengagregatan khusus klien.

	API Gateway	BFF
Skop	Satu untuk semua klien	Satu bagi setiap jenis klien
Logik	Cross-cutting generik	Pembentukan khusus klien