jQuery like selector for Vanilla JavaScript
This was the only thing I missed from jQuery, nothing else. I’m content now.
I’ve worked with jQuery for a lot of years but have gone back to Vanilla JavaScript some 4 years ago or more. Mainly because the complexity of many libraries has outgrown my ability to understand them and modify them. I like to have full control over my software so mostly I build it from the ground up with minimal contributing libraries. This way, if anything breaks it’s my fault and I know how to fix it, mostly.
I know that this is not the way to do it in a large “modern” production environment but then again, looking at current programming paradigms, especially in JavaScript, I’m not amused.
Once you get into JavaScript programming you are immediately pushed into using some super duper library like React or Angular or Vue but what no one tells those kids is that those libraries have a lot of dependencies that can break, syntax changes, etc that can cause serious problems.
There is an interesting article on Medium from Hajime Yamasaki Vukelic called “What Got Me Writing Vanilla JavaScript again” with which I agree. I also remember the late 1990 and early 2000 when if you had a JavaScript file bigger than 20kb you were chastised as being a bandwidth hog. Also, as mentioned in the article, We have forgotten that JavaScript is meant to complement HTML not take its place. If it can be done with HTML there is no need to complicate it using JavaScript.
And that, my friend, is the point. If it’s doable in HTML, why would you do it in JavaScript? You may think it should be done in JavaScript, but that is simply a rule that you made up, and it has no bearing on the physical reality of being able to use “just HTML”. The ability to render HTML in a browser has been around since nearly three decades ago, and I think we’ve just forgotten to use it because of some made-up rule.
Of course, I’m not trying to argue that your entire app can be done with just HTML and CSS. You still need a lot of… well, some… JavaScript.
But there is one thing I miss from jQuery and that’s its $ selector. When I switched to VanillaJS I made peace with losing it and trotted along using full JavaScript syntax for DOM selection like document.getElementById and others.
Recently I stumbled upon a script that has a peculiar little function in it. I looked at it curiously and thought to myself, no way, wtf, It can’t be that easy, you stupid ….
The function in question was:
function $(object) {
return document.querySelector(object);
}
Usage:
<div id="firstDiv">
<div class="Second">
<ul id="list">
<li>First</li>
<li>This will be sent to .text</li>
<li>Third</li>
</ul>
</div>
</div>
<div id="output">
<span class="text"></span>
</div>
<script>
function $(object) {
return document.querySelector(object);
}
// Selecting the second <li> element
let secondListItem = $('#list li:nth-child(2)').textContent;
// Selecting the <span> element
$('#output .text').textContent = secondListItem;
</script>
If you want to select multiple objects:
function $$(selector) {
return document.querySelectorAll(selector);
}
This was the only thing I missed from jQuery, nothing else. I’m content now.
Sure, the fancy tools and flashy libraries like React or Angular have their allure and purpose, but they're not the be-all and end-all. I like the principle less is often more. If I can’t understand what’s going on below the hood, it's too big for its good.
I’ve gone through a lot of frameworks, libraries, and programming languages and now it looks like there is a new and shiny toy each week. I’m over it. Give me plain old C, Lazarus, Python, and JavaScript, and I’m good. That code will work now and in n+ years. No dependency will break those programs unless Python devs make another drastic change like they did with print…. I’m still sore from that one.