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áticos usando 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