Come avviene l'interazione tra front-end e back-end?

L'interazione avviene tramite il protocollo HTTP(S) utilizzando diversi metodi (GET, POST, PUT, DELETE, ecc.). Il frontend invia richieste al backend per ottenere o inviare dati. Il backend elabora queste richieste, interagisce con il database se necessario e invia una risposta.

Principali modalità di interazione:

• API REST: Approccio più diffuso. Il backend fornisce un insieme di endpoint ai quali il frontend può accedere per eseguire operazioni. I dati vengono generalmente trasmessi in formato JSON.

  // Esempio di risposta JSON dal backend
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternativa a REST. Il frontend richiede solo i dati di cui ha bisogno in una singola richiesta. Questo permette di ridurre il numero di richieste e la quantità di dati trasmessi.

• WebSockets: Permettono di stabilire una connessione bidirezionale permanente tra frontend e backend. Utilizzati in applicazioni che richiedono scambio di dati in tempo reale (chat, notifiche).

• Server-Sent Events (SSE): Permettono al backend di inviare dati al frontend in modo unidirezionale tramite una connessione HTTP. Utilizzati per ricevere aggiornamenti dal server senza richieste continue dal client.

Scenario tipico di interazione:

1. L'utente compie un'azione sul frontend (ad esempio, clicca un pulsante).
2. Il frontend invia una richiesta HTTP al punto finale corrispondente del backend.
3. Il backend riceve la richiesta, la elabora (ad esempio, esegue una query al database).
4. Il backend crea una risposta (solitamente in formato JSON) e la invia al frontend.
5. Il frontend riceve la risposta, elabora i dati e aggiorna l'interfaccia utente.

Esempio di richiesta AJAX nel frontend usando JavaScript:

// Invio di una richiesta GET per ottenere la lista degli utenti
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Elaborazione dei dati ricevuti
    console.log('Utenti ricevuti:', data.users);
  })
  .catch(error => {
    // Gestione degli errori
    console.error('Errore nel recupero degli utenti:', error);
  });