jQuery es, de lejos, la librería de Javascript más popular de estos últimos 5 años. Es potente, fácil de usar y tiene características la mar de útiles. Sin embargo, la última actualizacion de jQuery pesa 250kb. Desde que la velocidad de carga en la web se ha convertido en un aspecto importantísimo, ha surgido otras alternativas más ligeras, como Umbrella JS, que solo pesa 4kb. En este artículo hablaremos de esta nueva y prometedora librería de Javascript.
¿Qué es UmbrellaJS?
Jquery es una librería muy competente. Desde su lanzamiento en 2006, jQuery ha jugado un rol clave en los sitios web tal y como los conocemos hoy en día. De todas maneras, de vez en cuando se liberan nuevas librerías de Javascript. Es el caso de Umbrella JS, una librería fuertemente influenciada por jQuery, pero mucho más comprimida (4kb) y limitada a la manipulación DOM, eventos y Ajax.
¿Cuáles son las principales ventajas de utilizar Umbrella JS?
- Es súper ligera: Umbrella JS solo pesa 4kb comprimida, lo que te asegura una carga súper rápida incluso en dispositivos móviles. Como he comentado antes, la velocidad de carga en los sitios web se ha convertido en un factor importante en los rankings de los principales motores de búsqueda. Además, debemos de tener esto muy en cuenta sobre todo para dichas webs que están pensadas para mostrarse en dispositivos móviles. Una ventaja que no debes menospreciar.
- Es fácil de usar: Umbrella JS está fuertemente influenciada por jQuery. Si conoces la sintaxis de jQuery, adaptarte a Umbrella JS será coser y cantar.
- Es muy completa: A pesar de ser muy pequeña en términos de tamaño, Umbrella JS contiene todo lo necesario para la manipulación DOM, eventos y Ajax.
- Es gratis: Lanzada bajo los términos de la licencia MIT, Umbrella JS puede utilizarse de forma gratuita en todos tus proyectos.
Instalación y uso
Instalar Umbrella JS es muy sencillo. Puedes utilizar el CDN Jsdelivr, o descargar el dichero .js y añadirlo a tu documento HTML.
<script src="umbrella.min.js"></script>
Si quieres probar y experimentar cosas con Umbrella JS, puedes hacerlo en JS Fiddle.
Unos cuantos snippets...
Ahora vamos a ver qué podemos hacer con Umbrella JS. Si te sientes cómodo con jQuery, es muy probable que te resulte sencillo utilizar Umbrella JS.
Evento simple
Gestionar un simple evento: cuando el usuario clica un botón, se muestra un alert.
u("button").on('click', function(){
alert("Hola mundo");
});
target=_blank automático en los enlaces
Un buen ejemplo de la función each(), la cual utilizamos para recorrer todos los nodos y ejecutar un callback para cada uno de ellos.
u('a').each(function(node, i){
u(node).attr({ target: '_blank' });
});
Ajax
Gestionar peticiones Ajax es incluso más sencillo que con jQuery.
u('form').ajax(function(err, data){
if (!err) alert('¡Hecho! Gracias, ' + data.name);
});
Hacer scroll a un elemento
Lo has visto en miles de sitios web. Haciendo clic en un enlace con la clase team haremos scroll al primer elemento section con la clase team.
u('a.team').on('click', function(e){
e.preventDefault();
u('section.team').scroll();
});
Auto-guardado de un formulario cada 10 segundos
Mediante las funciones ajax() y trigger(), solo necesitarás unas cuantas líneas para crear una función de autoguardado para cualquier tipo de formulario
u('form.edit').ajax();
// Submit it every 10s
setInterval(function(){
u('form.edit').trigger('submit');
}, 10000);
Fuente: catswhocode.com