Como hemos implementado
Drupal desacoplado
en estáticos
para una banco digital internacional
Luis Gil Sánchez | drupal.org/u/luigisa
Luis Gil Sánchez
+16 años en gestión de contenidos
- 13 años con Drupal
- 5 años haciendo desacoplados
Os quiero contar algo
Cómo hemos convertido Drupal en páginas estáticas
- Técnicamente
- Drupal será sólo un CMS
- Frontend con Gatsby
- Publicación a AWS S3
- Estratégicamente
- Sistema híbrido
- Seguridad
- Velocidad
- Infraestructura
- Costes económicos
¿Porqué estatificar?
Drupal
sólo como
CMS
¿Drupal sólo como CMS?
Sí! Es la mejor herramienta para gestionar contenidos con entidades relacionadas.
- Entidades
- Medias
- Usuarios + roles
- Workflow publicación
- ...
Drupal + Twig
=
acoplamiento
- El frontend entra en el backoffice, y viceversa
- Visitante anónimo ejecuta el mismo código que el administrador, y viceversa
- Problemas de seguridad del frontend afectan al backoffice, y viceversa
- Imposible aislar el código de frontend del de backoffice
- PHP, mysql, apache, logs, varnish, memcached, balanceadores, backups...
- Sistemas de alto rendimiento
Gatsby
como
frontend
Gatsby
- Generador de sites
estáticosusando React - Tecnología punta sin romperte la cabeza (bye bye webpack config)
- DX (Developer eXperience) excepcional:
- React + componentes
- HMR (Hot Module Reload)
- PRPL (Push, Render, Pre-cache, Lazy load)
- ~1500 plugins en NPM y creciendo
- Site optimizado al máximo: ~100 en lighthouse sin esfuerzo, navegación instantánea, etc
COMPONETIZAR
- Nace en 2015: React se hace mayor y es mainstream
- Desarrollo encapsulado en frontend. Muerte a jQuery!
- Composición vs
herencia - Simple JavaScript vs Twig + gigantescas APIs de Drupal
HOY EN DÍA, IMPOSIBLE PLANTEAR UN SISTEMA DE FRONTEND SIN COMPONENTES.
Theme
- Librerías de átomos compartida con privada
- Librería de componentes
- Themes (ThemeProvider)
Drupal
Static suite module
+
Gastby
Drupal (Static suite) + Gatsby
- Static Export
- Exporta datos de Drupal a ficheros estáticos (JSON, XML, etc) usando GraphQL, JSON:API, o cualquier otro resolvedor.
- Static Build:
- Utiliza un generador de sitios estáticos (Gatsby, Eleventy, Hugo, etc) para construir un sitio estático.
- Static Deploy:
- Despliega el sitio anterior en cualquier tipo de servicio de alojamiento (AWS S3, Netlify, etc)
- Static Preview:
- permite previsualizar el contenido sin construir el sitio completo. También existe un sistema de previsualización instantánea para Gatsby.
Exportamos
- Json
- ContentEntities
- ConfigEntities
- ...
- JsonIncludes = EntityReference
- Graphql
- Campos custom
- Exportadores custom
¿POR QUÉ JSON?
- Poder compilar Gatsby sin tener Drupal corriendo (Netlify et al.)
- Plugin de Gatsby para Drupal: no escala a miles de contenidos (20.000 y subiendo)
Construimos (Build)
- Escucha evento de export y lanza build
- Gastby compila el site entero cada vez
- 20.000 páginas en 120 segundos
- Local y/o AWS Codebuild
Como hemos implementado Drupal desacoplado en estáticos para una banco digital internacional
By Luis Gil
Como hemos implementado Drupal desacoplado en estáticos para una banco digital internacional
Cuando pensamos en sitios web modernos y de alto rendimiento, no solemos pensar en soluciones basadas en gestión de contenidos Pero es innegable que Drupal es una herramienta increíblemente flexible para construir modelos de contenido modernos. Como en el caso que explicaremos basado en static suite + gatsby + React Drupal para la gestión de contenidos. No hay opción mejor. - Front en React, con todas sus ventajas + styled-components. - Generación de estáticos con Gatsby, lo que permite una seguridad con el nivel de exigencia de un banco y un rendimiento de front imposible de conseguir con twig. - Para ello nos basamos en el conjunto de módulos "Static suite", que vienen a solucionar precisamente la generación de estáticos junto con Gatsby. Además mostraremos cómo llegar al objetivo pasando por un sistema híbrido, el cual nos da la oportunidad de aportar valor al proyecto poco a poco, sin tener que construir toda la web por completo.
