Chain a few more commands onto that example and then we can talk about how readable the pure JS version is.
Re:Why It's Time to Sunset jQuery
by beatgammit on Sunday April 14, 2013 @02:48PM
(#5547777)
I've never liked chaining, and I hardly ever find a time when it's needed now:
* animations: CSS3
* templating: I don't do it, I prefer static pages and toggle sections with classes
* element filtering: better selectors (nth-child, nth-of-type, [data-stuff=''], etc)
* form serialization: either use event handlers and build it as you go or just use regular browser form handling
Currently, I use reqwest [1] for my HTTP requests. It's very small and is cross browser. In Dart, I just use the built-in libraries.
Just because you mention Dart here, I want to point out what this would look like in Dart right now:
queryAll(selector).forEach((e) => e.value = value);
To me this is quite readable, and it's really nothing special about Dart, it's just that the dart:html library uses real Dart collections rather than the very unfortunate DOM NodeList.To go even further into jQuery territory, there are bugs requesting that queryAll() return an ElementList that has setters that effect every element in the list, so we could do this:
queryAll(selector).value = value;
I'm on the fence about that. It's short, but a little magical. I'm sure jQuery fans would like to have it though.
Re:Why It's Time to Sunset jQuery
by TazeTSchnitzel on Sunday April 14, 2013 @04:33PM
(#5548159)
It's even better with modern JS:
document.querySelectorAll(selector).forEach(function (elem) { value = somevalue; });
Which is more obvious in intent and more flexible.Except this doesn't work, because that's not a real array, it's a stupid NodeList. :(
So you'd have to do:
Array.prototype.slice.call(document.querySelectorAll('thing'), 0).forEach(function (elem) { value = somevalue; });
ugh.You don't need to call the slice method:
Array.prototype.forEach.call(document.querySelectorAll('thing'), function (elem) { value = somevalue; });
Re:Why It's Time to Sunset jQuery
by TazeTSchnitzel on Sunday April 14, 2013 @05:32PM
(#5548417)
And I could use underscore, a much more general-purpose library than jQuery to help me here, only 4kb. So:
_.each(document.querySelectorAll('thing'), function (elem) { value = somevalue; });
(But then I might as well just use jQuery, I guess)Everyone should be shimming ES5 array methods so your good example could quite happily run on older browsers too.
I'm sorry but four lines of code will never be "just as readable as" one.
I, personally, am starting to use Dart instead, because it is a nice middleground between jQuery and raw DOM manipulation; it doesn't hide the details like jQuery does and it's still fast.
Ihe best argument I can see is with XMLHttpRequest, which is still a pain because it doesn't have a nice API.