¿Cómo ocurre la interacción entre front-end y back-end?

La interacción se realiza a través del protocolo HTTP(S) utilizando diversos métodos (GET, POST, PUT, DELETE, etc.). El frontend envía solicitudes al backend para obtener o enviar datos. El backend procesa estas solicitudes, interactúa con la base de datos si es necesario y envía una respuesta.

Formas principales de interacción:

• API REST: Enfoque más común. El backend proporciona un conjunto de puntos finales (endpoints) a los que el frontend puede acceder para realizar operaciones. Los datos generalmente se transmiten en formato JSON.

  // Ejemplo de respuesta JSON del backend
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternativa a REST. El frontend solicita solo los datos que necesita en una sola consulta. Esto permite reducir la cantidad de solicitudes y el volumen de datos transmitidos.

• WebSockets: Permiten establecer una conexión bidireccional permanente entre el frontend y el backend. Se utilizan en aplicaciones que requieren intercambio de datos en tiempo real (chats, notificaciones).

• Server-Sent Events (SSE): Permiten al backend enviar datos al frontend en una sola dirección a través de una conexión HTTP. Se usan para recibir actualizaciones del servidor sin solicitudes constantes del cliente.

Escenario típico de interacción:

1. El usuario realiza una acción en el frontend (por ejemplo, presionar un botón).
2. El frontend envía una solicitud HTTP a la endpoint correspondiente del backend.
3. El backend recibe la solicitud, la procesa (por ejemplo, realiza una consulta a la base de datos).
4. El backend crea una respuesta (generalmente en formato JSON) y la envía al frontend.
5. El frontend recibe la respuesta, procesa los datos y actualiza la interfaz de usuario.

Ejemplo de solicitud AJAX en el frontend usando JavaScript:

// Envío de una solicitud GET para obtener la lista de usuarios
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Procesamiento de los datos recibidos
    console.log('Usuarios recibidos:', data.users);
  })
  .catch(error => {
    // Manejo de errores
    console.error('Error al obtener usuarios:', error);
  });