Recientemente he publicado una librería open source llamada Jawr. Se trata de una herramienta que ayuda a los desarrolladores web en la creación y mantenimiento de código javascript usando un sistema modular, en lugar de meter todo dentro de uno o dos archivos enormes. También hace funciones de compresión, tanto para javascript como para CSS. Además de permitir estructurar el código en archivos separados, reduce los tiempos de carga de las páginas al minificar y comprimir los archivos hasta la séptima parte de su tamaño original.
La actual tendencia hacia aplicaciones web "ricas" lleva a un aumento en el uso de javascript y AJAX. Esto implica que el volumen y complejidad del código javascript en una aplicación promedio ha crecido considerablemente.
El programador java está acostumbrado a distribuir el código en módulos separados (clases), cada uno de los cuales reside normalmente en un archivo independiente. Sin embargo, al desarrollar en javascript hay que tener en cuenta que los clientes deben descargarse el código mediante peticiones HTTP. Los navegadores más usados hacen solo dos peticiones HTTP concurrentes contra el mismo host, de modo que cuantos más archivos haya que descargar, tanto mayor será el tiempo que tarda en cargar una página.
En consecuencia, una aplicación en la que el javascript esté altamente modularizado tendrá unos tiempos de carga de página inaceptables. Podeis leer un artículo muy interesante sobre este tema en este artículo de uno de los autores de Flickr: Serving JavaScript Fast.
¿Cómo se resuelve este problema? Las soluciones más habituales normalmente dificultan el proceso de desarrollo:
- La forma más sencilla de solucionar el problema es meter todo el javascript en unos pocos archivos enormes. Estos archivos son difíciles de mantener: es difícil localizar partes específicas del código, hay que tener cuidado cuando varias personas tocan el archivo a la vez, y es difícil seguir el historial de cambios en el control de versiones.
- Por otro lado, se puede crear un script de construcción (tipo ant) que una todos los módulos al compilar el proyecto. Esto tiene la desventaja de obligarnos a hacer un ciclo completo de compilación-redespliegue cada vez que queremos probar el mínimo cambio al javascript o CSS. Además, hay que tomarse el trabajo de crear el script de construcción y mantenerlo, cosa que al final no se hace salvo en los proyecto más grandes (y ni aún en estos).
Jawr permite crear archivos .js y .css 'virtuales' que se denominan bundles (paquetes). Usando un sencillo archivo .properties, se añaden archivos individualmente o directorios enteros a los paquetes. Funciona del siguiente modo:
- Cuando se despliega en producción, Jawr minifica y une todos los archivos que pertenecen a los paquetes. Los paquetes se crean en una versión normal y otra comprimida con gzip. Este proceso tiene lugar en el momento del despliegue de la aplicación, de modo que después no hay un coste de proceso añadido a las peticiones.
- Una tag library se emplea para generar enlaces en las páginas, que convierten una referencia a un .js particular en un enlace al paquete al que dicho .js pertenece.
- Un servlet se configura para atender peticiones para archivos .js y .css. En caso de que el navegador lo permita, el contenido se enviará comprimido con gzip.
Jawr tiene un modo de ejecución para desarrollo en el que los paquetes no se utilizan. En lugar de esto, la tag library crea enlaces individuales para cada uno de los miembros del paquete, que se sirven sin minificar ni comprimir. Esto permite realizar un desarrollo sobre directorio WAR explotado, en el que podemos cambiar código javascript, refrescar una página y ver inmediatamente los cambios.
Para cambiar del modo de producción al de desarrollo no hay más que cambiar un flag del archivo .properties de configuración. Otras ventajas incluyen el uso de técnicas de cacheo agresivas, para forzar a que los clientes no descarguen los paquetes más de una vez, la posibilidad de declarar paquetes globales que se cargan automáticamente en cada página, mecanismos sencillos para especificar el orden en que se empaquetan los archivos, etc.
Eso sí, la documentación, aunque bastante completa, está toda en inglés... sorry! :-(
Podeis descargarlo de esta dirección. (También se puede usar el Maven).
miércoles, febrero 6, 2008 at 9:29AM