Cum are loc interacțiunea între front-end și back-end?

Interacțiunea se realizează prin protocolul HTTP(S) utilizând diferite metode (GET, POST, PUT, DELETE etc.). Frontend trimite solicitări către backend pentru a obține sau trimite date. Backend-ul procesează aceste solicitări, interacționează cu baza de date dacă este necesar și trimite un răspuns.

Principalele modalități de interacțiune:

• REST API: Abordarea cea mai răspândită. Backend-ul oferă un set de puncte finale (endpoints) la care frontend-ul poate accesa pentru a efectua operații. Datele sunt de obicei transmise în format JSON.

  // Exemplu de răspuns JSON de la backend
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternativă la REST. Frontend-ul solicită doar datele de care are nevoie într-o singură cerere. Acest lucru permite reducerea numărului de solicitări și a volumului de date transmise.

• WebSockets: Permite stabilirea unei conexiuni bidirecționale permanente între frontend și backend. Este utilizat pentru aplicații care necesită schimb de date în timp real (chat-uri, notificări).

• Server-Sent Events (SSE): Permite backend-ului să trimită date către frontend într-o singură direcție printr-o conexiune HTTP. Este utilizat pentru a primi actualizări de la server fără solicitări constante din partea clientului.

Scenariu tipic de interacțiune:

1. Utilizatorul efectuează o acțiune pe frontend (de exemplu, apasă un buton).
2. Frontend-ul trimite o solicitare HTTP către punctul final corespunzător al backend-ului.
3. Backend-ul primește solicitarea, o procesează (de exemplu, face o interogare la baza de date).
4. Backend-ul creează un răspuns (de obicei în format JSON) și îl trimite către frontend.
5. Frontend-ul primește răspunsul, procesează datele și actualizează interfața utilizatorului.

Exemplu de solicitare AJAX pe frontend folosind JavaScript:

// Trimiterea unei solicitări GET pentru a obține lista de utilizatori
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Procesarea datelor primite
    console.log('Utilizatori primiți:', data.users);
  })
  .catch(error => {
    // Tratarea erorilor
    console.error('Eroare la obținerea utilizatorilor:', error);
  });