TL;DR

How to Navigate Microservices as a Frontend Engineer - Abisoye Alli-Balogun

Microservices chuyen su phuc tap tu backend sang frontend. Thay vi mot API duy nhat, ban dang xu ly 5 service khac nhau - moi service co contract rieng, co the that bai doc lap, va co the tra ve du lieu loi thoi. Bai viet nay tom tat 6 pattern thuc chien tu bai huong dan cua Abisoye Alli-Balogun tren freeCodeCamp - de ban co the bat dau ap dung ngay.

Backend Day Complexity Sang Frontend

Trong kien truc monolith, frontend noi chuyen voi 1 API duy nhat - API do quan ly database, xu ly business logic, va tra ve dung data shape ma UI can. Don gian.

Trong microservices, API duy nhat do vo thanh nhieu manh:

  • Nhieu contract: "Product" trong inventory service co truong khac "product" trong catalog service. User service tra ve firstName + lastName; order service tra ve customerName la 1 string; notification service yeu cau fullName - cung 1 khai niem, 3 ten truong khac nhau.
  • Partial failure: Order service phan hoi trong 50ms trong khi recommendation service timeout. UI can xu ly ca 2 truong hop.
  • State phan tan: User service biet dia chi hien tai; order service luu snapshot dia chi luc dat don - hai gia tri nay co the khac nhau.
  • Latency tang: De render 1 trang co the can 3-4 API call thay vi 1.

Day khong phai la van de backend anh huong den frontend - day la van de frontend thuan tuy can giai phap frontend.

BFF va Promise.allSettled

Backend-for-Frontend (BFF) la pattern co tac dong lon nhat cho frontend team. BFF la 1 API layer mong, do frontend team so huu, nam giua browser va cac microservice. No aggregate cac call, chuyen du lieu thanh dung shape ma component can, va xu ly cac cross-service concern nhu authentication token forwarding.

Diem mau chot khi viet BFF: dung Promise.allSettled thay vi Promise.all.

  • Promise.all: Fail fast - neu 1 service bat ky sap, toan bo request that bai.
  • Promise.allSettled: Tra ve partial data tu cac service thanh cong - cho phep UI render nhung gi co duoc.

Khi nao nen xay dung BFF? Khi frontend aggregate data tu 3 service tro len, khi cac client khac nhau (web, mobile, admin) can data shape khac nhau, hoac khi frontend team muon kiem soat response shape ma khong can doi backend. Neu da co Apollo Federation hay API gateway xu ly aggregation roi - khong can BFF them.

State Phan Tan va Adapter Layer

Trong microservices, "su that" la phan tan. Dieu nay tao ra 2 thach thuc chinh:

Cache boundary va invalidation: Data tu cac service khac nhau tro nen cu theo toc do khac nhau. Product info tu catalog service co the cache nhieu phut; stock level tu inventory service can refresh thuong xuyen hon; du lieu don hang cua user can luon fresh. Khi user dat don, can invalidate ca 3 cache key: orders (order service), stock levels (inventory service), va loyalty points (user service). De quan ly, hay luu bang cross-service dependencies. Khi bang nay vuot qua ~12 muc, chuyen sang Server-Sent Events hoac WebSocket de backend push tin hieu invalidation.

Adapter layer: Tao 1 adapter layer dich response tu moi service ve 1 unified domain model thong nhat truoc khi component dung. Component chi biet den kieu User duy nhat - khong bao gio thay raw service response. Khi service thay doi API, ban chi can update 1 adapter, khong phai sua tung component.

Timeout Budget va Error Boundary Per Service

Timeout budget phan bo thoi gian toi da de lap rap du lieu cho 1 trang. Khong co no, thoi gian load trang bi quyet dinh boi service cham nhat:

  • Data quan trong (chi tiet san pham): 3 giac
  • Data khong quan trong (reviews, recommendations): 1-1.5 giac

Neu recommendation service cham, hien thi trang san pham khong co recommendations - user khong can doi 1 service ma co the ho khong thay. Luu y: dung static timeout qua chi tiet la anti-pattern trong moi truong dong; nen dung circuit breaker (Closed / Open / Half-Open) thay the.

Error boundary per service: Thay vi 1 error boundary o cap trang, dat boundary xung quanh tung section map den tung backend service. Review service crash khong anh huong den product details. Recommendation service timeout khong hien error - section don gian khong render. Ket hop voi phan loai critical/non-critical: service quan trong co error boundary voi UI bao loi ro rang; service khong quan trong co boundary im lang hoac empty state.

Khi Nao Nen Noi "Khong" Voi Backend

Khong phai van de microservice nao cung co giai phap o frontend. Hay push back khi:

  • Frontend dang goi hon 5 API call cho 1 trang - day la tin hieu service qua granular hoac thieu aggregation layer. Giai phap la BFF hoac composite API, khong phai them Promise.all.
  • 2 service tra ve du lieu mau thuan ve cung 1 entity - day la van de data consistency ma frontend khong the giai quyet. Can fix o nguon.
  • Backend team thay doi breaking change ma khong bao truoc - advocate cho versioned API, deprecation notice, va contract testing.

Trong microservices, ban khong chi la consumer cua API - ban la stakeholder trong cach cac API duoc thiet ke. Tham gia vao API design conversation cang som cang it bat ngo o production.

Doc Them

Bai huong dan day du cua Abisoye Alli-Balogun co day du code example cho tung pattern: How to Navigate Microservices as a Frontend Engineer - freeCodeCamp.

Nguon tham khao them: Designing a Microservices Architecture for Failure (RisingStack) - circuit breaker, bulkhead, failover caching pattern chi tiet. Microservices Resilience Patterns (GeeksforGeeks) - real-world examples tu Netflix, Amazon, Uber, Spotify.