Ako prebieha interakcia medzi front-end a back-end?

Interakcia sa uskutočňuje prostredníctvom protokolu HTTP(S) s použitím rôznych metód (GET, POST, PUT, DELETE atď.). Frontend odosiela požiadavky na backend na získanie alebo odoslanie údajov. Backend spracováva tieto požiadavky, v prípade potreby komunikuje s databázou a odosiela odpoveď.

Hlavné spôsoby interakcie:

• REST API: Najbežnejší prístup. Backend poskytuje súbor koncových bodov (endpoints), na ktoré sa frontend môže obrátiť na vykonanie operácií. Dáta sa zvyčajne prenášajú vo formáte JSON.

  // Príklad JSON odpovede od backendu
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternatíva k REST. Frontend žiada len tie údaje, ktoré potrebuje, v jednom dopyte. To umožňuje znížiť počet požiadaviek a objem prenášaných dát.

• WebSockets: Umožňujú nadviazať obojsmerné trvalé spojenie medzi frontendom a backendom. Používa sa pre aplikácie vyžadujúce výmenu údajov v reálnom čase (chatu, upozornenia).

• Server-Sent Events (SSE): Umožňujú backendu odosielať údaje frontend'ovi jednostranne cez HTTP spojenie. Používa sa na získavanie aktualizácií zo servera bez neustáleho odosielania požiadaviek od klienta.

Typický scenár interakcie:

1. Používateľ vykoná akciu na fronte (napríklad stlačí tlačidlo).
2. Frontend odošle HTTP požiadavku na príslušný koncový bod backendu.
3. Backend prijme požiadavku, spracuje ju (napríklad vykoná dopyt do databázy).
4. Backend vytvorí odpoveď (zvyčajne vo formáte JSON) a odošle ju frontend.
5. Frontend prijme odpoveď, spracuje údaje a aktualizuje používateľské rozhranie.

Príklad AJAX požiadavky na fronte s použitím JavaScriptu:

// Odoslanie GET požiadavky na získanie zoznamu používateľov
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Spracovanie získaných údajov
    console.log('Získaní používatelia:', data.users);
  })
  .catch(error => {
    // Spracovanie chýb
    console.error('Chyba pri získavaní používateľov:', error);
  });