Date post: | 09-Jan-2017 |
Category: |
Software |
Upload: | javier-abadia |
View: | 773 times |
Download: | 3 times |
MADRID · NOV 27-28 · 2015
Resolviendo la Noche Electoral AWS | Node.js | Angular.js | D3.js | Leaflet.js
Javier Abadía @javierabadia
MADRID · NOV 27-28 · 2015
¡PANICO!
• Los datos no se actualizan • El buscador de municipios no funciona
20:31h
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
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
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
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
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
• urls • express • id de municipio/provincia • ejs = embedded javascript • PM2
MADRID · NOV 27-28 · 2015
integración en el CMS • iframe
¿y donde está el código de municipio?
mediante el header ‘Referrer’
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
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
MADRID · NOV 27-28 · 2015
despliegue
• 100% automático con 1 comando – git pull – grunt build – restart pm2 – restart nginx
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
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