Umbrella JS: Una pequeña, pero potente, alternativa a jQuery

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

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•