¿Qué es un headless CMS?

TL;DR

Sistemas tradicionales como Wordpress han sido los CMS que muchas agencias, consultores independientes y clientes han seleccionado para la generación de contenido de sus Sitos Web durante muchos años. La constante evolución de la Web, los nuevos retos tecnológicos y las nuevas oportunidades de los negocios en el Internet, requieren de nuevas formas de generar contenido y a la vez que ese contenido esté desacoplado de la Interfase visual, y brindar flexibilidad a los Desarrolladores para implementar toda la Experiencia de Usuario, en cualquier dispositivo, sin depender exclusivamente de un sistema monolítico de un CMS tradicional. Un headless CMS es la herramienta a utilizar en este contexto y lo iremos descubriendo a continuación:

Desacoplando el contenido de la parte visual

Años atrás estuve a cargo de la construcción del Sitio Web de Mazda Ecuador (www.mazda.com.ec). El diseño presentó variedad de retos, principalmente por tener un contenido bastante visual y por la interacción en algunas páginas. Se utilizó como CMS, una herramienta de uso común en el ámbito del desarrollo Web y el Marketing.

Construir el Tema o Template del Sitio, no fue de mucha dificultad. Se utilizaron ciertos plugins para ciertas secciones, y Custom Types (Tipos de datos personalizados), para generar cierto contenido como por ejemplo aquel relacionado con los automóviles. Sin embargo, el momento en que necesitamos mayor flexibilidad en la programación de ciertas interacciones, depender básicamente en Wordpress y sus plugins no era el camino, e incluso si se tenía que personalizarlos, era demasiado complicado y tardaría demasiado tiempo. Gracias a que trabajamos con una plantilla desarrollada desde cero, pudimos realizar integraciones con Javascript y con Web Services que permitieron desarrollar aquellos features que dentro de la estructura de aquel CMS, no hubieran sido posibles. Esta experiencia me llevó a pensar mucho en que para proyectos de este tipo, no era posible definir una arquitectura monolítica en el contexto de un CMS tradicional, como Drupal u otro similar. Al usar Web Services para ciertos features, pude entender que esa es la mejor manera de poder solucionar problemas fuera del CMS, y que era ya una tendencia tecnológica.

Mi investigación, me permitió conocer un tipo de herramienta que prácticamente daba solución a este problema: Headless CMS. Este tipo de CMS, es uno de los elementos esenciales para poder definir una arquitectura basada en Servicios, que en este caso soluciona el problema de la creación de contenido, permitiendo desacoplar la interface de usuario de la información que esta presenta. Esto a la vez permite que el desarrollador front end, tenga flexibilidad en la interfaz de usuario para cambiar estilos, programar interacciones y realizar integraciones de mayor complejidad que bajo un CMS común requieren de mayor tiempo y esfuerzo, dentro de la misma arquitectura del CMS, o no son factibles en absoluto.

Pero ¿De qué se trata un headless CMS?

Como su nombre lo indica, un headless CMS, es un CMS sin parte visual, sin front-end (head) y tiene las siguientes características:

• Es un software Web que tiene todas las herramientas para la creación, lectura, actualización, y eliminación de contenido de un Sitio Web.

• Está totalmente desacoplado de la Interfaz de Usuario, permitiendo la separación de conceptos (separation of concerns). En CMS´s como Wordpress, el contenido está ligado a la interface de Usuario. De hecho, su estructura (HTML) y estilos (CSS) se guardan en la misma base de datos donde se guarda el contenido.

• Definen un API de Servicios Web que los Desarrolladores podemos utilizar para presentar el contenido en la Interface de Usuario (UI). En algunas soluciones, este API también permite guardar y actualizar contenido desde el UI, todo mediante llamadas o comandos al API del Headless CMS.

Hoy en día existen muchos servicios Headless CMS. Wordpress o Drupal también puede ser utilizados como tal, ya que disponen de APIs que como acabé de indicar, es uno de los elementos clave para poder integrarlo con la Interface de Usuario. Pero es preciso destacar, que hay muchos otros Headless CMS que son Servicios Hospedados (Hosted Services), es decir que no es necesario que tengamos que instalarlo (como Wordpress). Solamente tenemos que crear una cuenta para empezar a utilizar las herramientas de edición de contenido. Además, un servicio hospedado nos libera de la responsabilidad del mantenimiento y seguridades en el CMS, algo que es primordial para tener un sistema robusto.

