
Native Javascript alternatives to jQuery methods - EGreg
https://github.com/nefe/You-Dont-Need-jQuery
======
fabiospampinato
As the maintainer of cash [0] I wouldn't recommend using these functions for
almost anything, they aren't really alternatives for jQuery as they provide a
very different API, just to give one example the proposed alternative for
`$.fn.css`:

\- Doesn't automatically camel-case the property name.

\- Doesn't automatically vendor-prefix properties if needed.

\- Doesn't support getting/setting CSS variables.

\- Doesn't automatically add the `px` suffix to numeric values when
appropriate.

\- Doesn't fail gracefully when dealing with non-element nodes (`node.nodeType
!== 1`).

IMHO there are too many details that you now have to think about when using
such "native alternatives" that's not worth it. From my very unbiased opinion
I think it makes more sense to just use cash, which only needs ~5kb when
minified and gzipped, and can be even partially compiled to remove the stuff
you don't need.

[0] [https://github.com/kenwheeler/cash](https://github.com/kenwheeler/cash)

~~~
Rumudiez
> From my very biased opinion

Fixed that for you. There are better ways to integrate with the DOM than
jQuery nowadays. It’s not a good fit unless you’re just trying to tack on a
dropdown menu onto a decade old Wordpress theme, IMO.

~~~
yoz-y
I'd say it's the opposite. These no-jQuery methods are good if you are "just
trying to tack on a dropdown menu onto a decade old Wordpress theme", however
if you want to manipulate DOM in a more complex manner and do not wish to pull
in an entire frontend rendering library, then jQuery is perfectly fine.

You will have/want to factorise these methods anyways because some of them are
just ridiculously long. jQuery has already done that and at least it is very
consistent.

------
thrownaway954
Yep and that 2.1 CSS Get style example is EXACTLY why I use jQuery

[https://github.com/nefe/You-Dont-Need-
jQuery#2.1](https://github.com/nefe/You-Dont-Need-jQuery#2.1)

I don't want to have to figure out that there is a "known bug and will return
'auto' if style value is 'auto'". jQuery takes care of that crap for me.

Say what you want about jQuery, but it just works.

~~~
wolco
Plus it looks cleaner and easier to extend in the future.

------
tambourine_man
I always find it funny that links like “you don’t need jQuery” seem like
jQuery advertisement to me.

The jQuery examples are always cleaner, shorter, more intuitive.

~~~
giornogiovanna
Yes, they're effectively the same, but one is slightly more ergonomic, and the
other saves you 30KB (which isn't much, in my opinion) and the pain of
managing yet another dependency.

~~~
StillBored
Its only 30k until your project gets large enough that the jquery terseness
makes up the difference.

------
maxxxxx
It's such a weird world. If jQuery was new, people would be all over it for
its nice syntax. But since it's old people say we should get rid of it.

~~~
acdha
I think there’s also a factor of doing so much which has now been standardized
in browsers: imagine a hypothetical jQuery 4 which mostly focused on DOM/CSS
compatibility and used native ES6 where possible, always using the standard
names and signatures for things which are only partially supported. I think
that’d help people focus on the more ergonomic parts rather than whether you
type each or forEach.

~~~
maxxxxx
When I look at the examples and seeing how verbose some of the natives
examples are I would probably end up writing something similar to jQuery to
keep the main code simple. Maybe that's the way to go.

~~~
acdha
That's what I was thinking — imagine if you started now with things like the
ES6 array & NodeList methods, etc. as the model to follow and built the same
convenience methods without needing to deal with horrors like the IE6 DOM.
$(foo).css("color") would still be useful but you might end up with
$(".foo").forEach(…), $(foo).classList.add("foobar") or $.fetch(…) to reduce
the number of new nouns and verbs a developer needs to remember.

------
neals
I get that I don't need Jquery and that I can do DOM stuff myself. However.
JQuery makes DOM stuff a lot easier to remember and perform.

I think I'll always be prototyping in Jquery.

Large stuff we built in React, Redux etc... But if you need a quick tool or
prototype, just adding a single <script> tag to get JQuery from a CDN and
you're ready to go. Nothing is going to beat that, right?

~~~
deergomoo
For my own projects I’ve actually found it easier to start with Vue
immediately, even for a prototype.

If I have to do any DOM manipulation outside of perhaps hiding or showing an
element based on a button press, I typically find it far more unwieldy to do
all that stuff with jQuery than just scaffolding out a quick Vue component.

Plus, there is a build available with a runtime template compiler, so you can
just pull that in via a CDN and prototype without needing a build step.

Obviously, it varies a lot based on the sort of things you build, but I’ve
found it to have sped up my prototyping process enormously.

~~~
wolco
You can still put in a script tag and start using vue.

~~~
colecut
You can't use components this way though, unfortunately.

I like Vue, never really jumped into react, but I hate using npm and all of
the javascript build tools.. I end up fighting with them for a while and
decide it's back to jQuery and simplicity. Always works.

------
wereHamster
I think people mistake this as an attempt to tell people to get rid of jQuery.
No, that's not the point of these webpages. jQuery still offers an overall
nicer API than native. If you're building an application, and have to make the
choice between using jQuery and going native, go pick jQuery.

However if you're writing a 10 line script that does something really small
(eg. if you have a static webpage and need to make one button slightly
interactive) then these guides tell you how to do it without importing all of
jQuery.

~~~
mjevans
Of course you might also be adding that hack to a page that already pulls in
jQuery, in which case why avoid it?

------
cabalamat
The native alternatives all seem longer. I'll keep jQuery, thanks.

(Maybe they should put some of its functionality into the JaveScript
standard?)

~~~
gameswithgo
your choice adds a small convenience for you while increasing the payload size
and runtime overhead for how many of your users? as an alternative you could
make a very small set of wrapper functions to shorten things without taking on
the entire jquery lib.

~~~
jtdev
Regarding the payload size argument: If you’re pulling jQuery in from one of
the popular CDNs (which you should be), your clients will almost certainly
already have it cached locally anyway.

Can you elaborate on the runtime overhead issue? If you write your own JS
functions to replace jQuery, you’re still adding runtime overhead... and
jQuery likely wrote a more efficient implementation to begin with; jQuery is
battle tested and one of the most widely used pieces of software in history,
what makes you think your code will have less runtime overhead?

~~~
acdha
> If you’re pulling jQuery in from one of the popular CDNs (which you should
> be), your clients will almost certainly already have it cached locally
> anyway.

Have you ever measured this on a large scale? I’ve never found it to be true
because there are many CDNs, versions, and browser caches are not infinite. If
performance is a priority it’s almost always faster to serve it directly to
avoid things like the DNS and TLS latency from those CDN connections.

~~~
jjeaff
Plus, I don't think a lot of the engineers on HN are actually even working on
first page optimizations. If you are building an application that people are
logging in to and using on a regular basis, you can afford a little bit of
first load overhead which will then most definitely stay cached for the
remainder of the session.

All this talk of trying to skim off a few kb of load time only applies to
extreme edge cases of landing pages with flighty potential customers.

~~~
acdha
Yes, it’s an oddly specific focus given how few sites have been optimized to
the degree that a single cache-friendly resource matters. Given how many sites
I run into where a single failure means that functionality breaks entirely, I
really think it should be down the list.

------
bauerd
You don't need a lot of other stuff as well, but it might come in handy.
Looking through their examples I'd much prefer someone used jQuery instead of
writing a bugged getNextSiblings function themselves.

Also, jQuery is self-contained, doesn't shove numerous other packages into
node_modules.

~~~
anthony_doan
> Also, jQuery is self-contained, doesn't shove numerous other packages into
> node_modules.

Totally a bonus. Had to deal with npm audit and it warned about breaking
changes and security problems. So I did npm audit --force. npm had a "I sure
hope you know what you are doing" message. That's not very comforting >___>.

------
wzy
Seems like a great reason from me to keep using jQuery. It's not as if I was
eschewing React and such, to write SPAs with jQuery.

jQuery is a utility that abstract/hides away all the hideousness that is
JavaScript and its prototypes-based nature. And it does its jobs well, plus it
has universal support.

Above all -- "work smarter, not harder".

------
fouc
Replacing jQuery with these methods seems like a great opportunity for
learners to improve their understanding of javascript. Also, with ES6
javascript, there seems to be less need for jQuery.

~~~
Rumudiez
I think this is a good point of view on the topic, and personally resonates
with me. I ditched jQuery at the same time I read “JavaScript: The Good Parts”
and after that I realized I was never conceptually building systems, only
little puddles of functionality, when I used jQuery for FED.

------
osrec
jQuery exists for a reason. It gives you portability across browsers and
versions, and is generally quite a convenient library to use. If you're not
using it for animation, it's also pretty fast. I personally love it, and don't
intend to stop using it any time soon (combined with a bit of lodash)!

~~~
commandlinefan
Well, these days, native JavaScript is pretty portable, so portability across
browsers and versions isn’t really a big selling point for jQuery any more
(you’re not support IE 6, are you?), but looking at the samples in the link,
the brevity of jQuery is impossible to ignore.

~~~
goatlover
> the brevity of jQuery is impossible to ignore.

Really makes you think the DOM is needlessly complex and verbose.

------
EGreg
Why have browser makers not simply begun to include cached versions of popular
sites, by their hash? Like a “resource store” similar to an “app store”. They
have the mechanism: SRIs. It’s not like we NEED to store cookies on CDNs or
whatever.

~~~
dehrmann
You get 90% of the benefit with just the browser cache and CDN-hosted copies.

~~~
EGreg
Not unless the CDN is a centralized one for many sites.

------
alexis_fr
Mandatory reference to the April Fools of Vanilla JS, the framework that does
it all: [http://vanilla-js.com/](http://vanilla-js.com/)

I feel like a cargo programmer because I’ve been using jQuery for 8 years, I
have learnt the vanilla JS methods, and it seems jQuery is falling out of
fashion. Is it a mistake, or is still popular enough that I will be able to
use it with every employer?

~~~
wolco
You are two years ahead of the rise of jquery again. It fits so well with the
idea of not writing a custom 6 line function over a simply function chained.

------
1ris
Can't all these fancy Javascript compilers and optimizers just inline and
constant-fold these query to their in-browser counterparts?

------
mqus
See also: [http://www.vanilla-js.com/](http://www.vanilla-js.com/)

------
SwiftyBug
Also who needs C or Java? We can write software in Assembly.

~~~
giornogiovanna
Isn't it more like CoffeeScript and JavaScript than C and Assembly? I mean, if
Assembly was more portable than C, better standardized, and adopted on most of
the features in C, to the point where it was basically just a somewhat uglier
C with a much more certain future, I might switch to Assembly, too.

~~~
SwiftyBug
Yes, that's a better analogy.

------
dageshi
Yeah, I really like jquery though.

------
dccoolgai
Youmightnotneedjquery.com

------
FrankDixon
is jquery even still a thing?

~~~
scarface74
Yes and people still watch TV even if you haven’t owned a TV in fifteen
years.....

