La Noche Electoral

705 visualizaciones

Publicado el

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)

Publicado en: Software
0 comentarios
4 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
705
En SlideShare
0
De insertados
0
Número de insertados
55
Acciones
Compartido
0
Descargas
13
Comentarios
0
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

La Noche Electoral

  1. 1. MADRID · NOV 27-28 · 2015 Resolviendo la Noche Electoral AWS | Node.js | Angular.js | D3.js | Leaflet.js Javier Abadía @javierabadia
  2. 2. 20:31h  
  3. 3. 20:31h  
  4. 4. 20:31h  
  5. 5. 20:29h  24 de Mayo 2015  
  6. 6. MADRID · NOV 27-28 · 2015 ¡PANICO! •  Los datos no se actualizan •  El buscador de municipios no funciona 20:31h  
  7. 7. Un mes antes
  8. 8. ¿Que tiene?
  9. 9. ¿Que tiene?
  10. 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. 11. DESARROLLO
  12. 12. Servidor Ministerio del Interior Front-­‐End  –  Client-­‐  Side   Usuarios finales Front-­‐End  –  Server  -­‐  Side  Back-­‐End  
  13. 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. 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. 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. 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. 17. MADRID · NOV 27-28 · 2015 Selección de Herramientas •  AWS •  nginx •  Node.js / Express •  Angular •  D3.js •  Leaflet
  18. 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. 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. 20. php
  21. 21. MADRID · NOV 27-28 · 2015 node.js •  asíncrono •  mismo lenguaje que en el cliente
  22. 22. MADRID · NOV 27-28 · 2015 node.js •  urls •  express •  id de municipio/provincia •  ejs = embedded javascript •  PM2
  23. 23. integración en el CMS
  24. 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. 25. integración en el CMS
  26. 26. mySQL
  27. 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. 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. 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. 30. MADRID · NOV 27-28 · 2015 d3 •  artesanal •  muy buen resultado •  animaciones •  estilos css
  31. 31. ¡¡Por supuesto!! ¿Mapas interactivos en la home?
  32. 32. ¡Pero si hay más de 8200 municipios! ¡¡NO PASA NADAAAA!!
  33. 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. 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. 35. PUESTA EN PRODUCCION
  36. 36. MADRID · NOV 27-28 · 2015 despliegue •  100% automático con 1 comando – git pull – grunt build – restart pm2 – restart nginx
  37. 37. 20:33h  24 de Mayo 2015  
  38. 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. 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. 40. MADRID · NOV 27-28 · 2015 añadir el % escrutado
  41. 41. MADRID · NOV 27-28 · 2015 peticiones servidas •  rendimiento •  páginas vistas
  42. 42. MADRID · NOV 27-28 · 2015 usuarios
  43. 43. MADRID · NOV 27-28 · 2015 carga de CPU
  44. 44. MADRID · NOV 27-28 · 2015 latencia de salida
  45. 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. 46. MADRID · NOV 27-28 · 2015 Muchas Gracias Javier Abadía @javierabadia

×