¿Qué es el Frontend?

El frontend y el backend son dos niveles in­de­pe­n­die­n­tes de software que se co­m­ple­me­n­tan mu­tua­me­n­te. Si ima­gi­na­mos que el software es como un re­s­tau­ra­n­te, el frontend co­m­pre­n­de­ría la fachada exterior, la de­co­ra­ción interior, el menú y el personal de servicio. En cambio, el backend, en esta analogía, co­m­pre­n­de­ría la cocina y la gestión, in­clu­ye­n­do a los empleados y los procesos ad­mi­ni­s­tra­ti­vos y de pro­du­c­ción.

¿Qué es el frontend?

El frontend es la parte de una página web o apli­ca­ción que los usuarios ven y con la que in­ter­ac­túan. Se centra en presentar la in­fo­r­ma­ción de manera atractiva y facilitar las in­ter­ac­cio­nes del usuario. El diseño del frontend se adapta a las ne­ce­si­da­des y ex­pe­c­ta­ti­vas de los usuarios, prio­ri­za­n­do una ex­pe­rie­n­cia de usuario positiva (user ex­pe­rie­n­ce, UX).

El frontend es una capa de software que se ejecuta en el cliente. Aunque parece estar rea­li­za­n­do todo el trabajo, en realidad, se comunica co­n­s­ta­n­te­me­n­te con el backend, que se encarga del pro­ce­sa­mie­n­to de datos. Esta co­mu­ni­ca­ción se realiza a través de in­te­r­fa­ces de pro­gra­ma­ción conocidas como API.

Siguiendo el principio de “Se­pa­ra­tion of concerns”, en español “Se­pa­ra­ción de re­s­po­n­sa­bi­li­da­des”, el backend y el frontend se de­sa­rro­llan como capas in­de­pe­n­die­n­tes pero co­m­ple­me­n­ta­rias. Ambas capas siempre son ne­ce­sa­rias para crear un software ple­na­me­n­te funcional. Un backend sin el frontend es como una fachada sin nada detrás.

¿Quién utiliza el frontend?

Existen dos grupos de usuarios di­fe­re­n­tes que utilizan el frontend:

1. Usuarios que in­ter­ac­túan con el frontend.
2. De­sa­rro­lla­do­res de frontend que co­n­s­tru­yen y mantienen el frontend.

Veamos a co­n­ti­nua­ción las si­mi­li­tu­des y di­fe­re­n­cias entre ambos grupos a la hora de utilizar el frontend.

¿Cómo utilizan los usuarios el frontend?

Cuando los vi­si­ta­n­tes exploran una página web, navegan entre distintas secciones haciendo clic en enlaces. Consumen contenido mu­l­ti­me­dia y en forma de texto, e in­ter­ac­túan con botones y otros elementos in­ter­ac­ti­vos, como los fo­r­mu­la­rios HTML con menús de­s­ple­ga­bles, campos de entrada y botones.

Desde un punto de vista co­n­ce­p­tual, la ex­pe­rie­n­cia es similar a la de los usuarios que inician sesión en una apli­ca­ción. Tienen un abanico más amplio de opciones de in­ter­ac­ción en el frontend, in­clu­ye­n­do botones es­pe­cia­li­za­dos. A pesar de esto, las in­ter­ac­cio­nes siguen limitadas a rutas pre­de­fi­ni­das, aunque en algunos casos, existe la opo­r­tu­ni­dad de crear contenido uno mismo.

¿Cómo trabajan los de­sa­rro­lla­do­res en el frontend?

En contraste con las li­mi­ta­cio­nes de los usuarios en el frontend, los de­sa­rro­lla­do­res de frontend tienen un enfoque co­m­ple­ta­me­n­te diferente. Estos pro­fe­sio­na­les de la pro­gra­ma­ción son re­s­po­n­sa­bles de crear, mantener y seguir de­sa­rro­lla­n­do el frontend. A menudo, trabajan en co­la­bo­ra­ción con di­se­ña­do­res, ya que la facilidad de uso es un elemento fu­n­da­me­n­tal del diseño web.

¿En qué consiste exac­ta­me­n­te el de­sa­rro­llo de frontend? Un ejemplo del eco­si­s­te­ma de WordPress nos ilustra esta labor. Los de­sa­rro­lla­do­res de frontend crean Widgets de WordPress y pla­n­ti­llas de WordPress, que otorgan a una página web de WordPress un diseño atractivo.

La uti­li­za­ción de una plantilla de WordPress creada por de­sa­rro­lla­do­res de frontend facilita la in­te­gra­ción del contenido de las distintas páginas y pu­bli­ca­cio­nes en es­tru­c­tu­ras pre­de­fi­ni­das. Todo ello garantiza una pre­se­n­ta­ción uniforme del contenido en tu página web.

