Headless CMS, ¿qué es y cuál va a ser su evolución?
¿Qué es un Headless CMS? Ventajas e inconvenientes de un stack de gestión de contenidos que puede cambiar tu futuro
Episodio intenso, poniéndonos al día de las posibilidades que se abren al mundo developer con el concepto de Headless CMS.
🗓 Última actualización: 26/05/2023
** ¿Qué es un Headless CMS? (CMS sin cabeza)** ¶
Un Headless CMS es una herramienta de gestión de contenido que permite a los desarrolladores y editores manejar y organizar el contenido de un sitio web o aplicación de una manera más eficiente.
A diferencia de los CMS tradicionales, los Headless no tienen una interfaz de frontend acoplada, lo que te permite como desarrollador crear tu propia interfaz de usuario utilizando las tecnologías que prefieras: React, Vue, Angular, Jamstack…
La dualidad de los Headless CMS: contenido y capa de gestión vs capa de presentación ¶
Los Headless CMS funcionan a través de una dualidad: por un lado tenemos el contenido y la capa de gestión, que incluye todas las funcionalidades de backend, como la creación, gestión y almacenamiento del contenido.
Justo al lado está la capa de presentación, que es la interfaz de usuario o frontend, y puede ser cualquier plataforma que consuma la API del CMS, como un sitio web, una aplicación móvil o incluso un dispositivo de IoT.
**La importancia del API First **
En un Headless CMS, el enfoque principal es la API, y en este sentido, el término “API First” se utiliza para describir el enfoque de diseño en el que la API se desarrolla antes que la interfaz de usuario.
Arquitectura general de los CMS desacoplados ¶
Consiste básicamente en tres partes:
Backend (Content Management)
Esta es la parte del CMS donde se crea y gestiona el contenido. Incluye los editores para la creación de contenido y la base de datos para el almacenamiento de contenido.
API (Content Delivery)
Esta es la interfaz que el CMS utiliza para entregar el contenido al frontend. Cuando se solicita contenido, la API recupera el contenido de la base de datos y lo envía al frontend.
Frontend (Presentation Layer)
Esta es la parte del sistema que consume el contenido y lo presenta al usuario. En un Headless CMS, el frontend puede ser cualquier tecnología que pueda consumir la API, como un sitio web, una aplicación móvil, un dispositivo IoT, etc.
Ventajas e inconvenientes ¶
Ventajas de los headless
- Flexibilidad: Permite a los desarrolladores utilizar cualquier tecnología de frontend que prefieran.
- Omnicanalidad: Facilita la entrega de contenido a múltiples canales, como web, móvil, IoT, etc.
- Escalabilidad: Como el frontend y el backend están desacoplados, cada uno puede escalar independientemente según sea necesario.
- Desacoplamiento de Frontend y Backend: Permite a los equipos de frontend y backend trabajar de forma independiente.
- Tecnología API-First: Facilita la integración con otras herramientas y servicios.
Inconvenientes de los headless:
- Requiere más desarrollo: Como el frontend y el backend están desacoplados, puede requerir más desarrollo para unirlos.
- Falta de funcionalidades preconstruidas: Algunas funcionalidades que vienen preconstruidas en los CMS tradicionales, como la vista previa del contenido, pueden faltar en los Headless CMS.
- Posibles problemas de SEO: Algunos Headless CMS pueden tener problemas con el SEO si no se manejan correctamente.
- Gestión de vistas: Los Headless CMS no gestionan las vistas, lo que significa que los desarrolladores deben crearlas desde cero.
Algunos Headless CMS muy conocidos ¶
Opciones de código abierto ¶
Strapi ¶
Strapi es un Headless CMS de código abierto muy popular que ha recibido 10 millones de dólares en financiación. Ofrece a los desarrolladores la libertad de utilizar sus tecnologías preferidas y construir proyectos a medida.
Ghost ¶
Ghost es un CMS que ofrece tanto una versión tradicional como una desacoplada. Ofrece opciones de membresía, y puedes optar por pagar por usarlo o instalarlo por tu cuenta.
Webiny ¶
Webiny es serverless, lo que significa que no necesita un servidor para funcionar. Esto hace que Webiny sea altamente escalable y fácil de utilizar.
Directus ¶
Directus es un Headless CMS de código abierto basado en Node.js (antes en PHP). Se destaca por su flexibilidad y simplicidad, permitiendo a los desarrolladores trabajar con su base de datos existente y su tecnología preferida.
Keystone ¶
Keystone otro CMS sin cabeza de código abierto basado en node.js que se centra en la flexibilidad y el control. Puedes acoplarlo a cualquier proyecto en este lenguaje.
Opciones de pago ¶
Contentful ¶
Contentful es posiblemente el Headless CMS más famoso y se utiliza en numerosas empresas grandes. Ofrece una gran cantidad de características y permite a los desarrolladores trabajar con cualquier stack de tecnología.
Storyblok ¶
Storyblok es muy conocido porque patrocina proyectos de código abierto. Se destaca por su editor visual y sus características de colaboración.
Sanity ¶
Sanity por su parte ofrece una plataforma de contenido en tiempo real. Se destaca por su modelo de contenido personalizable y sus poderosas APIs.
DatoCMS ¶
DatoCMS tiene una gran cantidad de características, incluyendo un potente editor de contenido visual y soporte para múltiples idiomas.
CMS tradicionales con características de Headless CMS ¶
Wordpress ¶
Wordpress, el CMS más popular del mundo, también ofrece la posibilidad de utilizarse como “sin cabeza” a través de su API REST.
Drupal ¶
Drupal es un CMS de código abierto que permite a los desarrolladores trabajar con su propio stack de tecnología y usarlo como recurso headless.
Magento ¶
Magento es una plataforma de comercio electrónico que también puede funcionar como un Headless CMS, permitiendo a los desarrolladores crear experiencias de usuario personalizadas.
Casos de uso ¶
Frontend Web y JAMStack ¶
Este stack es una parte esencial del JAMStack, que es una arquitectura moderna de desarrollo web basada en JavaScript y APIs. Permiten a los desarrolladores crear sitios web rápidos y seguros, aunque sean estáticos.
Señalética digital ¶
Sorprendentemente se utilizan en señalética digital, como los displays digitales de Burger King. De esta forma las empresas gestionan el contenido de sus displays de forma eficiente y en tiempo real.
¿Te acordarás la próxima vez que vayas a por una burger? :P
Contenido para altavoces inteligentes ¶
El contenido para altavoces inteligentes, como Alexa o Google Home, también puede ser gestionado a través de este stack.
E-commerce ¶
En el comercio electrónico, los CMS desacoplados permiten a las empresas crear experiencias de compra personalizadas y rápidas. A diferencia de las soluciones monolíticas, son más flexibles y permiten a las empresas adaptarse rápidamente a los cambios en el mercado.
Aplicaciones móviles ¶
Quizás el caso de uso más habitual, compartido también con los Backend-as-a-Service (BaaS). Los desarrolladores pueden crear una experiencia de usuario más cercana al móvil y gestionar el contenido de sus aplicaciones de forma eficiente del lado del servidor.
La versatilidad y complejidad de los Headless CMS ¶
La resistencia a los Headless CMS: por qué y cómo superarla ¶
A pesar de sus beneficios, algunos desarrolladores pueden resistirse a utilizar este tipo de arquitectura porque ya están cómodos con sus herramientas actuales.
Sin embargo, explorarlos puede aportar valor a su trabajo y abrir nuevas oportunidades.
Los CMS no acoplados son extremadamente versátiles, pero esta versatilidad puede llevar a una mayor complejidad. Cada uno es único y las tecnologías que utilizan pueden variar, lo que significa que no hay un producto definitivo.
Además, establecer relaciones entre elementos en un Headless CMS puede ser más complicado que en un CMS tradicional.
El valor del desarrollador en el mundo de los Headless CMS
El valor que tienes como developer es mayor que nunca.
No todo se puede hacer con herramientas no code, y las integraciones más complejas a menudo requieren la intervención de un perfil como el tuyo.
No está nada mal pensar en especializarse en un concepto de los dos (backend o frontend), aumentando tu valor y habilidades.
Preguntas Frecuentes (FAQs) ¶
¿Qué es un Headless CMS?
Un Headless CMS es una herramienta de gestión de contenido que no tiene una interfaz de presentación predeterminada, lo que permite a los desarrolladores crear su propia interfaz de usuario utilizando las tecnologías que prefieran.
¿Cuáles son algunos de los Headless CMS más conocidos?
Algunos de los más conocidos son Strapi, Ghost, Webiny, Directus, Keystone, Contentful, Storyblok, Sanity y DatoCMS.
¿Cómo se utiliza un Headless CMS en el comercio electrónico?
En el comercio electrónico, los CMS sin cabeza permiten a las empresas crear experiencias de compra personalizadas y rápidas.
Son más flexibles que las soluciones monolíticas aunque también más complejas de ejecutar.
Headless CMS en Web Reactiva ¶
Hablo mucho de Headless CMS, Decoupled CMS y API First en estos contenidos:
Recursos en internet
En el episodio citamos varias opciones para pasarnos al Headless.
Strapi, Ghost, Directus, Keystone, Contenful, Storyblok, Sanity…
Puedes ver la lista completa en HeadlessCMS.org.
Aquí también el artículo con varios casos de estudio y todas las comparativas de Ghost.
Cada domingo en tu bandeja de entrada ¶
La newsletter que te regala cada semana 12 recursos para developers inquietos.
Escrito por:
Daniel Primo
12 recursos para developers cada domingo en tu bandeja de entrada
Además de una skill práctica bien explicada, trucos para mejorar tu futuro profesional y una pizquita de humor útil para el resto de la semana. Gratis.