But nearly every Shopify website’s hero image itself would completely dwarf any bandwidth concerns jQuery might cause.
In the meanwhile, jQuery is a much better known API among developers, there’s far more and higher quality documentation and snippets available in it on the internet, and there are fewer foot guns.
jQuery easily seems the superior choice over VanillaJS, with very few downsides given Shopify’s use case.
1. Added element.$("selector") and element.$$("selector") functions. Later one allows to work with JQ sets:
for(let el of parent.$$(".child"))
...
2. Added element.on("eventname" [,"selector"], handler) and element.off()These two allow to reduce need for JQuery to almost zero.
Also added JSX as a built-in feature to JS/runtime. So,
function Child(props) {
return <p>Generated child {props.index}</p>;
}
function Main() {
const list = [1,2,3];
return <main>
{ list.map( el => <Child index={el} /> ) }
</main>
}
// add the list to the DOM:
document.body.append(<Main />);
These three simple things, together with elment.patch(...JSX...) eliminate need for as JQuery as ReactJS almost completely.People love to make fun of Java for being verbose but then go all googoo eyes over Vanilla JS. As a Java developer for 20 years now, using it makes me think a Java developer from the '90s designed it.
But, you know, it's JS so it gets a pass.
You’re much more likely to find a snippet using jQuery that was created over the last 10 years or so that’s consistent and works correctly than you are vanillaJS.
VanillaJS queries would be all over the place with multiple if/else’s for IE, Chrome, WebKit, Mozilla, etc.