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