La charla que dí en Codemotion 2015 sobre cómo resolver la noche electoral con AWS, Node.js, Angular.js, D3.js y Leaflet.js (http://2015.codemotion.es/agenda.html#5699289732874240/50504006)

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

4. 20:31h

6. 20:31h

8. 20:29h
24 de Mayo 2015

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

10. Un mes antes

11. ¿Que tiene?

12. ¿Que tiene?

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

14. DESARROLLO

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

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

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

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

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

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

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

23. php

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

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

26. integración en el CMS

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

28. integración en el CMS

29. mySQL

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

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

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

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

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

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

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

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

38. PUESTA EN PRODUCCION

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

40. 20:33h
24 de Mayo 2015

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

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

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

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

45. MADRID · NOV 27-28 · 2015
usuarios

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

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

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

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