Los de­sa­rro­lla­do­res de frontend también crean páginas de destino y utilizan elementos de call to action (CTA) para guiar a los vi­si­ta­n­tes por la página web. El diseño re­s­po­n­si­vo es es­pe­cia­l­me­n­te im­po­r­ta­n­te en este contexto.

¿Cuáles son los pri­n­ci­pa­les fra­me­wo­r­ks de frontend?

Frontend es lo que ven los usuarios en sus di­s­po­si­ti­vos finales (“clientes”). Los frontends se di­s­ti­n­guen en dos tipos: los frontends web, que funcionan en los na­ve­ga­do­res web, y los frontends nativos, que están diseñados es­pe­cí­fi­ca­me­n­te para un sistema operativo en pa­r­ti­cu­lar, como Windows, macOS, Android o iOS. Los métodos modernos de de­sa­rro­llo mu­l­ti­pla­ta­fo­r­ma permiten crear varios frontends a partir de una base común.

Los frontends web incluyen código en los lenguajes web HTML, CSS y Ja­va­S­cri­pt, que co­rre­s­po­n­den a los tres aspectos básicos de la pro­gra­ma­ción en Internet:

Si bien es posible crear frontends di­re­c­ta­me­n­te uti­li­za­n­do estos tres lenguajes web, no sería eficiente, ya que exigiría mucho esfuerzo in­ne­ce­sa­rio. Aquí es donde los fra­me­wo­r­ks de frontend si­m­pli­fi­can co­n­si­de­ra­ble­me­n­te el trabajo.

De­pe­n­die­n­do del campo de apli­ca­ción, los fra­me­wo­r­ks de frontend cumplen diversas funciones. Amplían el alcance de los lenguajes web, facilitan la conexión con el backend y aseguran una co­n­s­ta­n­cia en las funciones entre los distintos na­ve­ga­do­res. Algunos fra­me­wo­r­ks también in­co­r­po­ran técnicas para mejorar el re­n­di­mie­n­to.

Los fra­me­wo­r­ks más recientes, como React y Vue, se centran más en la reac­ti­vi­dad; los cambios rea­li­za­dos en los datos se reflejan de inmediato en el frontend. Además, estos fra­me­wo­r­ks hacen de los co­m­po­ne­n­tes el concepto central, creando unidades en­ca­p­su­la­das y re­uti­li­za­bles de elementos de la interfaz de usuario reactivos.

Según el enfoque adoptado, existen fra­me­wo­r­ks de frontend puros de CSS o de Ja­va­S­cri­pt. También se distingue entre fra­me­wo­r­ks de frontend web y mu­l­ti­pla­ta­fo­r­ma.

De­sa­rro­llar frontends basados en co­m­po­ne­n­tes con fra­me­wo­r­ks reactivos

En estos fra­me­wo­r­ks de frontend basados en Ja­va­S­cri­pt, todo gira en torno a co­m­po­ne­n­tes reactivos pe­r­so­na­li­za­dos. Estos co­m­po­ne­n­tes combinan es­tru­c­tu­ra, apa­rie­n­cia y co­m­po­r­ta­mie­n­to, y se adaptan au­to­má­ti­ca­me­n­te a los cambios en los datos su­b­ya­ce­n­tes. Por ejemplo, si se elimina un registro, la entrada co­rre­s­po­n­die­n­te des­apa­re­ce de una lista y un contador muestra in­me­dia­ta­me­n­te el valor actual.

Angular y React han sido durante años los pri­n­ci­pa­les fra­me­wo­r­ks de frontend reactivos. Ambos son adecuados para crear apli­ca­cio­nes de una sola página, así como apli­ca­cio­nes más extensas, y se co­n­si­de­ran bastante complejos. En cambio, el framework de frontend “Vue” es una al­te­r­na­ti­va más moderna.

Con el framework Svelte, se ha in­tro­du­ci­do un nuevo enfoque in­te­re­sa­n­te y ra­di­ca­l­me­n­te diferente. Svelte sigue un camino distinto al de React y otros fra­me­wo­r­ks. En lugar de inventar nuevas es­tru­c­tu­ras dentro de Ja­va­S­cri­pt, Svelte actúa como un co­m­pi­la­dor. Esto significa que puedes escribir código Svelte sencillo, que luego el co­m­pi­la­dor convierte en código Ja­va­S­cri­pt más complejo.

La mayoría de los fra­me­wo­r­ks de frontend reactivos también facilitan el trabajo con datos globales a través de un “almacén de estado” que permite en­ca­p­su­lar los datos de estado. Si es necesario, se utiliza un proceso de co­m­pi­la­ción in­de­pe­n­die­n­te con un gestor de tareas como Gulp o Grunt para generar el código del frontend.

Fra­me­wo­r­ks de frontend de re­s­po­n­sa­bi­li­da­des mixtas: la vieja guardia

