Jak probíhá interakce mezi front-endem a back-endem?

Interakce probíhá prostřednictvím protokolu HTTP(S) s využitím různých metod (GET, POST, PUT, DELETE atd.). Frontend odesílá požadavky na backend za účelem získání nebo odeslání dat. Backend tyto požadavky zpracovává, v případě potřeby komunikuje s databází a odesílá odpověď.

Hlavní způsoby interakce:

• REST API: Nejrozšířenější přístup. Backend poskytuje sadu koncových bodů (endpoints), na které se frontend může obracet k provádění operací. Data jsou obvykle přenášena ve formátu JSON.

  // Příklad JSON odpovědi od backendu
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternativa k REST. Frontend požaduje pouze ta data, která potřebuje, v jednom požadavku. To umožňuje snížit počet požadavků a objem přenášených dat.

• WebSockets: Umožňují navázat obousměrné trvalé spojení mezi frontendem a backendem. Používají se v aplikacích, které vyžadují výměnu dat v reálném čase (chaty, oznámení).

• Server-Sent Events (SSE): Umožňují backendu posílat data frontendům jednostranně přes HTTP spojení. Používá se pro přijímání aktualizací ze serveru bez neustálých požadavků od klienta.

Typický scénář interakce:

1. Uživatel provede akci na frontendu (například klikne na tlačítko).
2. Frontend odešle HTTP požadavek na odpovídající koncový bod backendu.
3. Backend přijme požadavek, zpracuje jej (například provede dotaz do databáze).
4. Backend vytvoří odpověď (obvykle ve formátu JSON) a odešle ji na frontend.
5. Frontend přijme odpověď, zpracuje data a aktualizuje uživatelské rozhraní.

Příklad AJAX požadavku na frontend s použitím JavaScriptu:

// Odeslání GET požadavku pro získání seznamu uživatelů
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Zpracování přijatých dat
    console.log('Přijatí uživatelé:', data.users);
  })
  .catch(error => {
    // Zpracování chyb
    console.error('Chyba při získávání uživatelů:', error);
  });