Replacing jQuery (110kb) With UmbrellaJS (8kb)

Umbrella JS maintainer here (the library this HN thread is supposed to be about). At 2.8kb gzipped UmbrellaJS doesn't support partial builds because that'd be a bit funny.

Also, and it seems to be something the author of the article likes a lot, Umbrella JS is closer to Javascript than the libraries you mention (& jQuery). Sure that means you need a bit of editing your code (which is made easy by being able to load both jQuery and Umbrella at the same time), but in the end you have a lot better result. Plugins are just methods extending the prototype, loop methods have similar arguments as Array's methods, which in turn makes it easier than ever to use arrow functions, etc.

But IMHO the killer feature of Umbrella JS is that it's quite well documented, every method has at least an example but usually few, where e.g. cash doesn't have any example interleaved.

Basically this would be my recommendation/conclusion:

- If you have thousands of lines of Javascript/jQuery, I'd recommend Cash/Zepto instead.

- If you just use jQuery for few methods/interaction, 100% go with Umbrella JS.

That's what I did! I saw a lot of people recommending doing basically:

    const $ = sel => [...document.querySelectorAll(sel)];

But then you get to it and are adding a lot of classes, so you might add a couple of helper methods:

    const addClass = (col, cls) => col.forEach(el => el.classList.add(cls));
    const removeClass = (col, cls) => col.forEach(el => el.classList.remove(cls));

    addClass($('ul li'), 'list-item');

Oh and you might need to inject content before/after, that's a bit trickier but thanks to the classic You Might Not Need jQuery[1] we know how to do it:

    const insertBefore = (col, html) => col.forEach(el => el.insertAdjacentElement('beforebegin', html));
    const insertAfter = (col, html) => col.forEach(el => el.insertAdjacentElement('afterend', html));

    insertAfter($('ul li:last-child'), 'New todo item');

Keep going a bit like that, until you realize you are basically reinventing jQuery but pretty badly, undocumented, and untested.

Add a couple of very nice-to-haves, like chaining (instead of nesting in these examples above) and prototypes and that's what Umbrella JS is, very thin methods to manipulate the DOM and handle events. In fact, compare our "addClass" implementation in this comment to Umbrella's addClass[2], it's almost the same size but hundred times more flexible:

    // Add class(es) to the matched nodes
    u.prototype.addClass = function () {
      return this.eacharg(arguments, function (el, name) {
        el.classList.add(name);
      });
    };

[1] https://youmightnotneedjquery.com/

[2] https://github.com/franciscop/umbrella/blob/master/src/plugi...

I generally replace jQuery with something like:

    $ = (s, p = document) => p.querySelector(s)
    $$ = (s, p = document) => p.querySelectorAll(s)

If I’m feeling arrayish I’ll wrap the latter in [...qSA] so I can use .map and the rest of them, otherwise for/of works just as well.

Anyone using $.animate() and $.ajax() this year should probably stop.

I wonder if w3c or whatwg guys considered extending dom spec to support the query / navigation / css helpers.

They have to an extent. `querySelector` / `querySelectorAll` is the clearest example, but many API's presented here came after jQuery and were inspired by it: https://youmightnotneedjquery.com/