It depends what you want to do and the amount of polyfills/backwards compatibility you need.
Nowadays most projects use one of the big frameworks like React/Vue/Svelte and others which take a vastly different approach to maintaining the DOM and for the most part you never manipulate nodes yourself, therefore you don’t need jQuery and it’s not used much anymore. JSX is weird at first but it’s actually quite nice. Some of those libraries like SolidJS have impressively low overhead.
And for those that like to stick to just minimal JS, the browser APIs have matured a lot so a lot of jQuery isn’t really necessary anymore either. We have querySelectorAll and things like Array.prototype.forEach and Array.prototype.map and arrow functions that cut down a lot on what shortcuts jQuery would offer. Visual effects are usually done with CSS animations and just switching up classes. Everything AJAX is easier and cleaner with the new fetch() function and accessories. Vanilla JavaScript is for the most part quite usable and easy these days. You can even create custom HTML elements from JavaScript to make your life easier!
But if you’re looking at the jQuery API specifically, you can still use jQuery today. It’s still maintained and functional. I think modern versions are pretty small too since it no longer needs half of it to be Internet Explorer hacks and other obsolete browsers that were holding web development back.
Custom template language and custom DOM attributes are way weirder than just using language-native constructs (ternary operator, map/filter, variables, functions, etc.) directly like you can in JSX.
template syntax is a piece of cake, takes literally 2 hours to learn everything you need and you can easily see what’s where and how the html will look when it’s rendered or not.
and the list rendering? you are literally pointing out the best features of vue.
But why bother with creating a new language, and duplicating all the features your language already has, in a weird way?
If I want a list of UI items based on an array of some data, I can just do
items.map(item => 〈Item key={item.id} item={item} /〉), using the normal map function that’s already part of the language.
Or I can use a function, e.g. items.map(item => renderItem(item, otherData)) etc.
JSX itself is a very thin layer that translates to normal function calls.
but how do you know what renderItem does? where will the items end up?
we are visual creatures.
if I see a <ul><li></li></ul> I know it’s doing a list item for every object in given list.
it’s literally just html with a few added stuff, v-if to determine whether it’s rendered, v-for for iteration, dynamic class bindings and event listener bindings.
templating has also been around for a while for a reason it’s solid tech, thymeleaf and jsf/primefaces being prime examples.
DOM attributes are built for browsers and frameworks to take advantage of.
The style of some of those frameworks to stick symbols in there is downright weird. But that only goes against those particular frameworks. It doesn’t impact how good DOM attributes actually are.
Vue sucks. A pretty graphic of a CGI robot convincing untrained programmers to merge their web files and produce unreadable garbage as the output file.
It depends what you want to do and the amount of polyfills/backwards compatibility you need.
Nowadays most projects use one of the big frameworks like React/Vue/Svelte and others which take a vastly different approach to maintaining the DOM and for the most part you never manipulate nodes yourself, therefore you don’t need jQuery and it’s not used much anymore. JSX is weird at first but it’s actually quite nice. Some of those libraries like SolidJS have impressively low overhead.
And for those that like to stick to just minimal JS, the browser APIs have matured a lot so a lot of jQuery isn’t really necessary anymore either. We have
querySelectorAll
and things likeArray.prototype.forEach
andArray.prototype.map
and arrow functions that cut down a lot on what shortcuts jQuery would offer. Visual effects are usually done with CSS animations and just switching up classes. Everything AJAX is easier and cleaner with the newfetch()
function and accessories. Vanilla JavaScript is for the most part quite usable and easy these days. You can even create custom HTML elements from JavaScript to make your life easier!But if you’re looking at the jQuery API specifically, you can still use jQuery today. It’s still maintained and functional. I think modern versions are pretty small too since it no longer needs half of it to be Internet Explorer hacks and other obsolete browsers that were holding web development back.
I 90% just want easy JSON POST.
Yep, that’s definitely covered: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options
If you end up using a bundler and npm dependencies, axios is also pretty good and very popular HTTP client.
Yeah, Fetch is so much better than jQuery’s http API. And if you need something more than Fetch, then Axios is far superior.
JSX is fucking weird compared to vue
Custom template language and custom DOM attributes are way weirder than just using language-native constructs (ternary operator, map/filter, variables, functions, etc.) directly like you can in JSX.
nah mate,mixing html into js is fucked, no matter how hard you cope.
Still better than whatever the hell this is
https://vuejs.org/guide/essentials/template-syntax
The more you scroll down, the worse it gets.
And this too: https://vuejs.org/guide/essentials/list
A new separate language with features that already existed in the original language (and worked with all its tooling, etc.)
template syntax is a piece of cake, takes literally 2 hours to learn everything you need and you can easily see what’s where and how the html will look when it’s rendered or not.
and the list rendering? you are literally pointing out the best features of vue.
But why bother with creating a new language, and duplicating all the features your language already has, in a weird way?
If I want a list of UI items based on an array of some data, I can just do
items.map(item => 〈Item key={item.id} item={item} /〉)
, using the normalmap
function that’s already part of the language.Or I can use a function, e.g.
items.map(item => renderItem(item, otherData))
etc.JSX itself is a very thin layer that translates to normal function calls.
I don’t think this is a very good example. You’ve just said not to use a new language, then used JSX, a new language.
but how do you know what renderItem does? where will the items end up?
we are visual creatures.
if I see a <ul><li></li></ul> I know it’s doing a list item for every object in given list.
it’s literally just html with a few added stuff, v-if to determine whether it’s rendered, v-for for iteration, dynamic class bindings and event listener bindings.
templating has also been around for a while for a reason it’s solid tech, thymeleaf and jsf/primefaces being prime examples.
Well you don’t have to place it in a separate function, nothing stops you from inlining that part and writing
li
or whatever directly there.It’s up to you how you organize your components.
DOM attributes are built for browsers and frameworks to take advantage of.
The style of some of those frameworks to stick symbols in there is downright weird. But that only goes against those particular frameworks. It doesn’t impact how good DOM attributes actually are.
Both are weird compared to Svelte.
Svelte uses labels, so Svelte itself is weird compared to everything. Except in a way to assembly and 50s goto-control-flow styled code.
Vue sucks. A pretty graphic of a CGI robot convincing untrained programmers to merge their web files and produce unreadable garbage as the output file.