2 alternativas a jQuery muy interesantes si buscas mejorar el wpo de tu sitio

En estos últimos años la velocidad de carga de los sitios webs ha ido cobrando cada vez más importancia debido principalmente a 2 factores, el primero es que la navegación web es cada vez en mayor porcentaje utilizada en dispositivos móviles, el segundo que viene heredado del primero se llama Google, y es que el gigante Google está cada vez más empeñado en que las webs carguen de forma más rápida, no hay más que fijarse en como analiza Page Speed Insights las url, no perdona nada.

Es por esto que necesitamos herramientas más livianas pero que nos aporten algo de flexibilidad y productividad, después de probar muchas de ellas me quedo con dos en especial, Umbrella JS y Zepto Js, no sabría decir cual de las dos es mejor, las dos son estupendas opciones y vienen pisando fuerte, comencemos con Umbrella JS.

Umbrella JS (4kb)

Umbrella JS es una pequeña, pero potente, alternativa a jQuery, su popularidad ha logrado obtener una posición entre las primeras opciones, es muy rápida en cuanto a la velocidad de carga, funciona perfectamente de forma comprimida y se basa en la sintaxis de jQuery, algo muy interesante, se presenta como una Pequeña biblioteca para eventos y manipulación DOM.

Esta librería comparte muchas características con jQuery, lo cual resulta muy cómodo para evitarnos una alta curva de aprendizaje, utiliza el método u() en lugar de la función $() de jQuery, para el resto comparte en gran medida métodos e identificadores por lo que si ya conoces jQuery te resultará muy cómodo su uso.

Ejemplo:

// Elementos
u("input").on('click', function(){
  alert("Bienvenido a Umbrella JS");
});
// Clases
u(".clase").on('click', function(){
  alert("Bienvenido a Umbrella JS");
});
// IDs
u("#identificador").on('click', function(){
  alert("Bienvenido a Umbrella JS");
});

Por si fuera poco, en la web del proyecto original podemos encontrar un acceso a “Try it” donde podemos probar las caracteristicas de esta librería, así como la descarga, cdn y documentación, tiene licencia MIT y puedes usarla de forma comletamente gratuita además de ofrecer su código fuente en github.

Proyecto original de Umbrella.js

Zepto Js (5kb)

Zepto.js tiene un ensamblaje modular, gracias a esa característica, podemos aumentar o quitar módulos según las necesidades que requiera nuestro proyecto, esto lo convierte en el mejor reemplazo de JQuery, su peso es poco más alto que Umbrella JS por lo que es una opción muy recomendable, aunque su tecnología modular es un punto más a su favor esto último puede hacer crecer el peso de nuetro js, si tienes experiencia en Vanilla JS puedes ahorrarte módulos y peso o utilizar Umbrella JS que no dispone de ellos.

Ejemplo:

var elem = $('#content')
// observe all clicks inside #content:
elem.on('click', function(e){ ... })
// observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e){ ... })
// all clicks inside links in the document
$(document).on('click', 'a', function(e){ ... })
// disable following any navigation link on the page
$(document).on('click', 'nav a', false)

En la web del proyecto original de esta librería podemos encontrar la descarga, cdn y documentación

Proyecto original de Zepto.js