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

Post by nomdep » Tue, Jan 18, 2022, 2:15 PM UTC

fabiospampinato wrote: post #16

feupan wrote: post #15

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.

For some basic use cases that's probably good enough, but saying that that can replace jQuery is like saying that farts can replace rocket engines. For example I can do the following with jQuery: $(document).on ( 'click.ns', '.button', callback ); How should one do the same with vanilla JS? You'd end up rewriting a (probably buggy) reimplementation of jQuery's $.fn.on method in the end.

Post by edoceo » Tue, Jan 18, 2022, 2:22 PM UTC

Post by chrisweekly » Tue, Jan 18, 2022, 2:31 PM UTC

Ciantic wrote: post #5

I prefer `querySelector` and bare ` ` tags for quick and dirty jQuery replacement. If you haven't keeping up with all the new script-tag parameters, I suggest looking at this: https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8af... Choosing type=module is usually better choice than classic script tags like in the article. Module tags fetches (if any modules is used) asynchronously, and executes after the pars…

Post by earthboundkid » Tue, Jan 18, 2022, 2:33 PM UTC

franciscop wrote: post #13

Ciantic wrote: post #5

I prefer `querySelector` and bare ` ` tags for quick and dirty jQuery replacement. If you haven't keeping up with all the new script-tag parameters, I suggest looking at this: https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8af... Choosing type=module is usually better choice than classic script tags like in the article. Module tags fetches (if any modules is used) asynchronously, and executes after the pars…

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…

    export function each(qs, cb) {
      if (typeof qs === "string") {
        qs = document.querySelectorAll(qs);
      }
      if (!qs) {
        return;
      }
      if (qs.length === undefined) {
        qs = [qs];
      }
      for (var i = 0; i  {
        el.addEventListener(ev, cb);
        cancelFns.push(() => {
          el.removeEventListener(ev, cb);
        });
      });
      return () => {
        cancelFns.forEach((fn) => {
          fn();
        });
      };
    }

Post by earthboundkid » Tue, Jan 18, 2022, 2:38 PM UTC

wffurr wrote: post #9

Ciantic wrote: post #5

I prefer `querySelector` and bare ` ` tags for quick and dirty jQuery replacement. If you haven't keeping up with all the new script-tag parameters, I suggest looking at this: https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8af... Choosing type=module is usually better choice than classic script tags like in the article. Module tags fetches (if any modules is used) asynchronously, and executes after the pars…

The author mentions that enforces CORS restrictions which would break with their current server settings and CDN, otherwise I think they agree with you.