Why would you not want to be using a rendering library? Your code is basically storing your application state in the dom which will turn into a horrible mess as soon as you reach any actual level of complexity. I know first hand. I’m traumatized from having to maintain large jquery code bases in the 00s. No serious professional writes code like this anymore.
Also, your vanilla code isn’t modern. It should look more like this:
I could see not wanting to use a rendering library if you’re building a simple site on top of basic static HTML, but that’s not a serious discussion for industry professionals, and even still, jQuery is such a heavy dependency for saving some characters. If you find yourself using it so much you need the extra convenience then your site is already complicated enough that you should be using a rendering library with state management instead.
Why would you not want to be using a rendering library?
Because it’s just not very useful in some contexts. I’ve seen web extensions which mostly query the current page, and it doesn’t render much or even anything.
Not all pages are SPAs either. Many apps are the old request-response with some dynamic behavior sprinkled on top. jQuery covers that well.
This model is also quite compatible with the rising HTMX where the state/rendering is driven from backend and you just insert few dynamic pieces with JS.
There’s no difference between document.querySelector("#element") and document.getElementById("element"), they’re both same level clunky.
Also, what you wrote is not functionally identical. $el.show() is idempotent, the el.toggle("hidden") is not (as the name suggests, it toggles a class). It also needs an extra boilerplate class.
I could see not wanting to use a rendering library if you’re building a simple site on top of basic static HTML, but that’s not a serious discussion for industry professionals
There are plenty of non-professionals doing web stuff and I think it’s great!
jQuery is such a heavy dependency for saving some characters
jQuery is 24 KiBs (minified, gzipped), that’s a good price for the egonomics it provides. If you’re constrained, there are API-compatible alternatives like cash which go down to 6KiBs.
Why would you not want to be using a rendering library? Your code is basically storing your application state in the dom which will turn into a horrible mess as soon as you reach any actual level of complexity. I know first hand. I’m traumatized from having to maintain large jquery code bases in the 00s. No serious professional writes code like this anymore.
Also, your vanilla code isn’t modern. It should look more like this:
document.querySelector("#element").classList.toggle("hidden")I could see not wanting to use a rendering library if you’re building a simple site on top of basic static HTML, but that’s not a serious discussion for industry professionals, and even still, jQuery is such a heavy dependency for saving some characters. If you find yourself using it so much you need the extra convenience then your site is already complicated enough that you should be using a rendering library with state management instead.
Because it’s just not very useful in some contexts. I’ve seen web extensions which mostly query the current page, and it doesn’t render much or even anything.
Not all pages are SPAs either. Many apps are the old request-response with some dynamic behavior sprinkled on top. jQuery covers that well.
This model is also quite compatible with the rising HTMX where the state/rendering is driven from backend and you just insert few dynamic pieces with JS.
There’s no difference between
document.querySelector("#element")anddocument.getElementById("element"), they’re both same level clunky.Also, what you wrote is not functionally identical.
$el.show()is idempotent, theel.toggle("hidden")is not (as the name suggests, it toggles a class). It also needs an extra boilerplate class.There are plenty of non-professionals doing web stuff and I think it’s great!
jQuery is 24 KiBs (minified, gzipped), that’s a good price for the egonomics it provides. If you’re constrained, there are API-compatible alternatives like cash which go down to 6KiBs.