Kit de mejora: Improvement Kit

Hace un par de días escribía un artículo sobre cómo cambiar el Theme con javascript. En uno de sus párrafos, comentaba uno de las cosas a mejorar del App_Themes.

Describiendo un poco la funcionalidad del App_Themes, básicamente consiste en un directorio especial llamado "App_Themes" dentro del que se crea uno o varias carpetas. Cada una de ellas será un "Theme" particular.

La funcionalidad de esas carpetas es centralizar los estilos de toda la Web con imágenes, estilos .css, estilos .skin... realmente lo que hace es algo complejo, pero vamos a centrarnos en una de esas funcionalidades que yo mejoraría.

Es bastante típico que en el Theme haya varios archivos ".css", de modo que ASP.NET se encarga de añadir el correspondiente elemento "link" en el head de las páginas que definan ese Theme de forma automática.

El problema viene en ese momento: a ningún navegador le gusta que se linkeen varios archivos ".css". El que haya varios implica varias conexiones, y es bastante común que éstas no sean simultáneas, por lo que en ocasiones estamos bajando un fichero ".css" mientras otro está esperando.

Por otra parte, los ficheros ".css" contienen espacios, saltos de línea y comentarios que no son, para nada, necesarios para el navegador, aunque sí para el que está desarrollando esos estilos (si no, sería ilegible).

Conclusión: lo ideal sería que todos los archivos ".css" se juntaran en uno sólo y que, además, éste estuviera comprimido.

Así que, irremediablemente me puse a pensar e hice un HttpModule, de modo que una vez instalado, no hay más que que trabajar como siempre con estilos separados en ficheros, etc. Es el HttpModule el que se encarga de juntar todos los ficheros en uno y comprimirlo.

En líneas generales, su ciclo de vida es:
  • Si no hemos hecho cambios en los ".css" desde la última vez, no hacer nada (esto se hace una variable de cache y un CacheDependency).
  • Si hemos hecho cambios, y por tanto debemos (re)generar el fichero comprimido:
    • Cogemos todos los ficheros del App_Themes y lo metemos en una variables
    • Hacemos la compresión básica: quitar espacios, saltos de línea y comentarios.
    • Creamos el fichero comprimido.
  • En ambos casos, recorremos el HTML resultante y le quitamos los "link" que apuntaban a los diferentes ficheros del Theme, sustituyéndolo por nuestro propio "link" apuntado al fichero comprimido.

Cuando terminé de hacer el código, me di cuenta de que la estructura también me servía para hacer lo mismo con los ficheros javascript... y también con el propio HTML de la página resultante... Así que la solución fue crear un nuevo proyecto en Codeplex (y con éste van cinco) para mostrar lo que había hecho y animar a cualquiera a que me pudiera ayudar añadiendo nuevas cosas.

El proyecto se llama ImprovementKit, y su código podéis utilizarlo libremente como queráis (subgurim.net ya lo implementa). El propio código lleva una página de ejemplo, por lo que os será fácil instalar el módulo.

Desde aquí os hago un llamamiento a que participéis en el proyecto. A lo mejor os apetece que trabajemos juntos en algo, y este proyecto es ideal, porque es bastante sencillo, bastante mejorable y bastante interesante