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.
That’s where Umbrella JS comes into the mix.
What is Umbrella JS?
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
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
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.
Here is my website again using Umbrella JS. On a mobile with a 3G-connection, Umbrella JS took 206ms to load.
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.
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/