Al principio de tu viaje de desarrollo web, frecuentemente oirás hablar de las partes front-end y back-end de un sitio web (también conocido como aplicación web). Pero, ¿qué significan exactamente estos términos?
¿Qué es Front-end?
El front-end es todo lo que un usuario ve e interactúa con tu sitio web. Es la parte cliente de una aplicación web.
Por ejemplo, este artículo. Esta es una entrada en WordPress y ahora la estás leyendo. En la parte superior de la página también puedes ver el logotipo de Closrr, etc.
Representa el front-end de la página web que estás viendo.
¿Qué partes de una aplicación Web se consideran Front-end?
El front-end es todo aquello visual con lo que el usuario entra en contacto.
Son todas las partes con las que interactúan directamente.
Es todo el contenido y los estilos.
Son los botones y los diferentes efectos hover antes de que un usuario haga clic en un enlace.
Son los formularios de contacto con varios campos de entrada, los cuadros de búsqueda y los menús desplegables.
El diseño, el texto y los colores.
Son las imágenes y los vídeos.
Sin embargo, no se trata sólo de los estilos.
También es la rapidez con que se carga el sitio web, lo fácil que es navegar por él y lo accesible que es para las personas con discapacidad.
Se trata de su usabilidad y capacidad de respuesta en distintos dispositivos y navegadores.
Esencialmente, el front-end son todas las partes de una aplicación web que crean la apariencia de la misma.
¿Qué es el back-end?
El back-end se ocupa de las tecnologías responsables de almacenar y manipular de forma segura los datos de los usuarios. Es la parte asociada a toda la lógica oculta que impulsa los sitios web con los que interactúan los usuarios.
El back-end se considera la parte del lado del servidor de una aplicación web.
El back-end es todo el funcionamiento interno oculto y los procesos entre bastidores de una aplicación web.
Se refiere a todo lo que ocurre debajo del capó y a todos los componentes necesarios para que el front-end funcione correctamente y sin problemas.
Se asegura de que todo funciona de forma óptima.
Esencialmente, el back-end es aquello a lo que los usuarios finales (visitantes del sitio web) no tienen acceso directo, o con lo que no interactúan directamente, y de lo que muy probablemente no son conscientes cuando utilizan una aplicación.
Una visión general del funcionamiento de Back-end para principiantes
El back-end se encarga de recibir las peticiones de un cliente (es decir, una petición realizada por un usuario). Procesa las solicitudes entrantes y se asegura de obtener los datos adecuados asociados al usuario correcto.
A continuación, envía una respuesta al cliente. Los datos necesarios del usuario se presentan visualmente de forma agradable, con código front-end creado por el motor del sitio web, al usuario adecuado que tenga acceso a ellos.
El back-end consta de:
- El servidor, que es un programa que espera y escucha las peticiones entrantes del cliente. Se comunica con la base de datos enviando consultas a la misma. Cuando la base de datos responde con información, el servidor obtiene los datos necesarios correctos.
Lo consigue gracias a una aplicación que se ejecuta en el servidor y que contiene la lógica necesaria que reúne la información solicitada, así como los recursos para el usuario adecuado. Los scripts back-end del lado del servidor, escritos en un lenguaje de programación de scripts back-end, se encargan de procesar las peticiones.
- En el caso de WordPress, la información del sitio web se gestiona en la sección /wp-admin del sitio web. Es decir: ejemplo.com/wp-admin/
Por último, el servidor envía una respuesta al cliente.
- La base de datos, que es como el «cerebro» de una aplicación. Las bases de datos son programas que se utilizan para organizar y almacenar todos los activos, contenidos e información de una aplicación de forma que se pueda acceder a ellos y recuperarlos, gestionarlos y actualizarlos fácilmente.
Ejemplos de funciones de back-end
Tomemos un ejemplo real para ilustrar las distintas funcionalidades de back-end disponibles en las aplicaciones web modernas. Supongamos que eres miembro de una plataforma de suscripción a entrenamientos de pago.
Para iniciar sesión:
- Tendrás que introducir tu dirección de correo electrónico y contraseña en un campo de entrada de usuario.
- Habría comprobaciones básicas de validación que tendrían que pasar. Las validaciones garantizan que los campos obligatorios no estén vacíos y que la dirección de correo electrónico tenga el formato correcto.
- A continuación, se comprueba si existe como usuario en la base de datos mediante consultas a la base de datos, para ver si tu dirección de correo electrónico y contraseña son correctas.
También habría comprobaciones para ver si la dirección de correo electrónico y la contraseña que proporcionaste coinciden con la combinación de correo electrónico y contraseña almacenada en la base de datos cuando creaste tu cuenta. - Si la dirección de correo electrónico y la contraseña son incorrectas, aparecerá un mensaje de error diciendo que la combinación no existe.
- Si todo es correcto, se te dirigirá una página, con una señal visual que te indicará que has iniciado sesión. Puede ser un mensaje de «Bienvenida» que incluya tu nombre o tu nombre de usuario.
Para elegir un entrenamiento:
- La base de datos almacena todos los datos en raw.
Los entrenamientos ya completados se almacenan en la base de datos. Lo mismo ocurre con las listas de reproducción que hayas creado o marcado como favoritas y que quieras volver a ver. - También puedes ver todos los entrenamientos disponibles y filtrarlos para que sólo aparezca una categoría concreta. Por ejemplo, puedes escribir una palabra clave en el cuadro de búsqueda, como abdominales, brazos, tren inferior o tren superior.
Otra forma podría ser elegir entre una de las categorías disponibles en el sitio, como yoga, estiramientos, HIIT o fuerza. La base de datos revisará todos los entrenamientos almacenados en ella, pero tu sólo verás los resultados filtrados de la categoría concreta que hayas especificado en tu búsqueda.
Para pagar la suscripción:
- La aplicación sería capaz de aceptar información de tarjetas de crédito u otras opciones de pago y enviar esa información de forma segura al banco.
- También actualizaría el pago en el momento oportuno. Dependiendo de la suscripción, habría una actualización mensual o anual recurrente, asegurándose de que cada vez se cobre la cantidad correcta de dinero de tu tarjeta.
De todo esto se encarga el back-end de una aplicación web.