La Noche Electoral

MADRID · NOV 27-28 · 2015

Resolviendo la Noche Electoral AWS | Node.js | Angular.js | D3.js | Leaflet.js

Javier Abadía @javierabadia

20:31h

20:29h 24 de Mayo 2015

MADRID · NOV 27-28 · 2015

¡PANICO!

•  Los datos no se actualizan •  El buscador de municipios no funciona

20:31h

Un mes antes

¿Que tiene?

MADRID · NOV 27-28 · 2015

Requisitos

•  que no eche abajo el periódico •  que no falle •  que sea navegable, informativo… •  que sea rápido y bonito

DESARROLLO

Servidor Ministerio del

Interior Front-‐End – Client-‐ Side

Usuarios finales

Front-‐End – Server -‐ Side Back-‐End

Front-‐End – Client-‐ Side

Front-‐End – Server -‐ Side Back-‐End

Servidor Ministerio del

Interior

Balanceador de Carga Elástico

Nodo Front-End

Nodo Front-End

Nodo Front-End

Nodo Front-End

Nodo Back-End

Usuarios finales

MADRID · NOV 27-28 · 2015

Selección de Herramientas

•  AWS •  nginx •  Node.js / Express •  Angular •  D3.js •  Leaflet

MADRID · NOV 27-28 · 2015

aws

•  capacidad elástica •  infraestructura montada desde el

principio –  load balancer –  instancia micro

•  producción – n x máquinas idénticas –  listas para entrar en el balanceador

MADRID · NOV 27-28 · 2015

nginx

•  producción – proxy hacia el node – ficheros estáticos

•  cacheo – 1 min

•  gzip •  cabe todo en memoria I/O disco = 0

MADRID · NOV 27-28 · 2015

node.js

•  asíncrono •  mismo lenguaje que en el cliente

MADRID · NOV 27-28 · 2015

node.js

•  urls •  express •  id de municipio/provincia •  ejs = embedded javascript •  PM2

integración en el CMS

MADRID · NOV 27-28 · 2015

integración en el CMS •  iframe

¿y donde está el código de municipio?

mediante el header ‘Referrer’

integración en el CMS

MADRID · NOV 27-28 · 2015

¿y donde está la BBDD?

•  Sin BBDD •  csv è .json •  Estructura jerárquica

–  /api/2015/02/50/50297/municipales.json

MADRID · NOV 27-28 · 2015

Angular.js

•  muy productivo •  código común entre páginas •  acceso $http, $q.all() •  reusable para la app móvil

– angular mobile – angular material

•  lodash / underscore

MADRID · NOV 27-28 · 2015

¿qué pasa con SEO?

•  las páginas con angular.js no tienen contenido relevante

•  noscript •  utilizar ejs para pregenerar las páginas

– consistencia – traerse código del cliente al servidor -

isomorfismo

MADRID · NOV 27-28 · 2015

d3

•  artesanal •  muy buen resultado •  animaciones •  estilos css

¡¡Por supuesto!!

¿Mapas interactivos en la home?

¡Pero si hay más de 8200 municipios!

¡¡NO PASA NADAAAA!!

MADRID · NOV 27-28 · 2015

leaflet

•  mapas en la home? –  claro!

•  mapas vectoriales interactivos –  actualizados en tiempo real

•  topojson •  rápido, ágil, ligero •  preparación de datos

MADRID · NOV 27-28 · 2015

la app móvil

•  angular mobile ui •  reuso de código •  muy profesional •  d3, leaflet funcionan

fenomenal •  muy rápido

PUESTA EN PRODUCCION

MADRID · NOV 27-28 · 2015

despliegue

•  100% automático con 1 comando – git pull – grunt build – restart pm2 – restart nginx

20:33h 24 de Mayo 2015

MADRID · NOV 27-28 · 2015

el script de descarga

•  habían cambiado 2 caracteres en una URL de +de 500 car.

•  arreglado en 15 min

MADRID · NOV 27-28 · 2015

el buscador de municipios

•  excesivo cacheo – para nginx todos los municipios tenían la

misma URL (el identificador no viene en la URL)

•  referer para el id de municipios •  arreglado en 4 min

MADRID · NOV 27-28 · 2015

añadir el % escrutado

MADRID · NOV 27-28 · 2015

peticiones servidas

•  rendimiento •  páginas vistas

MADRID · NOV 27-28 · 2015

usuarios

MADRID · NOV 27-28 · 2015

carga de CPU

MADRID · NOV 27-28 · 2015

latencia de salida

MADRID · NOV 27-28 · 2015

lecciones aprendidas

•  probar en condiciones realistas •  no meter cambios de última hora •  despliegue automático de cambios •  un buen diseño [gráfico|técnico] es

fundamental •  arquitectura escalable •  menos es más

MADRID · NOV 27-28 · 2015

Muchas Gracias

Javier Abadía @javierabadia

La Noche Electoral

Software

Transcript of La Noche Electoral