Why Umbrella JS?
jQuery is an amazing piece of code! Since its first release in 2006, jQuery has played a key role in shaping the web as we know it nowadays. Still, every now and then a new JavaScript library is released. One that caught my attention lately is Umbrella JS, a library heavily influenced by jQuery, but way more compact (3kb!) and limited to DOM manipulation, events and Ajax.
So what are the top advantages in using Umbrella JS?
- It’s super lightweight: Umbrella JS is only 3kb minified, which ensures a super fast loading even on mobile devices. Website loading speed is now an extremely important factor in search engine rankings and ease of use for mobile users, so this is indeed a great thing.
- It’s easy to use: Umbrella JS is heavily influenced by jQuery. If you know jQuery’s syntax, adapting to Umbrella JS will be very easy.
- It’s complete: Despite being small in size, Umbrella JS contains everything you need for DOM manipulation, events and Ajax.
- It’s free: Released under the terms of the MIT license, Umbrella JS can be used freely in all your projects.
Installation and usage
Installing Umbrella JS is easy. You can use JSdelivr CDN, or download the .js file and add it to your HTML document:
<script src="umbrella.min.js"></script>
If you want to test and experiment with Umbrella JS, you can do so in JS Fiddle.
A few snippets
Now let’s see what we can do with Umbrella JS. If you’re familiar with jQuery, you will get the syntax very easily. If you want more snippets and examples, check out the documentation.
Simple event
Handling a simple event: When the user clicks on a button, an alert is displayed.
u("button").on('click', function(){
alert("Hello world");
});
Automatic target=”_blank” on links
A good example of the each() function, which is used to loop through all of the nodes and to execute a callback for each.
u('a').each(function(node, i){
u(node).attr({ target: '_blank' });
});
Ajax
Performing ajax requests is even easier than with jQuery.
u('form').ajax(function(err, data){
if (!err) alert('Done! Thanks, ' + data.name);
});
Scroll to an element
As seen on many websites, clicking on a link with the class team will scroll to the first <section> element with the class team:
u('a.team').on('click', function(e){
e.preventDefault();
u('section.team').scroll();
});
Auto-save a form every 10 seconds
Using the ajax() and trigger() functions, it only takes a few lines to create an auto-save function for any kind of form.
// Make the form to submit through ajax
u('form.edit').ajax();
// Submit it every 10s
setInterval(function(){
u('form.edit').trigger('submit');
}, 10000);
Do you have any Umbrella JS experiences to share? Leave a comment below.