5 ms·
Look at your own link - the "modern" way of doing it is always about 2-3x as verbose as jQuery. Editors let you type that mess faster, but you'll still have to
by QuadrupleA 3y ago
Look at your own link - the "modern" way of doing it is always about 2-3x as verbose as jQuery. Editors let you type that mess faster, but you'll still have to read through it, maintain it, scroll it into view in your editor, see less of it onscreen at a time, etc. I'll take a clean, succinct API over a noisy verbose cumbersome one any day.
And what are we saving by eschewing it and going vanilla? One little 30kb-gzipped javascript file - smaller than most jpegs. I agree for super simple tasks it might be best to skip it.
The DOM API is a sloppy and hastily-designed pile of crap from the OOP era that we're unfortunately stuck with for legacy reasons. jQuery shows what it could have been.
- austin-cheney 3y agoThat is not correct at all. The DOM API is entirely functional based upon traversal of a lexically scoped model. It may not be as declarative as you like but lying about what it is because it makes you feel uncomfortable is rather ignorant.
- troupo 3y ago> The DOM API is entirely functional based upon traversal of a lexically scoped mode wat DOM APIs have been, and still are, 90s-era OOP style with zero attempt at being functional, declarative, or composable. Even the newly developed API are usually stuck in the same mindset (see everything developed for web components)
- austin-cheney 3y agoThe DOM is a big in memory object but the DOM APIs are entirely functional. Functional is not the same as declarative.
- troupo 3y ago> DOM APIs are entirely functional. (Almost) none of the DOM APIs are functional. They are literally `object.methodCall()`
- austin-cheney 3y agoYes, functional programming can have methods. Methods are functions. OOP is all about polyinstantiation and inheritance. Functional programming is all about functions and input/output, which is entirely what happens in this case. The only OOP here is the method assignment you don’t see: Element.prototype.getElementById = function () {};
- troupo 3y agoYou're making no sense. Functional programming is more than just "about functions". DOM APIs are the embodiment of 90s-era OOP. There's literally nothing functional about them. All [1] "functions" are methods defined on very specific objects. You can't even get a proper reference to them without binding them to specific object instances What exactly is functional about this? const newDiv = document.createElement("div"); const newContent = document.createTextNode("Hello, world"); newDiv.appendChild(newContent); const currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); Okay, here's an easier question. What will happen here, and why? const function_reference = document.getElementById; function_reference("#id"); [1] Technically speaking, not all all. The more recent `fetch` is probably the only piece of browser APIs that can be called functional for some very limited definition of functional Most (all?) other "global" functions are defined on the instance of the window object: getComputedStyle, getSelection etc.
- austin-cheney 3y ago> What exactly is functional about this? A series of function calls that each do something and each returns a value. > Okay, here's an easier question. What will happen here, and why? A function call that does something and returns a value, because in this language complex types are passed by reference.
- troupo 3y ago> A series of function calls that each do something and each returns a value. Doesn't make it functional > A function call that does something and returns a value, Ah, so you don't know. Here's what will actually happen: TypeError: Can only call Document.getElementById on instances of Document Because it's a method on an object. And you have to bind that method to a specific object instance before you can call it. If it was functional this would never be the case. But since this is 90s-era OOP, you have to do this: const function_reference = document.getElementById.bind(document); function_reference("#id");
- andrei_says_ 3y agoYou just described why I use slim-lang in all of my projects. produces clean, correct HTML with zero noise. Ends up eliminating 50-60% of the code, and the time for writing and reading it. As for jquery I haven’t needed it much since stimulusjs but loved it whenever I used it.
- antifa 3y agoI'd only drop jQuery/lodash if you were adding Typescript. And I do prefer dropping them for Typescript, but the previous are still cool.