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​

Fuente: Forestry.io

Fuente: forestry.io

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

~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!

Webinar Jamstack. Sites más rápidos, seguros y baratos.

By Alberto Silva

Webinar Jamstack. Sites más rápidos, seguros y baratos.

Webminar realizado en Biko el 30 de junio de 2020, titulado "Jamstack, static without limits: sites más rápidos, seguros y baratos".

  • 601