Un Servicio Hospedado, generalmente maneja un modelo de precios basado en el uso en demanda de los recursos disponibles, como por ejemplo el almacenamiento del contenido, el número de usuarios editores, ancho de banda, llamadas a sus APIs, etc. Un modelo de precios que sin duda es muy conveniente para negocios de toda maginitud.

Beneficios de un Headless CMS

El principal beneficio es esencialmente la separación de conceptos, es decir que es una herramienta que permite que tengamos un desacoplamiento de datos (el contenido en si) y la interfaz de usuario. A la vez, esto se extiende a otros beneficios como los siguientes:

• Seguridad. En un ataque cibernético, es fácil conocer si un Sitio Web está construido mediante un CMS como Wordpress, y a partir de esto, utilizar estrategias para vulnerar el Sitio Web, no solo contenido, sino también su código fuente. Por el contrario, los headless CMS "esconden" los detalles de implementación y back end, de la parte visual, con lo cual se le hace prácticamente imposible a un hacker indagar y vulnerar el Sitio Web. Los Servicios hosteados además, manejan otros protocolos de seguridad a nivel de autentificación, cifrado de datos y muchos otros controles que los convierte en CMSs muy robustos.

• Son agnósticos del UI. Al manejar un API, los datos pueden ser utilizados no solo desde una Interface de un Sitio o Aplicación Web, sino también desde una Aplicación móvil o cualquier otro tipo de dispositivo, incluso aquellos en el ámbito del Internet de las Cosas. De esta manera, podemos utilizar el contenido en varios contextos de un negocio o requerimiento tecnológico.

• Son agnósticos de la implementación del UI. Los desarrolladores tienen la libertad de utilizar el lenguaje de programación con el que se sientan más cómodos y con el cual tengan la flexibilidad de generar las soluciones de UI requeridas. El lenguaje de programación por default, se podría decir que hoy por hoy es Javascript, siendo un lenguaje versátil que también puede ser utilizado en soluciones back end con NodeJs. En la siguiente sección conoceremos de forma específica que tecnología puede utilizarse en la parte visual de un Sitio Web cuya fuente de datos es un headless CMS.

Herramientas de front-end que generalmente se utilizan en conjunto con un Headless CMS

Para aplicaciones o Sitios Web, Vanilla Javascript, es la opción principal a la hora de escoger una herramienta para la integración con un API de un headless CMS.

Pero no solamente se puede utilizar Javascript. En realidad los API´s pueden ser utilizados con cualquier otro lenguaje como por ejemplo PHP, Java, etc.

Por otro lado, frameworks Javascript como React o Vue, son ampliamente utilizados también para la implementación del UI. NextJs y GatsbyJs (React frameworks) o NuxtJs (Vue framework), son también herramientas muy utilizadas, ya que incluso realizan generación estática de documentos HTML (static builds) a partir de la recuperación de datos del headless CMS, lo que permite obtener un Sitio Web de gran rendimiento.

Mi experiencia utilizando estas tecnologías

En base a todo lo expuesto en este artículo, y con la experiencia obtenida en el aprendizaje de estas tecnologías, puedo concluir que son herramientas de gran utilidad tanto para Editores de Contenido como para Desarrolladores. A la vez que cada grupo puede enfocarse en sus metas particulares, permite una mejor comunicación y coordinación sobre el contenido que se va a crear y cómo debe ser desplegado en la interface de un Sitio Web.

A los Desarrolladores, especialmente, nos permite utilizar herramientas con las que ya estamos familiarizados en la construcción de Sitios Web, sin la dependencia que los CMS´s comunes imponen, por ejemplo los plugins o las plantillas, que muchas veces son demasiado complicadas de personalizar. Y aunque también existen nuevos retos al trabajar con un headless CMS, la flexibilidad en la programación del UI es un elemento clave para poder personalizar un Sito Web en su totalidad.

Finalmente, cabe señalar que el CMS tradicional, es una tecnología que no se extinguirá. Pero un CMS headless, será la nueva tendencia de hoy en adelante, pues está cambiando radicalmente la forma en que concebimos e implementamos soluciones digitales, así como también en tema de seguridad y costos. Resulta magnífico tener CMS's que nos permitan despreocuparnos de posibles riesgos de vulneración de datos, a la vez que
nos facturen de acuerdo al uso que hagamos de sus servicios.