HeadJS un script para todos los demás

HeadJS es una librería javscript que tiene multitud de virtudes, pero sobre todas ellas yo destacaría las siguientes:

Cargar Javascript en Paralelo:

HeadJS nos facilita cargar varios javscript en paralelo, pero ejecutarlos en orden.

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
    // all done
});

Esto nos permite cargar librerías javascript sin bloquear la página, y reducir el número de peticiones al servidor.

Puede parecer una tontería, pero el cargar los javascript en paralelo puede hacer que nuestra pagina reduzca el tiempo de carga en varios segundos, dando a nuestros usuarios la sensación de que nuestra web es mucho más rápida.

Degración de CSS 3

HeadJS añade clases a la etiqueta HTML, informándonos de la capacidad del navegador para soportar determinadas propiedades de CSS3

/* target CSS for browsers without box-shadow support */
.no-boxshadow .box {
    border: 2px solid #ddd;
}

Diferentes diseños para diferentes dispositivos

Podemos definir diferentes estilos en función del tamaño de la pantalla. Si el usuario redimensiona la pantalla, las reglas CSS cambiarán automáticamente.

/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }

/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }

Otras Ventajas

• También nos permite usar etiquetas de HTML5 aunque el navegador todavía no lo soporte
• Detección del navegador
• Es una librería muy ligera. Tan solo pesa 2.5Kb (minimizada y comprimida)
• …

Si queréis conocer en mayor profundidad esta librería os recomiendo leer la documentación desde su web

Uso

Todos los scripts se cargar a través de head.js()

// el caso mas simple.carga y ejecuta un fichero js.
head.js("/path/to/file.js");

// carga un script y ejecuta una function cuando se cargue
head.js("/path/to/file.js", function() {

});

// carga ficheros en paralelo pero ejecutalos en el siguiente orden
head.js("file1.js", "file2.js", ... "fileN.js");

//carga los ficheros  en paralelo y ejecutalos segun se carguen
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

//el ejemplo anterior también se puede poner así
head.js("file1.js").js("file1.js").js("file3.js");

Con head.js() podemos ejecutar javscript antes de que los scripts sean cargados. Esto elimina ese molesto lapso de tiempo que pasa desde que se carga el HTML de la pagina hasta que se ejecuta el $(document).ready()

Organización de Script

// llamar a una funcción después de que todos los scripts hayan sido cargados
head.ready(function() {   });

// llamar a una funcción cuando un determinado fichero sea cargado
head.ready("file2.js", function() {   });

Estos es útil cuando tienes ficheros javasciprt muy grandes, y quieres ejecutar algo antes de que sean cargados.

// head.ready() tambien se puede escribir así

head(function() {   });

Configuración

HeadJS es configurado con un variable global llamada head_conf antes de que el script sea cargador:

<script>
    var head_conf = { screens: [640, 1024, 1280, 1680] };
</script>

<script src="/js/head.min.js"></script>

Conclusión

En definitiva, esta parece una herramienta extremadamente útil y fácil para cargar asíncronamente nuestro javascript. Además aporta otras ventajas, que siendo en mi opinión de menor importancia, pueden ser también de gran utilidad.

Estoy deseando poderlo probar en un proyecto real, y así comprobar de todo lo que es capaz.

Y Vosotros ¿lo habéis probado ya? ¿os ha gustado? ¿conocéis alguna otra alternatíva?