Los fra­me­wo­r­ks de frontend de re­s­po­n­sa­bi­li­da­des mixtas son más antiguos y gozaron de gran po­pu­la­ri­dad antes de la llegada de los fra­me­wo­r­ks reactivos. Ejemplos notables incluyen Bootstrap o al­te­r­na­ti­vas a Bootstrap. Estos ofrecen una es­ta­n­da­ri­za­ción que era muy necesaria en su momento, al superar las di­fe­re­n­cias entre na­ve­ga­do­res. Además, venían con co­m­po­ne­n­tes pre­co­n­fi­gu­ra­dos, como menús je­ra­r­qui­za­dos, aco­r­deo­nes de­s­ple­ga­bles y ca­rru­se­les de imágenes.

Lo que tienen en común los fra­me­wo­r­ks de re­s­po­n­sa­bi­li­da­des mixtas es que incluyen tanto código Ja­va­S­cri­pt como código CSS. ZURB Fou­n­da­tion es un framework compacto de interfaz de usuario más orientado a la ada­p­ta­bi­li­dad para apli­ca­cio­nes pro­fe­sio­na­les. “jQuery UI” también siguió un enfoque mi­ni­ma­li­s­ta que se combinaba bien con el popular framework de Ja­va­S­cri­pt, JQuery.

La ventaja de los fra­me­wo­r­ks de frontend de re­s­po­n­sa­bi­li­da­des mixtas es que son muy fáciles de usar. No­r­ma­l­me­n­te basta con integrar un archivo CSS y/o un Ja­va­S­cri­pt. Sin embargo, pe­r­so­na­li­zar y optimizar puede volverse co­m­pli­ca­do rá­pi­da­me­n­te, y combinar partes de di­fe­re­n­tes fra­me­wo­r­ks de este tipo puede generar desafíos en la práctica.

Fra­me­wo­r­ks de frontend de re­s­po­n­sa­bi­li­dad única: los es­pe­cia­li­s­tas más ligeros

A di­fe­re­n­cia de los fra­me­wo­r­ks de frontend de re­s­po­n­sa­bi­li­dad mixta, que combinan Ja­va­S­cri­pt y CSS, los fra­me­wo­r­ks de frontend de re­s­po­n­sa­bi­li­dad única se centran en uno de los lenguajes. Tailwind CSS ha es­ta­ble­ci­do un estándar para aplicar reglas CSS a los co­m­po­ne­n­tes del frontend. En lugar de escribir código CSS pe­r­so­na­li­za­do, se utilizan clases pre­de­fi­ni­das di­re­c­ta­me­n­te en el marcado HTML.

Lo que Tailwind ofrece en términos de pre­se­n­ta­ción, el framework de frontend ligero Alpine JS lo ofrece en términos de co­m­po­r­ta­mie­n­to y reac­ti­vi­dad. En lugar de CSS, utiliza fra­g­me­n­tos de Ja­va­S­cri­pt pre­de­fi­ni­dos. Alpine se au­to­de­fi­ne como “jQuery for the modern web” y completa así el argumento a favor del clásico framework de Ja­va­S­cri­pt.

La principal ventaja de los fra­me­wo­r­ks de frontend de re­s­po­n­sa­bi­li­dad única es su sencillez. Por regla general, se puede limitar la cantidad de código utilizado a lo que realmente se necesita, aunque puede requerir un proceso de co­m­pi­la­ción in­de­pe­n­die­n­te. Además, se pueden combinar fá­ci­l­me­n­te partes de estos fra­me­wo­r­ks. Una co­m­bi­na­ción popular es Tailwind CSS + Alpine JS.

Crear múltiples frontends a partir de una base común con fra­me­wo­r­ks mu­l­ti­pla­ta­fo­r­ma

Todos los fra­me­wo­r­ks de frontend que hemos me­n­cio­na­do hasta ahora están orie­n­ta­dos a la vi­sua­li­za­ción en na­ve­ga­do­res web. Sin embargo, también existen los llamados fra­me­wo­r­ks de frontend mu­l­ti­pla­ta­fo­r­ma que generan código para apli­ca­cio­nes nativas. Las apli­ca­cio­nes nativas no requieren un navegador, sino que se ejecutan di­re­c­ta­me­n­te en un sistema operativo como Windows, macOS, Android o iOS.

Flutter es un conocido framework de frontend mu­l­ti­pla­ta­fo­r­ma basado en el lenguaje de pro­gra­ma­ción Dart de Google. Una interfaz de usuario co­n­s­trui­da en Flutter sirve como base común a partir de la cual se pueden crear varios frontends nativos y de web.

GTK es un framework de frontend puramente nativo con un enfoque similar. Se pueden crear frontends para Linux, Windows y macOS a partir de una base común. A di­fe­re­n­cia de Flutter, GTK no se basa en te­c­no­lo­gías web, pero ofrece co­ne­xio­nes con una amplia selección de lenguajes de pro­gra­ma­ción con los que se puede trabajar.