Hoe verloopt de interactie tussen front-end en…

De interactie vindt plaats via het HTTP(S)-protocol met gebruik van verschillende methoden (GET, POST, PUT, DELETE, enz.). De frontend stuurt verzoeken naar de backend om gegevens te verkrijgen of te verzenden. De backend verwerkt deze verzoeken, communiceert indien nodig met de database en stuurt een antwoord.

Belangrijkste manieren van interactie:

REST API: De meest gebruikte aanpak. De backend biedt een reeks eindpunten (endpoints) waar de frontend toegang toe heeft om bewerkingen uit te voeren. Gegevens worden meestal in JSON-formaat verzonden.

// Voorbeeld van JSON-antwoords van de backend
{
  "users": [
    {
      "id": 1,
      "name": "Alex"
    },
    {
      "id": 2,
      "name": "Elena"
    }
  ]
}

GraphQL: Alternatief voor REST. De frontend vraagt alleen de gegevens die hij nodig heeft in één verzoek. Dit vermindert het aantal verzoeken en de hoeveelheid verzonden gegevens.
WebSockets: Stellen het opzetten van een permanente, bidirectionele verbinding tussen frontend en backend mogelijk. Gebruikt voor toepassingen die realtime gegevensuitwisseling vereisen (chats, meldingen).
Server-Sent Events (SSE): Stellen de backend in staat om gegevens in één richting naar de frontend te sturen via een HTTP-verbinding. Gebruikt voor het ontvangen van updates van de server zonder voortdurende verzoeken van de client.

Typisch interactiescenario:

De gebruiker voert een actie uit op de frontend (bijvoorbeeld op een knop klikken).
De frontend stuurt een HTTP-verzoek naar het overeenkomstige eindpunt van de backend.
De backend ontvangt het verzoek, verwerkt het (bijvoorbeeld door een databasequery uit te voeren).
De backend maakt een antwoord (meestal in JSON-formaat) en stuurt het naar de frontend.
De frontend ontvangt het antwoord, verwerkt de gegevens en werkt de gebruikersinterface bij.

Voorbeeld van AJAX-verzoek op de frontend met JavaScript:

// Verzenden van een GET-verzoek om de gebruikerslijst op te halen
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Verwerking van de ontvangen gegevens
    console.log('Ontvangen gebruikers:', data.users);
  })
  .catch(error => {
    // Foutafhandeling
    console.error('Fout bij het ophalen van gebruikers:', error);
  });

Hoe verloopt de interactie tussen front-end en back-end?