2

Umbrella JS is Your Alternative to jQuery

So far jQuery one of the javascript libraries dominated the web development area. One can say without any doubt its the most trusted tool for development. But these days jQuery library size exceeds more than 250 KB. It seems ridiculous when search engines are giving priority for website speed. jQuery framework gained more popularity than any of its competitors.


For those who interested, there is a new player called Umbrella JS.

Why Umbrella JS?

Umbrella Js is also completely open source and giving the same features like jQuery element selectors, DOM manipulation and AJAX operations.

The biggest advantage is its size, you won’t believe, it’s just 4 KB non-minified. jQuery’s latest version totals over 250KB! Nowadays website loading is important for search engine rankings and mobile loading.

Most of the features they kept same as jQuery, so the syntax is very easy to read. All I can say the biggest difference is instead of $() function, it depends on u().  I show sample code that fires a click event and alert a Hello World message.

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

Main advantages in short

  1. Lightwieght
  2. Easy to use
  3. Its free
  4. Well Documented

Below I have added some code samples for various features

.addClass()

u('.div').addClass('colorbox');

.scroll()

On click event, scroll the first <section> element with the class “team”:

u('a.team').on('click', function(e){
e.preventDefault();
u('section.team').scroll();
});
Editorial Staff
 

Editorial Staff at tutsplanet is a dedicated team to write various tutorial articles.

  • Alex

    Typo in your docs “..addClass()” <— should only be one "."

    • rintoug

      Corrected Alex. Thanks!