Los sistemas Web ya no se construyen a partir de piezas fundamentales o marcos "pelones", sino que parten necesariamente de combinar una gran cantidad de recursos creados por terceros — Por un lado, bibliotecas diversas para su ejecución en el lado del servidor, y por otro lado, proyectos Javascript que son enviados al cliente, apoyando no sólo a la parte estética sino, cada vez más, a la funcionalidad de la aplicación. Ahora, si nuestros proyectos son enjambres de código de terceros, resulta fundamental tener cómo dar seguimiento a sus nuevas versiones, corregir problemas en dicho código, e incluso evitar introducir disonancia que modifique la ejecución.

1. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Puntos débiles de prácticas comunes
en desarrollos Web
Gunnar Wolf
Desarrollador del proyecto Debian
Instituto de Investigaciones Económicas UNAM
Facultad de Ingeniería UNAM
21 de octubre, 2015

2. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Contenidos
1 Panorama histórico
2 El ciclo de vida de un desarrollo
3 Bundling
4 Minicación
5 Fin

3. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Antes de comenzar
Daremos un breve recorrido por los últimos 25 años del
desarrollo de la Web, para apreciar cómo ha ido
incrementando la complejidad del entorno.
Particularmente, en cómo hay cada vez mayor diferencial
de impedancia entre desarrolladores, administradores de
sistemas e integradores.
Y si somos ambiciosos, apuntaremos a su disminución.

4. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
HTTP y la World Wide Web
Tim Berners-Lee, CERN, 1989
Primer navegador, 1998
Sistema concebido para compartir documentos
estáticos interrelacionados (hipertexto → 1950s)
Esquema originalmente orientado al texto
Entorno académico
Mosaic Web Browser (1993): Primer navegador que
presenta junto texto e imágenes
1995: Internet para uso personal y comercial →
½Boom!

5. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Contenido dinámico: CGI
Wikimedia Commons
1993: El National Center for
Supercomputing Applications publica
la especicación para hacer llamadas
a ejecutables desde un servidor Web
Paso de parámetros al ambiente
Etiquetas para formularios
Nacimiento del contenido dinámico
CGI + DBMS = CMS
...Lento y plagado de problemas de
seguridad

6. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Servidores de aplicación
Servidor Web y servidor de aplicación se comunican
por un socket
Coldfusion, Java Servlets, mod_perl, FastCGI...
Separación de responsabilidades
Permite al mismo servidor ejecutar código bajo
diferentes permisos del sistema
Desacopla, reduce supercie de ataque
Mayor rapidez de respuesta
Evita la ejecución de un proceso por solicitud
... Invitación a la complejidad

7. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Marcos de desarrollo Web (frameworks)
Ya teniendo la infraestructura básica de un servidor
de aplicación, no tardaron en aparecer los
frameworks
Cientos de distintos frameworks, varios por lenguaje
Conocimiento no trasladable entre lenguajes,
incluso entre distintos marcos
Ofrecen al programador:
Integración entre componentes
Mayor automatización
Abstracción
Mapeadores objeto-relacionales
Persistencia
Velocidad de desarrollo
...

8. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Comunidades de creadores
Prácticamente todos los marcos han creado
comunidades de autores de código
Se nutren de ellas
Le dan mayor dinamismo al marco
Generan módulos que agregan funcionalidad
Generan arquitecturas de gestión de módulos

9. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
XMLHttpRequest / AJAX
Javascript deja de ser el patito feo para ser parte del
engranaje fundamental
Por n, sitios Web plenamente dinámicos
Actualización parcial de las páginas
Explotación del DOM
Menor tiempo de satisfacción al click
Menor carga al servidor
No requiere regenerar los elementos constantes
Muchos nuevos frameworks y bibliotecas para
aprovechar esta nueva funcionalidad

10. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
El lado doloroso de AJAX
Pérdida del URL como descriptor del contenido
Contenido oculto que requiere navegación
Nuevas categorías de vulnerabilidades
XSS, CSRF, inyección de encabezados, nuevas
posibilidades para MITM...
Muchos más puntos de costura para hacer un
análisis de riesgos al trasladar entidades entre capas

11. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Flash
Si no tienes nada bueno que decir de algo...
No digas nada
A algunos les gusta...
Por suerte está camino a la desaparición...
Lentamente...

12. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Flash
Si no tienes nada bueno que decir de algo...
No digas nada
A algunos les gusta...
Por suerte está camino a la desaparición...
Lentamente...

13. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Flash
Si no tienes nada bueno que decir de algo...
No digas nada
A algunos les gusta...
Por suerte está camino a la desaparición...
Lentamente...

14. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Flash
Si no tienes nada bueno que decir de algo...
No digas nada
A algunos les gusta...
Por suerte está camino a la desaparición...
Lentamente...

15. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Flash
Si no tienes nada bueno que decir de algo...
No digas nada
A algunos les gusta...
Por suerte está camino a la desaparición...
Lentamente...

16. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Contenidos
1 Panorama histórico
2 El ciclo de vida de un desarrollo
3 Bundling
4 Minicación
5 Fin

17. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Sobrecaracterizando
Los caracteres reseñados en esta sección
son cticios (y pueden estar exagerados).
Cualquier parecido con la realidad es
mera coincidencia.

18. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
La visión del desarrollador (1)
Flickr: aashehadeh
Resolver las necesidades del usuario
Empleamos las últimas versiones
de todo el stack
Mejorando usabilidad
Aumentando funcionalidad
La versión para la cual el autor
mantiene soporte
Única prioridad: La entrega (y, por
ende, un usuario contento y
satisfecho con lo pactado)

19. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
La visión del desarrollador (2)
Mantenibilidad
Si se solicitan adecuaciones, se dará mantenimiento
al sistema
Mientras tanto, si funciona, no lo arregles
Despliegue
Documentación básica
...Con suerte cae en el ámbito del
administrador...
Seguridad
Emplear bibliotecas con buena trayectoria
demostrada
Es buena práctica, pero... ¾Hay procedimientos
para reaccionar ante amenazas imprevistas?

20. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
La visión del administrador de sistemas (1)
Neowin
Flickr: Aaron Muszalski
Mantener a todos los sistemas ya
existentes funcionando en conjunto
Emplear el menor número posible
de versiones distintas
De ser posible, provistas y
gestionadas por la misma
distribución (al menos en el caso
de Linux)
Principal prioridad: No disrupción
de otros servicios

21. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
La visión del administrador de sistemas (2)
Mantenibilidad
Software que me de conictos para su
mantenimiento no entra a mi sistema.
Todo debe ser actualizable de forma regular y
automática
Despliegue
Prueba de stress principal para cualquier desarrollo
Si el programador hizo un excelente trabajo,
veremos un despliegue decente
Seguridad
Múltiples sistemas coinstalados, responsabilidad
sobre un gran número de bellos y únicos copos de
nieve
Revisión proactiva y periódica (½con peligro real de
rechazo!) del software instalado

22. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
½DevOps al rescate!
Wikipedia: Scrumban
Flickr: Paul Downey
Popularización de los Development
and Operations
½Metodología ágil!
La tecnología al rescate
Pruebas extensivas
Integración continua
Empleo extensivo de
virtualización/contenedores para
el despliegue: Una máquina
virtual por aplicación

23. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
DevOps: Crónica de un fracaso anunciado
Enfoque en la separación entre aplicaciones
Demasiadas máquinas virtuales → demasiadas
instalaciones independientes a mantener
Actualizaciones de seguridad: Siguen rompiendo mis
aplicaciones
Resulta más fácil probar antes de parchar
Resulta más difcil corregir el daño

24. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Conforme los sistemas se vuelven legacy
Ashminder Ubhi
Las mejores prácticas actuales
disminuyen la probabilidad de que
los sistemas tengan una larga y
fructífera sobrevida
¾Fail early, fail often?
Desarrollos van, desarrollos vienen
Conforme más ágil la cultura de
un lenguaje de programación,
mayor rotación entre sus
bibliotecas consentidas
¾Tendrá soporte libfoobar
dentro de dos años? ¾Dentro
de cinco?

25. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Buscando la rama estable
Gerald England
Public Domain Images
Wikipedia: Glaze ice
Como administrador, tiendo a preferir
la rama estable de mi sistema
operativo
Muchos sistemas incluyen a decenas
de miles de aplicaciones y
bibliotecas con soporte a largo
plazo (2-7 años típicamente)
Como desarrollador, puedo buscar
alejarme lo menos posible de la rama
estable
Me limita un poco, sí, pero brinda
garantías muy importantes

26. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Dos casos particulares
A continuación, se abordan dos casos particulares de
prácticas cuestionables muy frecuentemente encontradas
en desarrollos Web: El bundling y la minicación.
Ambas se conectan con lo aquí presentado por enfatizar
en lo inmediato y desestimar al largo plazo.

27. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Contenidos
1 Panorama histórico
2 El ciclo de vida de un desarrollo
3 Bundling
4 Minicación
5 Fin

28. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Bundling
Wikipedia: Red tape

29. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Bundling
Wiktionary: Feuerholz

30. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Presentación del problema
En el desarrollo de mi proyecto, requiero una gran
cantidad de bibliotecas como dependencia
Dicultad de especicar expresamente mis
dependencias como requisitos de construcción
Diferentes lenguajes
Comportamientos especícos
Versiones particulares de API
...
Mención horroríca: bundling + modicación
Además de emplear una biblioteca, requiero
modicarla o extenderla para que el
comportamiento sea el que requiero

31. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
¾Y qué es bundling?
Distribuir una copia entera de un proyecto
(programa, biblioteca, ...) dentro de otro
En vez de declarar una dependencia externa
Facilita el despliegue, la convivencia de proyectos
con dependencia a distintas versiones del mismo
software
Permite modicar el comportamiento de una
biblioteca base
Referencia de lectura: Fedora opens up to building (LWN oct-2015)

32. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
¾Por qué es un problema? ¾Qué debería
hacer?
Abre grandes problemas en mantenibilidad,
seguridad
Diferentes versiones de la misma biblioteca entre
aplicaciones
Desperdicio de espacio
Pesadilla administrativa para corrección de
vulnerabilidades
Tira por la borda todo compromiso LTS de la
distribución
Dicultan compartir datos comunes entre
aplicaciones

33. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
El coco de los proyectos grandes
Muchos proyectos han evaluado las
opciones, y decidido incluir decenas
de bibliotecas
Pero para distribuir en una versión
estable, se vuelve un dolor de
cabeza burocrático
A modo de ejemplo, Drupal:
Various asset (JavaScript) libraries
have to be updated to a (minied)
stable release prior to 8.0.0
Desgaste burocrático derivado
de mantener al día todos los
proyectos incluidos

34. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
El coco de los proyectos grandes
¾Y tras la liberación de su siguiente versión estable?
La lista dejará de ser mantenida
El seguimiento de cada versión de cada proyecto se
vuelve responsabilidad de los desarrolladores
De otro modo, le estarían endosando la factura al
usuario nal
...Que muchas veces no sabría o no podríá hacerlo

35. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Una vía de solución: Las distribuciones
En el mundo Linux, las distribuciones mantienen
colectivamente a decenas de miles de paquetes
Dependencias resueltas, probadas, coherentes
Ciclos de liberaciones estables acorde a cada una
Liberaciones continuas (Gentoo, Arch)
Ciclos cortos: 6 meses (Fedora, Ubuntu)
Ciclos medianos: 2 años (Debian, RedHat, SuSE)
Ciclos largos: 5 años (Debian+LTS, Ubuntu LTS,
RedHat)
Desarrollar sobre la última versión estable
O dependiendo del proyecto, sobre la pre-estable
buscando empatar ciclos

36. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Contenidos
1 Panorama histórico
2 El ciclo de vida de un desarrollo
3 Bundling
4 Minicación
5 Fin

37. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Minicación

38. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Minicación
Práctica de procesar archivos JavaScript previos a
enviarlos al usuario para reducir su tamaño
Eliminando información redundante (espacio en
blanco, comentarios)
Recortando nombres de variables, funciones, clases,
tanto como sea posible
Sin alterar su funcionalidad
¾Nos vas a salir con que esto también es malo?

39. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Ojo: Minicación no es agregación
Una práctica común (y positiva) es agregar los
diversos archivos Javascript (así como, por su parte,
las hojas de estilo) en un sólo archivo
Esto disminuye fuertemente el tiempo de espera del
cliente, sin efectos colaterales dañinos
Ataca la latencia de cada transferencia

40. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Minicación
Sí.
Mejoría insuciente
Entorpece depuración
Puede introducir comportamientos no deseados
A continuación, un experimento meramente indicativo,
realizado sin rigor cientíco

41. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Midiendo las ventajas
Transferencia de un archivo JS sin minicar (16K,
jquery.ui.autocomplete.js):
Red doméstica: 1.214s a 1.227s
Promedio 1.2217s
Red empresarial: 0.253s a 0.335s
Promedio 0.3129s
Mismo archivo minicado (8.6K):
Red doméstica: 1.140s a 1.148s
Promedio 1.1423s
Red empresarial: 0.259s a 0.268s
Promedio 0.2633s
Ganancia:
Doméstica 16%
Empresarial 6%

42. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Aparentemente. . .
Un 16% de ahorro para mis usuarios DSL... Suena a un
buen ahorro, ¾no?
Sí, pero. . .
Patrones de solicitud en aplicaciones
¾Cuántas veces se solicitan los recursos JavaScript?
Siendo contenido estático, persisten en el caché del
usuario
¾Y el Javascript generado dinámicamente?
Si se elige generación dinámica para facilitar la
minimización, se abren otros varios frentes (que
muy pronto abordaremos)

43. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
¾Y la compresión?
Los navegadores actuales manejan compresión gzip
de forma transparente
El mismo archivo se comprime a 4.55KB
Minicado se comprime a 2.6KB; la diferencia de
1.9KB ya no es signicativa para la transferencia
Nuestro servidor Web puede congurarse para
comprimir todo el contenido al vuelo
O se puede pre-comprimir, para ahorrar tiempo de
CPU
El algoritmo es poco pesado

44. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Entorpece depuración
Como desarrolladores, contar con una consola de
JavaScript para depurar el comportamiento de
nuestro desarrollo es fundamental
Podemos manejar entorno de desarrollo (sin
minicar), entorno de producción (minicado)
...¾Y los bugs que sólo se presenten en
producción?
...¾Y los usuarios que quieran escudriñar nuestro
comportamiento?
Puede que se busque ocultar expresamente. . .
Pero típicamente se emplea minicación sobre
bibliotecas (jQuery, Farbtastic, CKEditor, etc.)
que no tiene sentido alguno ofuscar

45. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Comportamientos no deseados
Un minicador es en realidad un tipo particular de
compilador
Lenguaje fuente y objetivo son iguales
Transpilador Algunos convierten entre versiones
de JavaScript
UglifyJS: ES6 → ES5 por compatibilidad con
clientes.
Incluso si no hay transpilación, hay compilación
Lexeo, parseo, reescritura de símbolos locales,
reducción lógica, eliminación de código muerto,
funciones en línea...
Hay pruebas de concepto que explotan errores de
interpretación de ciertos minicadores /
compiladores

46. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Referencias a ejemplos de estos
comportamientos
Backdooring your javascript using minier bugs
(Yan / @bcrypt ago-2015)
Discusión relacionada en Hacker News
Hilo de correo en debian-devel iniciando en mensaje
de Simon Josefsson (ago-2015)
Respecto a compiladores en general:
PoC||GTFO (Travis Goodspeed 2013-2015)
Towards optimization-safe systems: Analizing the
impact of undened behavior (Xi Wang et. al.
nov-2013)

47. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Contenidos
1 Panorama histórico
2 El ciclo de vida de un desarrollo
3 Bundling
4 Minicación
5 Fin

48. Puntos débiles
de prácticas
comunes en
desarrollos Web
Gunnar Wolf
Panorama
histórico
El ciclo de vida
de un desarrollo
Bundling
Minicación
Fin
Hemos terminado.
¾Dudas o comentarios?
Gunnar Wolf
gwolf@debian.org
http://gwolf.org/