STATIC WITHOUT LIMITS

SITES MÁS RÁPIDOS, SEGUROS Y BARATOS

martes 30 de junio, 17:00 horas

pablo albizu

~8 años desarrollando software en proyectos web y móvil.

• Ayudando a equipos de desarrollo a mejorar su entrega continua de software a través de aplicar prácticas agile/extreme programming.
• Enfocado en hacer las cosas bien e impulsar una cultura de mejora continua.
•  

Ahora enfocado en:

• Construir software mantenible.
• Alinear los objetivos estratégicos de negocio y equipo técnico. 

Alberto Silva

~ 25 años en gestión de contenidos

• CMS propios
• ~10 años en Drupal

Ahora enfocado en:

• Frontend (React, Gatsby, PWA, etc)
• Jamstack
• WPO (Web Performance Optimization)

github.com/asilgag

www.drupal.org/u/asilgag

qué es JAmstack

es más una filosofía que una arquitectura

Todo ficheros estáticos

proceso build

No Servidores

Sí CDN / LAMBDAs

deja atrás modelos server antiguos

LAMP, MEAN, MERN, etc

Jamstackes subir de nivel

Sites

más rápidos

más seguros

más baratos

1

SITES más rápidos

tráfico móvil

latencia en 3G / 4G

percepción latencia

Google prioriza cada vez más la rapidez

Sept 2020: Google indexará todo Internet con mobile-first indexing

No hay nada más rápido que una CDN

• 1-2 ms de latencia vs generar HTML al vuelo en servidor
• cercanía geográfica
• no hay origin: ficheros estáticos subidos directamente a CDN
• assets js/css/imgs cacheados sin expiración: hash en el nombre: app-fb640a146e71454b3e1d.js

Navegación instantánea

• Solución React, propia de Gatsby
• Prefetch de assets para renderizar siguiente ruta (datos en JSON + componente React)
• Renderizado React en milisegundos

¿Y el tiempo de las compilacioneS?

600.000 páginas en 5 minutos

Smashing Magazine:

• 7.500 posts complejos en 13 segundos

• Deploys completos a Netlify en 2 minutos​

​

20.000 páginas en 60 segundos

Text

Text

+ Static Suite

+ Static Suite

100.000 páginas en ~4 minutos

compilacioneS serverless

Traslada el build a un servicio CI/CD

Concurrencia infinita

Gastos mucho menores

Caso real:

• Solución servidor sin concurrencia: ~400 euros/mes
• Solución CI con concurrencia (~5.000 compilaciones/mes): ~150 euros/mes

2

más seguros

ficheros estáticos

• No hay servidores públicos (sólo backoffice bastionado, y a veces ni eso)
• No es atacable
• No se ejecuta nada
• Cero mantenimiento

Escalable a tamaño internet

• Soporta cualquier pico de tráfico
• Cualquiera
• En serio, cualquiera
• Imbatible frente a solución server
• Caso real:
  • Cliente duplica tráfico de golpe durante COVID-19: de 5 millones de usuarios a ~10
  • Cero caídas o incidencias
  • Gasto: 50% menor que mes anterior*

Compilar =~ testar

• Al compilar todo el site, se ejecuta todo nuestro código en todas las páginas
• Si algo está mal, el build se rompe
• Y nada se despliega
• No captura errores de runtime en navegador, pero sí todos los de renderizado en servidor

despliegues sencillos

• Sólo son carpetas con ficheros planos.
• Muy sencillo probar el resultado final.
• Revertir es quitar una carpeta y poner otra.

Las caídas del servicio pasan a ser cosa del pasado

Sólo se puede caer si se cae AWS, Azure, Netlify, etc

¡Podemos dormir tranquilos!

3

más baratos

sobredimensionado

Soluciones servidor antiguas:

• Balanceadores, granjas de servidores frontend, clusters BD, múltiples capas de caché, etc
• Presupuestos desorbitados

Jamstack: no hay servidores

• Se paga por consumo de servicios
• Precios infinitamente más baratos: AWS Lambda (0.20 euros x 1 millón de ejecuciones)

caso real AWS SERVERS

42 instancias (EC2 + RDS) (31 EC2 + 11 RDS)

• 4 Bastion servers

• 5 Drupal backoffice servers

• 13 Drupal frontend web-servers

• 11 RDS

• 5 SOLR servers

• 4 Contingency servers

• 6 EFS

• 6 Application Load Balancers

~10.000

euros/mes

5 entornos en 2 regiones AWS

caso real AWS Jamstack

3 instancias (2 EC2 + 1 RDS) (31 EC2 + 11 RDS)

• 1 Bastion server

• 1 small Drupal backoffice server

• 0 Drupal frontend web-servers

• 1 RDS

• 0 SOLR servers

• 0 Contingency servers

• 0 EFS

• 1 Application Load Balancer

• Servicios AWS: S3, Lambda, Codebuild, etc

1 entorno en 1 región AWS

~500

euros/mes

~10.000

euros/mes

-95%

solución gratuita 100%

• CMS:

  • NetlifyCms

  • Sanity.io

  • Google Sheets

  • Integraciones con GIT, etc 

• Hosting: Netlify, Vercel, etc

EN BIKo:

drupal

+

gatsby

• Amplio know-how en Biko
• Múltiples proyectos complejos
• Ganador Webby 2018, óscar de Internet (Repensar Guernica, Museo Reina Sofia)
• No tiene rival como CMS (gestor de contenidos)
• Podemos desacoplar su frontend para tener un modelo Jamstack.
• Nuestra solución: que Drupal sea sólo CMS, sólo gestor de contenidos.

• Pieza del frontend que le falta a Drupal
• Generador de sites estáticos usando React
• Cualquier fuente de datos: todo es GraphQL
• ~2000 plugins en NPM y creciendo
• Site optimizado al máximo: 100 en lighthouse sin esfuerzo, navegación instantánea, etc

• Aprovechamos lo mejor de cada mundo: potencia de gestión Drupal + frontend React con Gatsby
• Paralelizado de trabajo backend | frontend
• Desarrollo frontend más rápido
• Extenso mercado React vs escasez desarrolladores Drupal

Ventajas del modelo

En resumen

 es imbatible en rendimiento, seguridad y costes

Todo tipo de site puede ser jamstack-izado

jamstack:

nuestra primera opción de trabajo

Este modelo encaja con la apuesta por drupal + React de Biko

preguntas

¡Gracias!