Muchos clientes que quieren que les desarrollemos una página o sitio web, cuando se les explica lo que vas a hacer y cómo lo vas a hacer siempre te miran mal cuando escuchan los términos «Frontend» y «Backend». Perdón, rectifico, te miran mal desde que empiezas a hablar, pero sobre todo en el momento en que se les describe qué es el «front» y qué es el «back» cuando se pierden del todo.
Pienso que estos dos términos son muy importantes conocerlos en el ámbito del desarrollo de software porque las mayoría de las veces explica muy bien el porqué del coste y el tiempo de este tipo de desarrollos. Hay que tener en cuenta que, por ejemplo, un «software» de escritorio, la mayoría de las veces, es un simple «paquete» creado en un mismo lenguaje; y que consta de un único ejecutable. En cambio, un desarrollo web, como mínimo tenemos estas dos entidades creadas en, al menos, dos tipos o lenguajes de programación.
Vamos al lío
Para comenzar, lo primero que hay que comprender es el concepto de renderizado de sitios. Y digo renderizado porque una web se muestra, dibuja -o renderiza- en un navegador web. Esto quiere decir que una web, por sí sola no se puede mostrar o interactuar con ella sin este programa. En términos sencillos, una web no es más que un fichero de texto con un formato especial llamado HTML. HTML es un lenguaje de marcado que los desarrolladores web utilizan para crear páginas webs. Luego, llega el navegador, que puede ser Chrome, Firefox o Safari, lee e interpreta ese HTML y lo -como digo- renderiza.
Imaginemos una web muy sencilla tipo Landing. Una web con un título, una imagen y una descripción. Todo ese contenido está en un fichero HTML guardado en un servidor. Cuando se accede a esa web usando un navegador, éste enviá una solicitud de contenido, el servidor procesa esta solicitud y crea una respuesta que se envía de vuelta al navegador. Esta respuesta no es más que el contenido del fichero HTML. Aquí tenemos muy claro que el frontent es el fichero HTML y en el Backend sólo tenemos al servidor web que es el que se encarga de recibir las peticiones y entregar el HTML. Por ahora, como vemos, el Backend hace más bien poco.
Ahora, vamos a complicarlo un poco. Imaginemos de nuevo que queremos registrar el número de visitas que tiene esta web y queremos mostrar ese número en la página. Desde luego es muy fácil hacerlo con Google Analytics, pero vamos a crear nuestro propio sistema para este ejemplo. Lo primero que necesitamos es una base de datos para almacenar ese número de visitas de forma persistente. Esta base de datos estará en el servidor y puede ser de tipo Mysql, PostgreSQL, o MongoDB (esto es lo de menos para este ejemplo).
Ya, para empezar, al estar en el servidor, la base de datos está en el Backend. En esta base de datos tendremos un contador que se incrementará en uno por cada visita. A continuación hay que crear un pequeño programa (o script) con la siguiente tarea: cada vez que el servidor reciba una petición para mostrar el código HTML, tiene que acceder a la base de datos y aumentar ese contador; y después devolver el HTML para que lo muestre el navegador. Este programa estará creado con PHP o con Python, por ejemplo.
Resumiendo, ese programa -más la base de datos- se ejecutará en el Backend y en el Frontend seguimos teniendo nuestro HTML. Complicándolo un poco más, podemos mostrar el número de visitas en nuestra Landing, aunque es muy fácil hacelo: Una vez que el Backend aumenta el contador y antes de enviar el HTML al cliente, podemos modificar dinámicamente ese HTML y añadir el número de visitas. De modo que en cada petición ese HTML será diferente porque tenemos como variable el número de visitas.
Este sistema, además de potente, es muy seguro porque el usuario final, el que accede a nuestra Landing, no tiene ni idea de qué está pasando en el back; ni tiene acceso a la base de datos ni nada. El cliente o Frontend sólo sabe que envía una petición a un servidor y éste le devuelve un código HTML para mostrar y que además éste se genera de forma dinámica porque por cada acceso va a mostrar un número diferente de visitas.
También podemos complicarlo por el lado del Frontend, y es añadir funcionalidades a ese HTML. Por ejemplo, el navegador puede alterar ese código casi como quiera y para indicar o guiar al navegador de qué tiene que hacer se usa el lenguaje de facto de la web, es decir JavaScript. Con esto, por ejemplo, podemos mostrar u ocultar elementos modificar su estilo o añadir y quitar contenido de forma dinámica. En este caso el Backend no tiene ni idea de qué está ocurriendo en el front, a no se ser que creemos un sistema para ello.
Fíjese querido lector como en este simple ejemplo ya tenemos PHP o Python para el script del servidor, Mysql para la base de datos, HTML como formato del contenido y Javascript para modificar o dinamizar ese contenido HTML.
A partir de aquí todo se puede complicar muchísimo. Se puede crear un sitio de forma que todo el contenido se genere en el back y que en la parte del front exista un mínimo de código, o incluso lo contrario, usar el Backend para solamente servir el contenido sin procesar y que sea el Front el que haga todo el trabajo. Desde luego, esto último se está haciendo muy popular últimamente con la llegada de bibliotecas de JavaScript como Angular, React y Vue que facilitan la creación de este tipo de sitios. Populares son las «Single-page application»: El servidor sirve un html completo en una sola petición y el front se encarga de crear las diferentes vistas y páginas. De modo que una vez accedida a la web, sólo es necesario el Backend para acceder a la base de datos que generalmente se hace vía API.
En Codefriends dominamos y trabajamos con todos estos paradigmas de desarrollo. Así que si, querido lector, está interesado en tener su sitio web sólo tiene que ponerse en contacto con nosotros y estaremos encantados de escucharle.