Oh, you just want to add a class to the element? \adds whole jQuery\ That's what's wrong with the web.
Oh, and you need a loop? \adds underscore.js\
Oh, and you need a loop? \adds underscore.js\
To this day, you still can't enumerate an object literal, yielding each key/value pair. You still can't properly enumerate a NodeList and Object.values is still "experimental technology".
I understand that people just abuse libraries in and out, but come on, let's not forget the reason those humongous libraries exist in the first place (and why they're having success success), it's because JS has long been crippled in terms of abstractions and people needed something to alleviate the pain.
EDIT #1: Regarding enumeration of object literals, it turns out it's actually possible, though Object.entries is still marked as "experimental" and returns an array of [key, value] pairs, as arrays, which doesn't exactly scream great design. I just wish I could do something like someObject.forEach(function(key, value) {}) (and same for map, reduce, filter, some, every, etc).
EDIT #2: The latter in my previous edit is actually possible if you're willing to create a Map from Object.entries, which you can call forEach on. Quite convoluted, but possible, so my bad.
for (let [key, value] of Object.entries({a: 1})) { console.log(key, value); }
// native JavaScript
Object.keys(obj).forEach(function(key){ console.log('obj.', key, ' = ', obj[key]) })
// Lodash
_.forEach(obj, function(value, key) { console.log('obj.', key, ' = ', value) })
Object.keys(obj) creates an array that contains the keys of the object, which makes it pretty trivial to call filter, map, reduce, etc. And getting the value from an object's key is also pretty straightforward...
Sure you can do it in JS, but calling Object.keys then forEach (in whose closure you'll still have to reference obj[key] by the way) still doesn't feel optimal.
Object.prototype.each = function(k,v){ //... }
Array.forEach doesn't work in IE8 or below.
Fetch API for ajax isn't in any version of IE or Safari, or any mobile browser apart from Chrome for Android.
And so on.
It's not so much that front end devs are lazy, but more a case that building a set of polyfills for each and every browser support problem is actually hard. "just use jQuery" gets around the problem. I think most developers want to write better code, but most projects don't have the development bandwidth for them to do things better.
I recently tried to force myself not to use any libraries for a simple site. After a while I realised I had so much re-invention of stuff (AJAX in particular is madness without a library) that I ended up adding Zepto
With all the crap they're adding in ES6 you would have hoped they would add an ajax function at least
Now we just have to wait 5+years until it has 95% browser share :)
I hoped with page performance becoming a ranking factor, this would change, if only for a tiny bit. But I see very slow brand websites still ranked higher then the highly optimized indie website, so that didn't work.
> "How do you do something in javascript?"
> "With jQuery you do it like this..."
I had the worst time ever when I had to work with jscript. I really wonder if my dislike of the language comes from the language itself or the community around it.
In IE6, you do it like this.
In IE8, you do it like this.
In Firefox, you do it like this.
Then jQuery came along. And it was like 'Now you do it like this, and jQuery handles it for all browsers perfectly'.
Just because some tasks are now performed easily in native javascript on all browsers, doesn't mean it was always that way.
I'd argue that jQuery was great, but now most (if not all) of it can be replaced by native javascript features (e.g. document.querySelector). Today I wouldn't recommend jQuery to anyone.
I suggest learning a functional language (in my case it was Haskell) in parallel, as it opens up new ways of thinking about javascript and problem solving.
I think SO has gotten a little better about this, but not much, IME
Wanting to use a framework shouldn't be discouraged. The issue here isn't developers trying to save time, the issue is the shitty tools.
Eventually you'll have to track every minor version of every library when not every site stays up to date. At that point it's (almost) effectively a CDN.
- element.classList is relatively recent
- NodeLists still don't have .forEach()
- string.includes() and array.includes() was only added in ES6 and ES7
- As of a Chrome 50 a few weeks ago you can now see the values inside FormData.
If your playing with larger and less 'standard' library's then that's a different story.
(OK, so I doubt many sites are specifying the beta or uncompressed versions, but there's still a pretty good chance that somebody hasn't downloaded the relevant version from the relevant CDN recently enough for it to be in their cache, especially if they're browsing on their phone)
What I'd like to see, however, is a way of trimming down jQuery to only include the functions I actually use. I only use two functions out of the whole library IIRC, so I really don't need to load the whole thing. Maybe one day when I have some spare time and other projects out of the way I'll try stripping those functions out of jQuery and just hosting them locally.
On the framework end of the spectrum, we have efforts like Mithril.js that try to provide a minimalist set of tools for more ambitious web applications.
So all is not lost :)