Wednesday, 22 January 2014

Plain JavaScript

"I want to do this with pure JavaScript, not jQuery."
"How do I do this with raw JavaScript?"
"I don't like to use libraries, I like to use vanilla JavaScript."

Enough! Using a library like jQuery (or Closure or MooTools or...) is using plain/vanilla/raw/pure JavaScript. (I mean, unless you're using CoffeeScript, TypeScript, Dart, or other such languages.) Using a library doesn't change the language you're using.

jQuery is a library, not a language. You don't write things "in" jQuery. You write things with jQuery, in JavaScript. Or with MooTools, in CoffeeScript. Or with Closure, in Dart. You get the idea.

If you want to do things in the browser without a browser library, what you're doing is using the DOM API directly. Which is to say, writing with the DOM API, in (choose your language, probably JavaScript).

This isn't just a rant about prepositions. (It is a rant, but not just a rant.) It's about understanding what you're using, and how.

8 comments:

**kent said...

Here, Here. Or is it Hear, Hear? In any case, well said.

Unknown said...

When people say this, they often mean "I want to learn how to achieve this task without a library". Too many developers these days 'learn jQuery', and they literally have no idea that you can even interact with the DOM any other way. So when I say, "I'm just going to do it in plain javascript" what I really mean is, "I'm going to write it 300kB smaller and 10x faster than if I'd used a library"

T.J. Crowder said...

@Unknown:

Yes, I was perfectly clear about what people meant. I was pointing out that what they meant and what they said were at odds.

"I'm going to write it 300kB smaller and 10x faster than if I'd used a library."

Oh, come on. :-)

Let's take a large DOM manipulation library (jQuery). It's about 90k, gzips to about 33 on the wire, and is delivered by any competent CDN in < 200ms on an average connection, with far-futures cache headers allowing the browser to keep it around.

On the "10x slower" thing: 99.99% of the time, the raw performance of a given operation is irrelevant. But that 10x figure is highly suspect. While I can think of a jQuery op which is about 20x slower than going straight to the DOM, the vast majority of the time we're talking more like 2x or less. But even the 20x slower op measures at 1 microsecond, vs. 1/20th of a microsecond. Let me say that again: 1 microsecond. One millionth of a second. Those lost 19/20ths of a microsecond, even in a tight loop, are nothing a human being can observe.

No, the performance that really matters is how long it takes to get things done. And there, good libraries beat the heck out of using the DOM API directly.

kangax said...

Just noticed that jQuery docs are guilty of sketchy terminology as well:

"The .removeAttr() method uses the JavaScript removeAttribute() function"

T.J. Crowder said...

@kangax: Oh, that's funny! :-)

Chris G said...

I don't use jquery and haven't spent the time to undertand it since I haven't had the need.

Whenever I need a function I write it into my own library. Is jquery really worth the effort to understand it and it's own nature and quirks? I'm still fairly new at this, but am learning fast and haven't found a need for jquery (yet).

I tend to agree with "unknown" although he may be exaggerating, but his point seems valid.

Maybe a few years ago with lots of browser issues jquery was required, but now?

Karl Stubsjoen said...

Isn't every language a wrapper for another language? Otherwise, if you really wanted bare bones code, you'd be writing in bits!
Having said that, I love love love PrototypeJS and wish it was as popular as jQuery. Another thought too, to the person desiring pure Javascript is that we as developers typically write our own reusable code to simplify what we do on a daily basis. I do appreciate these libraries. They are a must!

T.J. Crowder said...

@Karl - But that's the whole point, libraries are not languages. Nearly all of what jQuery provides, and about 75% of what Prototype provides, is DOM-related utility functions. (The other 25% or so of Prototype being adding several methods to JavaScript objects.) I use libraries all the time and have nothing against them. I just want people to understand the difference between the language they're using (JavaScript) and the API they're using (jQuery's, the DOM, Prototype's, whatever).