Jak przebiega interakcja między front-endem a back-endem?

Interakcja odbywa się za pomocą protokołu HTTP(S) z użyciem różnych metod (GET, POST, PUT, DELETE itp.). Frontend wysyła żądania do backendu w celu pobrania lub wysłania danych. Backend przetwarza te żądania, w razie potrzeby komunikuje się z bazą danych i wysyła odpowiedź.

Główne sposoby interakcji:

• REST API: Najbardziej powszechne podejście. Backend udostępnia zestaw punktów końcowych (endpoints), do których frontend może się odwołać, aby wykonać operacje. Dane zwykle przesyłane są w formacie JSON.

  // Przykład odpowiedzi JSON od backendu
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternatywa dla REST. Frontend żąda tylko tych danych, które są mu potrzebne, w jednym zapytaniu. Pozwala to zmniejszyć liczbę zapytań i ilość przesyłanych danych.

• WebSockets: Umożliwiają ustanowienie dwukierunkowego, stałego połączenia między frontendem a backendem. Używane w aplikacjach wymagających wymiany danych w czasie rzeczywistym (czaty, powiadomienia).

• Server-Sent Events (SSE): Pozwalają backendowi wysyłać dane do frontendu w jednym kierunku przez połączenie HTTP. Używane do otrzymywania aktualizacji z serwera bez konieczności ciągłych zapytań od klienta.

Typowy scenariusz interakcji:

1. Użytkownik wykonuje akcję na frontendzie (np. kliknięcie przycisku).
2. Frontend wysyła żądanie HTTP do odpowiedniego punktu końcowego backendu.
3. Backend odbiera żądanie, przetwarza je (np. wykonuje zapytanie do bazy danych).
4. Backend tworzy odpowiedź (zwykle w formacie JSON) i wysyła ją do frontendu.
5. Frontend odbiera odpowiedź, przetwarza dane i aktualizuje interfejs użytkownika.

Przykład żądania AJAX na frontendzie z użyciem JavaScript:

// Wysyłanie żądania GET w celu pobrania listy użytkowników
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Przetwarzanie otrzymanych danych
    console.log('Otrzymani użytkownicy:', data.users);
  })
  .catch(error => {
    // Obsługa błędów
    console.error('Błąd podczas pobierania użytkowników:', error);
  });