UmbrellaJS is Your Alternative to jQuery

The open source jQuery library has dominated web development for years. It’s still one of the most trusted resources for JavaScript, but there’s a new library in town called UmbrellaJS.

Umbrella is also completely open source and offers much of the same functionality including element selectors, DOM manipulation, and AJAX requests.

Umbrella JS works almost exactly like jQuery except with different syntax and function calls. So if Umbrella is this close to jQuery, what’s the benefit of using it?

Read Also:  10 Coolest Features in jQuery 3

Well, Umbrella is meant to be a much smaller library than jQuery and it’s only for DOM manipulation. And honestly, this library is super compact when compared to jQuery.

The full Umbrella.js library is about 4KB non-minified. jQuery’s latest version totals over 250KB! So if you’re looking for a simplified version of jQuery then Umbrella will be quicker to load and just as simple to use.

The online documentation offers a list of all the functions and parameters you can pass into those functions. It’s the complete guide to Umbrella and it’s constantly being updated.

Thankfully, a lot of similar jQuery features are mimicked through Umbrella so the syntax is very easy to read. For example, the on() method is the same and you can pass all the same event listeners such as click or hover.

The biggest difference is that Umbrella selectors use the u() method instead of jQuery’s common $(). Here’s a code example that triggers an alert box when someone clicks a button with the class .button.

u("button").on('click', function(){
  alert("Hello world");
});

It’s a simple example but it perfectly illustrates the value of Umbrella.

To see a live demo check out this pen offering a sample input field selection. All the output code is displayed right on the screen. You can also study the Umbrella JS source code to see how it works.

To learn more about Umbrella check out the official website or peek at the source code live in the GitHub repo.

Read Also:  Six Essential jQuery Practices to Boost Performance