Frontend y Backend explicados para principiantes

Frontend y Backend explicados para principiantes

  • Ruben
Introducción: la analogía del restaurante

Una aplicación web se puede entender fácilmente si pensamos en un restaurante:

  • Frontend = la sala y el mesero (lo que ve y toca el cliente).

  • Backend = la cocina (donde se prepara todo, fuera de la vista).

  • La comunicación entre ambos es como el intercambio de órdenes entre mesero y cocina.

¿Qué es el Frontend?

El frontend incluye todo lo que el usuario ve y con lo que interactúa: botones, colores, formularios, animaciones y la estructura de las páginas.

Tecnologías principales:
  • HTML (estructura)
  • CSS (estilos)
  • JavaScript (comportamiento)

Frameworks populares:
  • React
  • Vue
  • Angular
  • Svelte

Ejemplo:
Un botón de "Iniciar sesión" que cambia de color al pasar el cursor y abre un formulario es trabajo del frontend.

¿Qué es el Backend?
El backend es la parte de la aplicación que no se ve: la lógica, las reglas de negocio, el acceso a la base de datos, la autenticación y cualquier operación que requiere procesar datos o guardarlos.

Tecnologías comunes:
  • Lenguajes: Java, Python, Node.js, C#, PHP, Go
  • Frameworks: Spring Boot, Django, Express, Laravel, ASP.NET
  • Bases de datos: MySQL, PostgreSQL, MongoDB

Ejemplo:
Cuando envías tu usuario y contraseña, el backend verifica si existen y te autoriza o no el acceso.

¿Cómo se comunican el Frontend y el Backend?

Se comunican mediante APIs, que son reglas que permiten que un programa pida datos a otro.
La forma habitual de comunicación es usando peticiones HTTP que envían y reciben datos en JSON.

Ejemplo de petición:

Frontend:

GET /api/products
Backend responde:

[
  { "id": 1, "name": "Zapatos", "price": 25.99 },
  { "id": 2, "name": "Camisa", "price": 14.50 }
]
El frontend toma esos datos y los muestra en una tabla o lista.

Ciclo de comunicación (paso a paso)

  1. El usuario realiza una acción en el frontend (por ejemplo, clic en "Buscar").

  2. El frontend envía una solicitud al backend (por ejemplo: GET /api/weather?city=Madrid).

  3. El backend procesa la solicitud (valida, consulta base de datos o servicios externos).

  4. El backend devuelve una respuesta con datos, normalmente en JSON.

  5. El frontend actualiza la interfaz con la información recibida.

Ejemplo práctico: buscar el clima

Frontend envía:

GET /api/weather?city=Madrid
Backend responde:

{ "city": "Madrid", "temp": 18, "state": "Nublado" }
Luego el frontend muestra: Madrid — 18°C — Nublado.

¿Por qué es importante entender esta división?

Porque casi todas las aplicaciones modernas funcionan así:

  • Redes sociales

  • Tiendas online

  • Servicios bancarios

  • Plataformas de streaming

Entenderlo te ayuda a elegir tu camino:

  • Frontend → si te gusta el diseño, las interfaces y lo visual.

  • Backend → si te gustan la lógica, los datos y los algoritmos.

Recursos para empezar

  • Aprende HTML, CSS y JavaScript básico.

  • Crea proyectos simples: una página frontend y una API sencilla backend.

  • Prueba a consumir APIs desde el frontend usando "fetch" o Axios.

Conclusión

Frontend y backend son dos partes que trabajan juntas: el frontend se encarga de la experiencia visual y la interacción, mientras que el backend maneja los datos y las reglas. Ambos se comunican mediante APIs usando peticiones HTTP y datos en formato JSON.
Entender esta relación es el primer paso para crear aplicaciones completas.

  • Desarrollo
Deja un comentario: