Kako se dešava interakcija između front-end i back-end?

Interakcija se obavlja putem HTTP(S) protokola koristeći različite metode (GET, POST, PUT, DELETE itd.). Frontend šalje zahteve backend-u za dobijanje ili slanje podataka. Backend obrađuje te zahteve, po potrebi komunicira sa bazom podataka i šalje odgovor.

Glavni načini interakcije:

• REST API: Najčešći pristup. Backend pruža skup krajnjih tačaka (endpoints) kojima frontend može pristupiti za izvršavanje operacija. Podaci se obično prenose u JSON formatu.

  // Primer JSON odgovora od backend-a
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternativa REST-u. Frontend zahteva samo one podatke koji su mu potrebni u jednoj zahtev.

• WebSockets: Omogućavaju uspostavljanje dvostrano trajne veze između frontend-a i backend-a. Koriste se za aplikacije koje zahtevaju razmenu podataka u realnom vremenu (čatovi, obaveštenja).

• Server-Sent Events (SSE): Omogućavaju backend-u da šalje podatke frontend-u u jednom smeru putem HTTP veze. Koriste se za dobijanje ažuriranja sa servera bez stalnih zahteva od klijenta.

Tipičan scenario interakcije:

1. Korisnik izvršava akciju na frontend-u (npr. klik na dugme).
2. Frontend šalje HTTP zahtev odgovarajućoj tački kraja backend-a.
3. Backend prima zahtev, obrađuje ga (npr. izvršava upit na bazi podataka).
4. Backend kreira odgovor (obično u JSON formatu) i šalje ga nazad na frontend.
5. Frontend prima odgovor, obrađuje podatke i ažurira korisnički interfejs.

Primer AJAX zahteva na frontend-u pomoću JavaScript-a:

// Slanje GET zahteva za dobijanje liste korisnika
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Obrada primljenih podataka
    console.log('Primljeni korisnici:', data.users);
  })
  .catch(error => {
    // Obrada grešaka
    console.error('Greška pri dobijanju korisnika:', error);
  });