Gestores de contenido headless, sitios estáticos y front-end: ¿cómo se integran?
DESARROLLO WEB, INFRAESTRUCTURA.
Aunque en el pasado los sitios web eran principalmente estáticos, actualmente la mayoría de empresas tienen sitios web dinámicos con múltiples funcionalidades. Con estas funcionalidades pueden ofrecer a sus usuarios excelentes experiencias digitales personalizadas.
Estos sitios dinámicos no se limitan únicamente a presentar textos, como ocurría antes, sino que ofrecen una amplia interactividad, desde animaciones hasta integraciones con las redes sociales.
Sin embargo, estos sitios web dinámicos muchas veces presentan problemas de bajo rendimiento, generando la necesidad de resolver esta situación en el front-end. Esto se agrava con la tendencia de los usuarios a utilizar más los dispositivos móviles, que poseen menos recursos informáticos.
Los generadores de sitios estáticos pueden ofrecer sitios web ultrarrápidos con facilidad, funcionando con un gestor de contenido Headless que cree el contenido y almacene los datos, integrados mediante una API para mostrar estos datos de la forma deseada.
Generadores de sitios estáticos y Headless CMS
¿Qué son los generadores de sitios estáticos y dinámicos?
La necesidad de mejorar el rendimiento de los sitios web ha provocado el crecimiento en el uso de los generadores de sitios estáticos o SSG (Static Site Generators).
Un sitio estático es un sitio web que se expone al usuario en la forma de archivos HTML. Estos archivos son estáticos, porque previamente fueron almacenados y están listos para ser mostrados.
Para crear un sitio web estático se requiere un SSG, que es un software que puede generar por sí solo el código HTML del sitio, mediante una plantilla y una fuente de datos.
Por otro lado, un sitio web dinámico es generado "sobre la marcha". Aunque el resultado sigue siendo un código HTML, el trabajo que debe realizar el servidor web es mucho más exigente, ya que debe recopilar y procesar los datos, y generar el HTML cada vez que un usuario visite el sitio.
Un sitio web dinámico puede crearse con un sistema de gestión de contenido o CMS. Este es un software que combina el front-end (sitio web) con el back-end (base de datos y panel de control) en un único paquete.
A diferencia del SSG, que genera previamente los archivos HTML antes de publicarlos, el CMS genera el código del sitio justo antes de mostrarlo al cliente, pudiendo esto afectar fuertemente el rendimiento del servidor web.
¿Cómo se integran los SSG con los CMS Headless?
Los generadores de sitios estáticos, como GatsbyJS, Metalsmith y Jekyll, facilitan la extracción de datos a través de una API, generando aplicaciones estáticas fáciles de implementar. Sin embargo, usar solo un SSG impone limitaciones a los equipos de marketing.
La mayoría de los SSG no tienen capacidades de flujo de trabajo para rastrear y colaborar en la creación de contenido. Por esto, un CMS no solo es esencial para los sitios dinámicos, sino también para los sitios estáticos, porque son la fuente de contenido que alimenta al sitio.
Sin embargo, los CMS tradicionales no son idóneos para entregar contenido eficientemente a través de una interfaz de programación de aplicaciones (API), ni ofrecen la flexibilidad necesaria para los SSG.
La forma idónea de combinar un CMS y un SSG para tener los beneficios de ambos se llama CMS Headless, porque éste brinda acceso a la API, permitiendo recopilar el contenido para mostrarlo como se desee, así como establecer interactividad con los usuarios del sitio.
El Headless es un tipo particular de CMS, constituido únicamente por la parte "back-end" del CMS, sin front-end. Por esto, los CMS Headless son la opción natural para los SSG, por contener un amplio conjunto de funciones de gestión de contenido, dejando que otra tecnología, los generadores de sitios estáticos, cree la interfaz front-end.
Un CMS Headless es bastante versátil, por lo cual optar por que el sitio web sea estático ayudará a obtener los beneficios que ofrecen tanto el SSG como el CMS Headless.
Front-end como servicio para Headless
APIs como la ‘cabeza’ (el ‘head’) de los Headless
El CMS Headless no tiene las funciones que permiten crear un sitio web, ya que no posee plantillas ni temas para sitios. Por tanto, un CMS Headless requiere tener compatibilidad con las API.
Esto posibilita publicar contenido en diferentes canales (aplicaciones de Android/IOS, relojes inteligentes, etc.) a través de una misma API, como RESTful o GraphQL, desde el mismo back-end que administra el contenido del sitio web, manteniendo así todo sincronizado.
Con un CMS tradicional, realizar cambios puede llevar mucho tiempo. Por ejemplo, para modificar una parte de un sitio, se debe volver a implementar todo el CMS. Sin embargo, con un CMS Headless se pueden realizar cambios en el front-end sin impactar la infraestructura del back-end, permitiendo ahorrar tiempo y recursos.
Principales tecnologías Front-end
Todas las tecnologías front-end están constituidas por tres lenguajes de codificación front-end fundamentales: HTML, CSS y JavaScript. Las tecnologías front-end simplifican significativamente el trabajo, además de brindar una extraordinaria experiencia al cliente.
Las principales son:
A fines de 2009, el empleado de Google Misko Hevery trabajaba en paralelo en un proyecto para crear aplicaciones web que lo ayudaran en sus proyectos internos. Este desarrollo fue llamado Angular.js y se usó para crear otras aplicaciones. Hevery lanzó este proyecto en 2010 como un front-end de código abierto.
En 2011, el ingeniero de Facebook Jordan Walke creó esta biblioteca de JavaScript basada en XHP, que es un sencillo front-end con componentes HTML. Se lanzó en 2013, haciendo que el front-end de los sitios web sea más rápido y llamativo, sin mucho trabajo.
El empleado de Google Evan You lo creó después de implantar varios prototipos en un navegador, usando otros front-end como referencia. Fue lanzado en 2014. Vue.js se puede usar tanto en teléfonos móviles como en computadoras. Tiene una extensión HTML y una base JavaScript, haciéndola una herramienta Front-end bastante apropiada.
Front-end as a Service
Actualmente, muchas empresas están creando sus portales y sus aplicaciones usando módulos independientes que se combinan, haciendo que el tránsito de una arquitectura monolítica a una de microservicios en la nube sea una solución.
El auge del “Front-end as a Service” ocurrió al desarrollarse la estrategia de marketing omnicanal en el comercio electrónico. Para llegar a los clientes ya no es suficiente tener un sitio en la web, sino que es necesario utilizar múltiples canales.
Front-end as a Service entra en juego ofreciendo microservicios, basado en su capacidad de servicio, porque el enfoque omnicanal exige una mayor flexibilidad de las aplicaciones digitales.
Así, esta alternativa proporciona módulos front-end que se pueden combinar, estandarizando el desarrollo del front-end, haciéndolo confiable y ayudando a optimizar el ciclo de producción.
Por ejemplo, para crear una aplicación de comercio electrónico se deben desarrollar ciertas funciones básicas: carrito de compras, pagos, búsquedas, datos del cliente, servicio de asistencia, chatbots, etc.
Con Front-end as a Service, no se necesitan crear estas funciones desde cero, sino que pueden seleccionarse los módulos proporcionados por estas plataformas. Al poder combinarlos rápidamente, se crean aplicaciones de comercio electrónico de vanguardia, con una funcionalidad excepcional.
En resumen, los sitios web modernos se pueden crear integrando un generador de sitios estático, un gestor de contenido Headless y múltiples APIs de front end según los canales de distribución de contenido y las necesidades de la empresa.
Trabaje de la mano de expertos
En Aplyca somos expertos en desarrollo web moderno para grandes empresas y somos partners de Contentful, uno de los principales gestores de contenido Headless.
Conozca más sobre nuestros proyectos y contáctenos para discutir sus proyectos web.
