sudofeed

dev · · 21:12 · 2 min de citit

Am adăugat un strat BFF înainte de a apela la GraphQL: Ce s-a întâmplat apoi?

O echipă de dezvoltare a implementat un strat Backend-for-Frontend (BFF) pentru a rezolva probleme de performanță în aplicația lor React, reducând apelurile de rețea de la N+1 la o singură cerere pe ecran și îmbunătățind gestionarea datelor. Această schimbare arhitecturală nu numai că a rezolvat problemele inițiale, dar a introdus și noi considerații de securitate și a evoluat într-un hub central pentru diverse funcționalități backend.

O echipă de dezvoltare s-a confruntat cu blocaje semnificative de performanță în aplicația lor React, unde o singură pagină de tabel genera un număr excesiv de apeluri de rețea (N+1) și descărca seturi complete de date în browser. Acest lucru se datora în principal preluării tuturor facturilor fără paginare și apoi efectuării de cereri separate pentru rezumatul și aprobatorii fiecărei facturi, ducând la timpi de încărcare lenți și procesare ineficientă a datelor. Echipa a ales să introducă un strat Backend-for-Frontend (BFF), implementat pe serverul lor existent Node.js SSR, pentru a acționa ca intermediar între frontend-ul React și serviciile backend.

Stratul BFF a fost conceput pentru a servi ecrane specifice cu exact datele de care aveau nevoie, consolidând multiple apeluri backend într-un singur punct final API. De exemplu, un ecran de listă de lucru face acum o singură cerere către BFF, care gestionează permisiunile, caching-ul și un singur apel backend pentru a prelua și procesa datele necesare (facturi cu aprobări și informații despre furnizor) înainte de a trimite un rezultat paginat și sortat înapoi către frontend. Această abordare a mutat efectiv manipularea datelor, filtrarea, sortarea și paginarea de la browser la server, reducând drastic sarcina clientului și traficul de rețea.

Această schimbare arhitecturală nu numai că a rezolvat problemele imediate de performanță, dar a adus și beneficii și provocări neașteptate. BFF-ul a devenit un punct central pentru gestionarea scurgerilor de date între utilizatori prin impunerea unor reguli stricte de caching (de exemplu, `Vary: Cookie`) și delimitarea tenant-ului, prevenind expunerea datelor. De asemenea, a evoluat pentru a gestiona alte funcționalități, cum ar fi proxy-ul pentru încărcarea fișierelor și verificările de siguranță a atașamentelor, demonstrându-și utilitatea dincolo de scopul inițial și subliniind potențialul său ca strat de integrare flexibil înainte de a lua în considerare soluții mai complexe precum GraphQL.

$ sursa --originală

dev.to

Rezumat realizat de Sudofeed pe baza articolului original. Drepturile asupra conținutului aparțin sursei originale.

citește originalul ↗