Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Vanilla JS, fast, lightweight, cross-platform framework

vanilla-js.com

Post reply on HN
Print view View original

41–50 of 134 posts

Re: Vanilla JS, fast, lightweight, cross-platform framework

#41

Post by pooriaazimi »

v413 wrote: post #29
dag11 wrote: post #18

Earlier quoted context omitted.

I'll take $('p').text('Hello.') over for (var p in document.getElementsByTagName('p')) { p.innerHTML = 'Hello.'; } any day!

This enumeration is done the wrong way. You enumerate over a DOM node list which looks like an array, which includes enumerable properties like "length". This means that the variable "p" at some point will be "length" and "length".innerHTML = "..." will produce an error. The proper way is: for( var i=0, ps=document.getElementsByTagName('p'), len=ps.length; i < len; i++) {ps[i].innerHTML = 'Hello.';}

I'm a JS noob, but I though 'length' was not enumerable (i.e. its 'enumerable' property is set to 'false').

Edit: I think I missed what you said. You're saying it's "like" and array, but unlike arrays its `length` is enumerable. I'll leave my comment so other skeptics can benefit :)

Edit2: This is what I was referring to (read the 'Note' at the right side): http://bonsaiden.github.com/JavaScript-Garden/#object.forinl...

Re: Vanilla JS, fast, lightweight, cross-platform framework

#42

Post by MatthewPhillips »

mw642 wrote: post #23
ashray wrote: post #9

Fast and lightweight, yes. But vanilla-js is certainly not cross platform ;) You see, that's actually one of the biggest problems with JS and one of the main reasons why people use things like jQuery (apart from the pretty API..). That cross platform bit is the weakest link sigh .

If you're only targeting modern browsers (latest Chrome/FF/Opera/Safari, IE10), is this still true? I was under the impression the recent browsers were standards-compliant enough that you could use vanilla JS. Of course, most developers still have to target older browsers, but for a private Web app where you know your target audience, this shouldn't be a huge issue.

There are always quirks, which I assume is what the grandparent is referring to. For example, in WebKit popstate happens on page load, in Firefox it does not. There are many such quirks. Still not worth using a DOM library that will hurt performance, though, in my opinion.

Re: Vanilla JS, fast, lightweight, cross-platform framework

#43

Post by drivebyacct2 »

mw642 wrote: post #23
ashray wrote: post #9

Fast and lightweight, yes. But vanilla-js is certainly not cross platform ;) You see, that's actually one of the biggest problems with JS and one of the main reasons why people use things like jQuery (apart from the pretty API..). That cross platform bit is the weakest link sigh .

If you're only targeting modern browsers (latest Chrome/FF/Opera/Safari, IE10), is this still true? I was under the impression the recent browsers were standards-compliant enough that you could use vanilla JS. Of course, most developers still have to target older browsers, but for a private Web app where you know your target audience, this shouldn't be a huge issue.

And what's IE10s market percentage? Less than a fraction of a fraction of a percent I bet. And with current reviews of Win8, I don't see that changing in a meaningful way for soooome time.

Re: Vanilla JS, fast, lightweight, cross-platform framework

#45

Post by vidarh »

mibbitier wrote: post #28
ams6110 wrote: post #22

Earlier quoted context omitted.

The jquery version is easier to write, and less prone to error, but in the native version it's much more clear what's actually going on.

Also in the native version, you know you're only doing the work required. The jquery one will be doing a lot of extra useless inefficient grunt work to achieve nothing. Making it incredibly slow in comparison.

Premature optimization, and all that. It is trivial to get raw dom nodes out of jQuery, so you can easily use jQuery to begin with and replace any code with the full DOM API calls should it every become a performance issue.

This discussion is a bit like how assembly programmers used to defend not moving to a high level language long after the performance benefits were not worth it any more.

Re: Vanilla JS, fast, lightweight, cross-platform framework

#46

Post by vidarh »

Skalman wrote: post #27
dotborg wrote: post #21

Earlier quoted context omitted.

did you ever try to debug your pretty jquery karate? ps. second example is not valid, in Vanilla JS you do it like this: document.getElementsByTagName('p').filter(function(el) { el.innerHTML = 'Hello.'; });

Nope: TypeError: document.getElementsByTagName("p").filter is not a function Because you don't get an array, only something array-like.

And this discussion over how to write a trivial loop is why I stay far away from vanilla js unless performance absolutely forces me to optimize.

Re: Vanilla JS, fast, lightweight, cross-platform framework

#47

Post by batista »

v413 wrote: post #29
dag11 wrote: post #18

Earlier quoted context omitted.

I'll take $('p').text('Hello.') over for (var p in document.getElementsByTagName('p')) { p.innerHTML = 'Hello.'; } any day!

This enumeration is done the wrong way. You enumerate over a DOM node list which looks like an array, which includes enumerable properties like "length". This means that the variable "p" at some point will be "length" and "length".innerHTML = "..." will produce an error. The proper way is: for( var i=0, ps=document.getElementsByTagName('p'), len=ps.length; i < len; i++) {ps[i].innerHTML = 'Hello.';}

Try this in a browser. On Webkit at least is also returns length and item:

for (var p in document.getElementsByTagName('p')) {console.log(p);}

Re: Vanilla JS, fast, lightweight, cross-platform framework

#48

Post by batista »

ams6110 wrote: post #22
dag11 wrote: post #18

Earlier quoted context omitted.

I'll take $('p').text('Hello.') over for (var p in document.getElementsByTagName('p')) { p.innerHTML = 'Hello.'; } any day!

The jquery version is easier to write, and less prone to error, but in the native version it's much more clear what's actually going on.

>but in the native version it's much more clear what's actually going on.

Yes, but it's also more probable that it won't go on at all (due to browser incompatibilities and such).

Re: Vanilla JS, fast, lightweight, cross-platform framework

#49

Post by pooriaazimi »

freepipi wrote: post #36
dotborg wrote: post #16

Earlier quoted context omitted.

jQuery API is not pretty

I am a c developer, now I want to learn jQuery , but its syntax seems so weird to me, Vanilla JS looks more comfortable to me , one questions, does it supported by webkit?

I'm sorry. I don't know if you're joking or are serious. But if you're a C programmer and have no experience with JS I guess it must be really easy to be fooled by this "joke".

Some JS people (the ones usually with a long beard) hate how kids use frameworks like jQuery and this site is an attempt at telling them "The vanilla JS, i.e. the standard language that all browsers use and your cool jQuery leverage under the hood, is quite capable these days. Use it". They are not quite right, but aren't quite wrong either (IMO). You'll be a dreadful JS programmer if you only know jQuery. JS is sooo different from C (and Java) that if you don't know the core language everything you'll do will be wrong. For starter: there's no block scope. Only function scope.

Every JS programmer should read "JavaScript: The Good Parts" by Douglas Crockford cover to cover - before learning jQuery.

Re: Vanilla JS, fast, lightweight, cross-platform framework

#50

Post by rane »

Timmy_C wrote: post #10

Recently, I was interviewing a front-end developer candidate and I gave them a simple JavaScript problem. The sad thing was, they didn't recognize `document.getElementById()` and didn't know any of the parameters to `addEventListener()`. We finished the exercise assuming the example used jQuery instead.

That's a fair assumption since most of front-end development is done using jQuery as far as the DOM goes.

Did you expect your interviewees to have memorized APIs? There's Google so that you can look up those when needed.

Post reply on HN