[jnbiche]

Next time, try dropping jQuery, too, and just using vanilla JavaScript. Just for fun. Simple DOM manipulation is now as simple in vanilla JavaScript as jQuery, with the only big advantage jQuery has now is if you're animating. You may find you're not missing much. You'd have to get used to slightly more involved Ajax syntax, unless you can target only new browsers, in which case the `fetch` API is just as convenient as jQuery's Ajax.

Heck, if you can can transpile to ES6 or if you're only targeting new browsers, you could probably even drop the Handlebars in factor of template literals without losing too much convenience.

[beebs93]

> ...with the only big advantage jQuery has now is if you're animating.

While you can probably get away with using $.animate for very simple animations, you'll run into jQuery's animation performance problems before too long.

See: - http://wilsonpage.co.uk/preventing-layout-thrashing/ - http://velocityjs.org/

[jnbiche]

Yeah, but then you just add velocityjs (as you reference). But I'm really referring to simple animations here, for anything complex I'd use Canvas or possibly SVG (although SVG can also have performance issues).

[neogodless]

http://vanilla-js.com/

"Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications."

"In fact, Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit - combined."

[jnbiche]

That's classic, how had I missed that. And it's pretty old, doesn't even feature cool new DOM APIs like the Selectors API (ie, `document.querySelector`). Which allows the exact same syntax as jQuery (although it obviously returns a DOM element instead of a jQuery object).

[mattmanser]

Using vanilla js is still a massive pita even with ES6.

Nowt's going to beat $(".thing") vs:

    document.getElementByClassNameWhichWordsDidIForgetToCapitalizeThisTimeManVanillaJavascriptSucks

Or

    document.querySelectorWhoopsNoIMeantQuerySelectorAllGodVanillaJavascriptSucks

Design by committee, you get crap. Ease of use is incredibly important. And don't even get me started on on the fly dom manipulation, vanilla js really sucks for that.

    let div = document.createElement("div");
    div.iMAlreadyBoredTyping = "Yes";
    node.appendChild(div);

vs

    $(node).append($("<div>").data("quick", 1"));

[methyl]

Check out https://developer.mozilla.org/en-US/docs/Web/API/Web_Animati... for animation without jQuery

[jnbiche]

Thanks, you're absolutely right. Web Animation API is one of the few new JS APIs that I haven't explored much, and I see I've been missing a lot. I tend to use CSS animation in production for most animations whenever I can, but I'm definitely going to keep my eye on support for the Web Animation API (although I'm guessing it won't be hardware accelerated like CSS for a while, if ever).

[talmand]

What's the big advantage of jQuery with animating? Are you referring to the animation built into jQuery?

[jnbiche]

Actually, looking over the new Web Animation API, it looks like jQuery doesn't even offer much of an advantage for animations as long as you're targeting new browsers that have the Web Animation API (yes, I was referring to the animation support built into jQuery).

[talmand]

Ah, ok. Yes, there are much better options out there than using the animation jQuery offers. At minimum you can use CSS3 transitions and animations before even getting to the Web Animation API. They would likely serve most needs nicely for regular day-to-day sites.

If one really wants to use the jQuery animation options, there are plugins that will try to shift them to CSS3 options instead, but keeping the same syntax.

[jnbiche]

> Yes, there are much better options out there than using the animation jQuery offers.

No doubt. I haven't used jQuery to speak of in the past 2 years, and the only time I've found myself missing it was when I needed to do some simple animation and wasn't using a library like d3 that could do it just as easily or easier.

And yes, I mentioned CSS animations in this same thread. It's what I've been using in production for animation for the past 2+ years, although it sometimes feels wrong to animate things in JS by adding and removing classes from an element.

[talmand]

I understand. Just look at it as controlling the state of the element, not the animation directly, and the browser animates between them for you.