Keeping your code DRY with Umbrella JS

in Front-End Development

The new era is here! Now that Microsoft has stopped supporting older versions of IE, we as Front End Developers can now look to use alternative lightweight solutions that no longer rely on jQuery.

We can focus more on using efficient JavaScript libraries without thinking “Is it supported in IE8?” and start saying “We can finally use this awesome feature!”.

That’s where Umbrella JS comes into the mix.

What is Umbrella JS?

Umbrella JS is a small JavaScript library that can be used as an alternative to jQuery. I know right now you’re thinking “Why would I use this when I can write vanilla JS?”, well unfortunately there are some things that are quite ugly and repetitive to write in Vanilla JS. For example; this is how you would use the filter method in Vanilla JS:

Array.prototype.filter.call(document.querySelectorAll('a'), filterFn);  

This can be simplified a lot using Umbrella. For example:

var links = u('a').filter('.active');  

Looks simple, right?

Umbrella JS covers functions like the example above that makes our development simpler to do. It's very similar to jQuery in terms of how to write the code so the learning curve is very simple to get to grips with.

Here is a list of facilities Umbrella JS provides:

  • Dom Traversal – selectors, filter, find, each, etc
  • Dom Editing – classes, attributes, html, before, etc
  • Event Handling
  • AJAX

This all sounds awesome, but what other advantages does this library have to convert me over?

From a personal experience with the library the pros I found using it were:

  • Good documentation & quick Github responses
  • It's 4kb minified size and 2kb g-zipped
  • Mobile applications will load a lot faster
  • More leverage on our performance budgets
  • Easy to convert from jQuery

Performance

Recently we are seeing a trend on performance and there is now evidence to show that the better performance your website has, the more likely the user will stay on your page.

I converted my website over to using Umbrella JS to bring to you some very interesting statistics which will give you an insight to how this could save your website a couple of seconds on your page load time.

Here is my website using jQuery. On a mobile with a 3G-connection, jQuery loaded in 2.14s.

IMG ALT TXT

Here is my website again using Umbrella JS. On a mobile with a 3G-connection, Umbrella JS took 206ms to load.

IMG ALT TXT

Replacing jQuery with Umbrella JS saved me 2.05s load time and the content loaded to the page in 653ms.

If Umbrella JS didn’t have a function I needed, what could I do?

Umbrella JS uses a constructor pattern so adding new functions can be really easy. Here is an example of me adding a new feature by creating a new prototype method.

IMG ALT TXT

Conclusion

I believe that this is a very useful tool and has really good potential to be a good piece of technology that pushes us more towards writing awesome JavaScript code.

Here are the reasons why I use this:

  • My mobile sites will load a lot faster
  • Freedom to add more functions
  • Easy to learn

So feel free to tell me what you think. What are your experiences with the library?

For more information about Umbrella JS - http://umbrellajs.com/