{"id":29221,"date":"2017-02-16T18:01:21","date_gmt":"2017-02-16T10:01:21","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29221"},"modified":"2017-12-11T05:01:59","modified_gmt":"2017-12-10T21:01:59","slug":"umbrella-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/umbrella-js\/","title":{"rendered":"UmbrellaJS is Your Alternative to jQuery"},"content":{"rendered":"

The open source jQuery library<\/strong> has dominated web development for years. It\u2019s still one of the most trusted resources for JavaScript, but there\u2019s a new library in town<\/strong> called UmbrellaJS<\/a><\/strong>.<\/p>\n

Umbrella is also completely open source<\/strong> and offers much of the same functionality<\/strong> including element selectors, DOM manipulation, and AJAX requests.<\/p>\n

Umbrella JS works almost exactly like jQuery except with different syntax and function calls<\/strong>. So if Umbrella is this close to jQuery, what\u2019s the benefit<\/strong> of using it?<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10 Coolest Features in jQuery 3<\/a>\n\t\t\t\t<\/p>\n

Well, Umbrella is meant to be a much smaller library than jQuery<\/strong> and it\u2019s only for DOM manipulation<\/strong>. And honestly, this library is super compact<\/strong> when compared to jQuery.<\/p>\n

The full Umbrella.js library is about 4KB non-minified<\/strong>. jQuery\u2019s latest version totals over 250KB<\/strong>! So if you\u2019re looking for a simplified version of jQuery<\/strong> then Umbrella will be quicker to load<\/strong> and just as simple to use<\/strong>.<\/p>\n

The online documentation<\/a> offers a list of all the functions and parameters<\/strong> you can pass into those functions. It\u2019s the complete guide<\/strong> to Umbrella and it\u2019s constantly being updated<\/strong>.<\/p>\n

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

The biggest difference<\/strong> is that Umbrella selectors use the u()<\/code> method instead of jQuery\u2019s common $()<\/code>. Here\u2019s a code example<\/strong> that triggers an alert box when someone clicks a button with the class .button<\/code>.<\/p>\n

\r\nu(\"button\").on('click', function(){\r\n  alert(\"Hello world\");\r\n});\r\n<\/pre>\n
It\u2019s a simple example but it perfectly illustrates the value of Umbrella.<\/p>\n
To see a live demo<\/strong> check out this pen<\/a> offering a sample input field selection<\/strong>. All the output code is displayed right on the screen<\/strong>. You can also study the Umbrella JS source code<\/strong> to see how it works.<\/p>\n