# Frontend y backend

> La parte de una app que ves y tocás, y la parte que trabaja detrás.

- Nivel: Básico
- Temas: Software
- URL: https://tidbit.legios.com.ar/es/frontend-and-backend/
- En inglés: [Frontend and backend](https://tidbit.legios.com.ar/frontend-and-backend/)

Casi toda app está partida en dos. El **frontend** es lo que corre en tu dispositivo: las pantallas, los botones y los formularios de un sitio o de una app móvil. El **backend** corre en un servidor en otro lado: revisa tu contraseña, lee y escribe la base de datos, cobra la tarjeta y manda los datos que el frontend muestra. Los dos se hablan a través de una API, casi siempre por HTTPS.

Los frontends se hacen con HTML, CSS y JavaScript en el navegador (muchas veces con un framework como React), o con Swift y Kotlin en los celulares. Los backends se escriben en Python, Java, Go, Node.js y muchos más, y corren en una máquina en la nube, en un contenedor o como una función serverless. Cuando tocás "comprar", el frontend manda un pedido; el backend lo valida, actualiza stock y pedidos, y responde "listo"; el frontend muestra la confirmación.

La división importa porque cada lado tiene problemas distintos. El frontend se preocupa por tamaños de pantalla, velocidad en celulares viejos y accesibilidad; el backend por seguridad, integridad de los datos y atender miles de usuarios a la vez. Todo lo que tiene que ser confiable (precios, permisos) vive en el backend, porque cualquier cosa en el frontend la puede leer y modificar el usuario. Un desarrollador "full-stack" trabaja en los dos.

## Una analogía

Un restaurante. El salón, el menú y los mozos son el frontend; la cocina, la despensa y la caja son el backend. Vos solo ves el salón, pero la cocina decide qué se puede servir de verdad.

## Para quedarse

- Frontend: corre en el dispositivo del usuario, hecho con HTML, CSS, JavaScript o código nativo de celular.
- Backend: corre en servidores, es dueño de los datos y de las reglas del negocio.
- Se comunican por APIs, y el backend nunca confía ciegamente en el frontend.
- "Full stack" quiere decir trabajar en los dos lados.

## Para seguir leyendo

- [Cómo funciona la web (MDN)](https://developer.mozilla.org/es/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)
- [Front end y back end (Wikipedia)](https://es.wikipedia.org/wiki/Front_end_y_back_end)

## Términos relacionados

- [Servidor](https://tidbit.legios.com.ar/es/server/): Una computadora cuyo trabajo es responder pedidos de otras computadoras, todo el día.
- [Base de datos](https://tidbit.legios.com.ar/es/database/): Un depósito ordenado de datos que los programas consultan y actualizan sin riesgo.
- [API](https://tidbit.legios.com.ar/es/api/): El menú de cosas que un programa le deja pedir a otro programa.
- [HTTPS](https://tidbit.legios.com.ar/es/https/): El candadito del navegador: tráfico web que nadie en el medio puede leer.
- [HTML](https://tidbit.legios.com.ar/es/html/): El formato de texto que describe qué hay en una página web: títulos, párrafos, links.
- [CSS](https://tidbit.legios.com.ar/es/css/): El lenguaje que decide cómo se ve una página web: colores, letras, espacios.
- [JavaScript](https://tidbit.legios.com.ar/es/javascript/): El lenguaje de programación que corre en las páginas web y las vuelve interactivas.
- [Navegador web](https://tidbit.legios.com.ar/es/web-browser/): La app que trae páginas web desde internet y las dibuja en tu pantalla.