Frontend y Backend en Aplicaciones Web
Comprende cómo se divide una aplicación web moderna entre la parte visual y la lógica del servidor, identificando tecnologías y flujos básicos.
¿Qué es el Frontend?
El Frontend es la parte visual de una aplicación web.
Es todo lo que el usuario puede ver e interactuar directamente desde el navegador.
Incluye:
- Botones
- Menús
- Formularios
- Imágenes
- Animaciones
- Diseño visual
El frontend se ejecuta principalmente en el navegador del usuario.
Ejemplos de Frontend
| Aplicación | Elemento Frontend |
|---|---|
| YouTube | Reproductor y catálogo |
| Netflix | Interfaz de películas |
| Moodle | Panel de cursos |
| Amazon | Buscador y carrito |
¿Qué es el Backend?
El Backend es la parte lógica y funcional del sistema.
Se ejecuta en servidores y se encarga de:
- Procesar información
- Validar usuarios
- Guardar datos
- Gestionar sesiones
- Conectarse con bases de datos
- Responder solicitudes
El usuario normalmente no ve el backend directamente.
Ejemplos de tareas Backend
| Acción | Función del Backend |
|---|---|
| Iniciar sesión | Validar usuario y contraseña |
| Comprar un producto | Procesar pedido |
| Ver videos recomendados | Generar recomendaciones |
| Guardar una tarea | Registrar datos en base de datos |
Tecnologías Frontend
Las tecnologías más comunes son:
| Tecnología | Función |
|---|---|
| HTML | Estructura |
| CSS | Diseño visual |
| JavaScript | Interactividad |
| React | Interfaces modernas |
| Vue | Aplicaciones dinámicas |
| Tailwind CSS | Estilos rápidos |
Frontend Moderno
Actualmente muchas aplicaciones funcionan como:
- SPA (Single Page Application)
- Interfaces dinámicas
- Aplicaciones responsivas
- PWAs
Ejemplos:
- Gmail
- Discord Web
- Google Maps
Tecnologías Backend
El backend puede desarrollarse con distintos lenguajes y frameworks.
| Tecnología | Uso |
|---|---|
| Node.js | JavaScript en servidor |
| Laravel | PHP moderno |
| Django | Python |
| Spring Boot | Java |
| Express | APIs rápidas |
| ASP.NET | Aplicaciones empresariales |
Funciones comunes del Backend
- APIs
- Autenticación
- Gestión de usuarios
- Manejo de archivos
- Seguridad
- Conexión con bases de datos
Bases de Datos
Las bases de datos almacenan la información de una aplicación.
Ejemplos de información almacenada:
- Usuarios
- Contraseñas cifradas
- Productos
- Calificaciones
- Mensajes
- Historial
Bases de datos populares
| Base de Datos | Tipo |
|---|---|
| MySQL | Relacional |
| PostgreSQL | Relacional |
| MongoDB | NoSQL |
| Firebase | Tiempo real |
| SQLite | Ligera |
¿Cómo se comunican Frontend y Backend?
La comunicación ocurre mediante solicitudes HTTP o HTTPS.
El frontend:
- Envía una petición
- Espera respuesta
- Muestra resultados
El backend:
- Recibe la petición
- Procesa información
- Consulta base de datos
- Devuelve respuesta
Ejemplo sencillo
Cuando un usuario inicia sesión:
Frontend
- Captura correo y contraseña
- Envía datos
Backend
- Verifica credenciales
- Consulta base de datos
- Responde si el acceso es válido
Resultado
- El usuario entra al sistema
Flujo de una Petición Web
Flujo básico
- Usuario abre una página
- Navegador envía solicitud
- Servidor procesa petición
- Base de datos responde
- Servidor devuelve datos
- Frontend muestra información
Ejemplo real
Netflix
| Componente | Función |
|---|---|
| Frontend | Mostrar catálogo |
| Backend | Gestionar recomendaciones |
| Base de datos | Usuarios y películas |
| API | Comunicación entre servicios |
Caso Práctico · Sistema Escolar
Imaginemos un sistema escolar web.
Frontend
Permite:
- Ver materias
- Consultar calificaciones
- Subir tareas
- Navegar por el sistema
Backend
Se encarga de:
- Validar alumnos
- Guardar tareas
- Consultar calificaciones
- Gestionar usuarios
Base de datos
Guarda:
- Alumnos
- Maestros
- Materias
- Calificaciones
Actividad · Analizando Aplicaciones Web
Selecciona dos aplicaciones web que utilices frecuentemente.
Analiza:
- ¿Qué elementos pertenecen al Frontend?
- ¿Qué acciones requieren Backend?
- ¿Qué datos crees que se almacenan?
- ¿Qué tecnologías podrían estar usando?
Aplicaciones sugeridas:
- YouTube
- Netflix
- Google Classroom
- Amazon
- Moodle
- Spotify Web
Conclusión
Explica por qué Frontend y Backend necesitan trabajar juntos para que una aplicación web funcione correctamente.
Cierre
Las aplicaciones web modernas funcionan gracias a la colaboración entre:
- Frontend
- Backend
- APIs
- Bases de datos
Comprender esta separación es fundamental para el desarrollo web moderno y será la base para las siguientes prácticas del curso.