Frontend: ¿qué es y para qué se utiliza en desarrollo web?
Dentro de las especialidades de desarrollo web tenemos dos grandes áreas. Una de ellas es el frontend y otra el backend. Son términos ampliamente utilizados y por tanto, no existe una traducción específica al español. Una vez visto qué es el backend, en este post vamos a abordar con todo detalle el área del frontend para poder entender ambas partes en conjunto.
¿Qué es frontend en desarrollo web?
El término frontend, o front-end, se utiliza para referirse a parte del desarrollo web que involucra todo aquello que el usuario ve, es decir todas las partes del desarrollo que sirven para que las aplicaciones se comuniquen con el usuario.
Esto incluye toda la parte de presentación y estilizado del contenido y todo lo que respecta a la interacción con el usuario. Dentro del frontend, por tanto, está el diseño del sitio web, la maquetación y la definición de los componentes de interfaz gráfica. En general, es todo lo que contribuye a la experiencia visual del usuario.
Componentes clave del frontend
Dentro del ámbito de trabajo del frontend encontramos diversos componentes o áreas de trabajo. Los más importantes son los siguientes.
Estructura (HTML) para crear el contenido
El área más básica del frontend es la creación del contenido de las páginas web. HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje usado para esta definición y consiste en una estructura de marcas o etiquetas que sirven para definir elementos como párrafos, encabezados, imágenes, listas, etc.
Con HTML, lo único importante es crear una estructura adecuada para el contenido, dejando muy clara cuál es la función de cada uno de los textos, enlaces o elementos multimedia de la página web.
Estilo (CSS) para el diseño y presentación
A continuación, el segundo lenguaje básico del área de frontend es el CSS (Hojas de Estilo en Cascada). Con el lenguaje CSS se define cómo se muestra el contenido estructurado mediante el HTML. Es decir, mientras que HTML sirve para expresar el contenido de la página, con CSS se define cómo debe de verse ese contenido en la pantalla del navegador.
A través de CSS, los diseñadores deben determinar colores, tipografías, espaciados, así como otros aspectos visuales del sitio web como sombras, colores de fondo, animaciones y mucho más.
Lo importante del binomio HTML y CSS es que exista una fuerte separación entre contenido y presentación, de modo que para un mismo HTML pudiéramos cambiar radicalmente el aspecto de la página solamente modificando el CSS.
Interacción (JavaScript) para la funcionalidad dinámica
Como tercer lenguaje en la web tenemos el JavaScript, que nos permite definir todos los aspectos relacionados con el comportamiento de la página y que sirve para añadir interactividad a un sitio web.
Con JavaScript se debe indicar qué pasa cuando el usuario realiza acciones sobre los elementos, hace clic en los campos de formulario, escribe en ellos, pasa el ratón sobre determinadas partes de la página, etc. Además, JavaScript nos permite manipular la página dinámicamente, de modo que se dé respuesta visual a las acciones del usuario sobre ella.
Optimización para diferentes dispositivos (responsive design)
Por último, pero también muy importante en la actualidad, tenemos el diseño responsive, que es todo lo que tiene que ver con la adaptabilidad de la página a los distintos medios desde los que se puede consumir.
En la web actual, que es consumida por un elevado número de dispositivos con características distintas, el responsive design garantiza que un sitio web se vea y funcione bien en todo momento. Para ello, y gracias a los lenguajes mencionados anteriormente pero especialmente al CSS, se debe personalizar la experiencias de usuario de un mismo sitio web, de manera que se puedan consumir adecuadamente desde ordenadores, móviles, tablets, relojes, etc.
Herramientas y tecnologías frontend
El mundo frontend se caracteriza por un extremadamente rico ecosistema de herramientas que permiten a los desarrolladores conseguir su trabajo de una manera fiable y productiva. Entre ellas podemos destacar:
Uso de frameworks como Bootstrap y Materialize
Los frameworks CSS son bases de código, principalmente CSS y en ocasiones también Javascript, con las que los desarrolladores pueden partir para la creación de estilos e interfaces de usuario.
Ejemplos de frameworks CSS tenemos Bootstrap o Materialize, pero hay muchos otros como Tailwind CSS, Bulma o Fundation. Estas herramientas ofrecen toda una variedad de componentes y estilos listos ya listos para usar que permiten desarrollar de manera consistente y aceleran el proceso de diseño.
Librerías JavaScript como jQuery y React
Luego tenemos las librerías Javascript, que nos ofrecen una base de código para la realización de interfaces de usuario y la definición de los comportamientos de interacción. Estas librerías permiten desarrollar de una manera más cómoda los componentes de interfaz gráfica, a la vez que solucionan posibles problemas de compatibilidad con los navegadores.
Entre las librerías más populares encontramos jQuery, que es extremadamente usada en el mundo de la web, pero también otras librerías más modernas como React, que permiten crear interfaces de usuario interactivas y reactivas de manera más eficiente y estructurada. Otros ejemplos de librerías serían Lit, Svelte o Alpine. En este área también encontramos frameworks como Vue o Angular.
Preprocesadores CSS como Sass y Less
Los preprocesadores son unas herramientas más opcionales, que están orientadas a la estructuración del CSS y que permiten escribir el código de una manera más organizada y eficiente. Sin embargo, requieren añadir un paso adicional al flujo de desarrollo porque el código de los preprocesadores se debe compilar a CSS puro, que los navegadores sí puedan interpretar.
Pruebas y Depuración en el frontend
Paralelamente en el mundo frontend encontramos diversas herramientas para las pruebas del software, pruebas unitarias y pruebas de integración. Algunos ejemplos son Mocha o Jest. Además, existen diversas herramientas para la depuración del código, principalmente las herramientas de desarrollo incorporadas en los navegadores.
Colaboración entre frontend y backend
Hemos mencionado al principio que otra de las grandes áreas de desarrollo web es el backend, que se encarga de la programación del lado del servidor, ofreciendo el soporte fundamental para las aplicaciones, la persistencia de los datos y la seguridad.
Tanto backend como frontend deben colaborar entre sí en los siguientes términos:
Interacción y comunicación con el backend
El frontend se dedica a definir los procesos de interacción con el usuario. Pero muchos de estos procesos implican la comunicación con el servidor para acceder a las bases de datos, iniciar sesión en la aplicación, autorizar determinadas acciones o realizar pagos electrónicos, entre otras muchas cosas.
Esta colaboración es esencial para la funcionalidad de sitios web modernos y se realiza a menudo a partir de la tecnología que conocemos como Ajax.
Integración de elementos dinámicos en la interfaz
Cuando el código del frontend solicita la realización de servicios en la parte del backend éste responde con datos que se deben representar dinámicamente en los elementos de la página web.
Por ejemplo, en el frontend se puede haber solicitado un listado de fracturas, para lo cual el back-end responde con datos puros, a menudo en lenguaje JSON. Cuando esos datos se reciben en el frontend, se deben generar de forma dinámica las listas, tablas o gráficos para que los usuarios puedan ver la información de una manera adecuada.
Optimización de la carga de página y experiencia de usuario
Es fundamental que la información fluya rápidamente entre el frontend y el backend para asegurar tiempos de carga rápidos y una experiencia de usuario fluida. La interacción entre frontend y los servicios web del lado del backend facilita estas cuestiones, ya que los contenidos que se transfieren de uno a otro lado son básicamente datos en crudo.
Tendencias y futuro del frontend development
Ya para acabar vamos a comentar algunas de las tendencias actuales y futuras en el mundo del frontend.
Enfoque en Progressive Web Apps (PWA)
Las PWA o aplicaciones progresivas permiten combinar lo mejor de las aplicaciones web con lo mejor de las aplicaciones móviles. Ofrecen respuesta a carencias y necesidades frecuentes en el mundo del desarrollo de aplicaciones web, como el trabajo offline, las notificaciones push o la instalación de las aplicaciones en los dispositivos.
Integración de tecnologías emergentes como WebAssembly
WebAssembly es una tecnología existente en los navegadores modernos que permite ejecutar código en lenguajes de naturaleza distinta de JavaScript. Por ejemplo, permite ejecutar código de medio nivel, como C o C++, y que pueden aprovecharse del rendimiento elevado de éstos. Esta tecnología es esencial para que la web pueda cubrir nuevas demandas de las aplicaciones que requieren un rendimiento nativo y el uso de servicios más cercanos al sistema operativo.
Importancia de la accesibilidad y usabilidad universal
Otra de las tendencias que estamos apreciando en el desarrollo frontend es la accesibilidad, así como la usabilidad. Garantizar que los sitios web sean accesibles a todo tipo de personas es una necesidad actual de la web por muchos motivos. Por su parte, la usabilidad nos permite que los sitios web sean fáciles de usar y comprensibles para todos.
Evolución de herramientas y frameworks frontend
Otro de los aspectos más marcantes del panorama Frontend es la aparición constante de numerosas herramientas o su sofisticación. El ecosistema frontend está en constante evolución y todas las semanas o meses encontramos nuevas librerías o frameworks, así como nuevas versiones que permiten llegar más lejos con menos esfuerzo.
Impacto en la experiencia del usuario en dispositivos móviles
Desde hace ya tiempo, la web es más usada desde dispositivos móviles que desde ordenadores de escritorio, por tanto, es especialmente importante ofrecer a los usuarios de los dispositivos experiencias adaptadas a ellos. Todo esto lleva al desarrollo frontend a centrarse aún más en el diseño responsive y la optimización para móviles y tablets.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.