1.
MADRID · NOV 27-28 · 2015
Resolviendo
la Noche
Electoral
AWS | Node.js | Angular.js |
D3.js | Leaflet.js
Javier Abadía
@javierabadia

2.
20:31h

3.
20:31h

4.
20:31h

5.
20:29h
24 de Mayo 2015

6.
MADRID · NOV 27-28 · 2015
¡PANICO!
• Los datos no se actualizan
• El buscador de municipios no funciona
20:31h

7.
Un mes antes

8.
¿Que tiene?

9.
¿Que tiene?

10.
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

11.
DESARROLLO

12.
Servidor
Ministerio del
Interior
Front-­‐End
–
Client-­‐
Side
Usuarios finales
Front-­‐End
–
Server
-­‐
Side
Back-­‐End

13.
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

14.
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

15.
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

16.
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

17.
MADRID · NOV 27-28 · 2015
Selección de Herramientas
• AWS
• nginx
• Node.js / Express
• Angular
• D3.js
• Leaflet

18.
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

19.
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

20.
php

21.
MADRID · NOV 27-28 · 2015
node.js
• asíncrono
• mismo lenguaje que en el cliente

22.
MADRID · NOV 27-28 · 2015
node.js
• urls
• express
• id de municipio/provincia
• ejs = embedded javascript
• PM2

23.
integración en el CMS

24.
MADRID · NOV 27-28 · 2015
integración en el CMS
• iframe
¿y donde está el código de municipio?
mediante el header ‘Referrer’

25.
integración en el CMS

26.
mySQL

27.
MADRID · NOV 27-28 · 2015
¿y donde está la BBDD?
• Sin BBDD
• csv è .json
• Estructura jerárquica
– /api/2015/02/50/50297/municipales.json

28.
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

29.
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

30.
MADRID · NOV 27-28 · 2015
d3
• artesanal
• muy buen resultado
• animaciones
• estilos css

31.
¡¡Por
supuesto!!
¿Mapas
interactivos
en la home?

32.
¡Pero si hay
más de 8200
municipios!
¡¡NO PASA
NADAAAA!!

33.
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

34.
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

35.
PUESTA EN PRODUCCION

36.
MADRID · NOV 27-28 · 2015
despliegue
• 100% automático con 1 comando
– git pull
– grunt build
– restart pm2
– restart nginx

37.
20:33h
24 de Mayo 2015

38.
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

39.
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

40.
MADRID · NOV 27-28 · 2015
añadir el % escrutado

41.
MADRID · NOV 27-28 · 2015
peticiones servidas
• rendimiento
• páginas vistas

42.
MADRID · NOV 27-28 · 2015
usuarios

43.
MADRID · NOV 27-28 · 2015
carga de CPU

44.
MADRID · NOV 27-28 · 2015
latencia de salida

45.
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

46.
MADRID · NOV 27-28 · 2015
Muchas
Gracias
Javier Abadía
@javierabadia