Generar recursos estáticos con wro4j

El desarrollo y las tecnologías de las páginas web sigue evolucionando, HTML 5, JavaScript, CSS 3, diseño adaptable (responsive), … Y también surgen nuevas herramientas que hacen el desarrollo más simple o hace que las aplicaciones sean más eficientes. Algunas de estas nuevas tecnologías son less o Sass que permiten producir hojas de estilo CSS utilizando una mejor notación, si la hoja de estilos es grande usar una tecnología como esta puede reducir considerablemente su tamaño, hacerla más legible y de más fácil mantenimiento, CoffeeScript también puede hacer más simple el desarrollo de la parte cliente de una aplicación, proporciona una sintaxis más clara (para algunos) que la ofrecida por el propio lenguaje JavaScript, que compilados generan su equivalente en JavaScript.

También hay herramientas para optimizar los recursos eliminando los espacios innecesarios reduciendo su tamaño, la reducción conseguida variará en función del tamaño del archivo. En los archivos JavaScript la reducción puede ser mayor ya que aparte de eliminar los espacios en blanco se pueden renombrar los nombres de las variables, funciones y argumentos por otros más cortos consiguiendo una mayor reducción de tamaño. Esta minificación puede servirnos para ofuscar el código si queremos dificultar su lectura para las personas.

En Java disponemos de la librería wro4j (Web Resource Optimizer for Java) para hacer este procesado de conversión y optimización desde nuestra aplicación. Puede interesarnos si el framework web no ofrece esta funcionalidad o en una aplicación standalone como ha sido el caso de Blog Stack donde la he usado para en vez de usar CSS directamente usar un archivo less y luego transformarlo a CSS. Su uso no es complicado y puede mejorar nuestra aplicación o el desarrollo de la misma notablemente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

//
Resource resource = Resource.valueOf("script.coffee", ResourceType.JS);
Reader reader = new FileReader("path/to/script.coffee");
Writer writer = new FileWriter("path/to/script.js");

// Transforming a CoffeeScript file into a JavaScript file
new CoffeeScriptProcessor().process(resource, reader, writer);

// Using UglifyJs
new UglifyJsProcessor().process(resource, reader, writer);

//
Resource resource = Resource.valueOf("style.css", ResourceType.CSS);
Reader lessReader = new FileReader("path/to/style.less");
Reader sassReader = new FileReader("path/to/style.sass");
Writer writer = new FileWriter("path/to/style.css");

// Using Less
new LessCssProcessor().process(resource, lessReader, writer);

// Using Sass
new SassCssProcessor().process(resource, sassReader, writer);

Aparte de los procesadores de este ejemplo wro4j tiene disponibles muchos otros. Este procesado es algo costoso en cuanto a tiempo pero el archivo producido podemos cachearlo al inicio de la aplicación o después de compilarlo.

Si queremos usarlo en una aplicación web Java y el framework que usemos no lo usa internamente o no proporciona algo parecido podemos seguir 3 para emplear wro4j, añadir un filtro, una configuración en XML y una etiqueta link y otra script para incluirlos en las páginas, por supuesto habrá que añadir la dependencia de la librería con la herramienta de construcción automatizada Gradle u otra.