Search posts, tags, users, and pages
ReactJS (or its ilk like Angular, Vue, Ember) is far more valuable than jQuery today. When I get résumés for developers where jQuery is their only framework, I will almost certainly pass. jQuery is on its way out.
My team recently removed every reference to jQuery in our project. It was so cathartic. Everything that you use $() for, you can use document.querySelector(). And all the DOM manipulation that you would do with jQuery is done much more cleanly with JSX. Instead of $.ajax(), use fetch() (it's a native method or polyfill).
Is jQuery really bad at all today? How about Lorefnon's and Ben Buchanan (200ok)'s opinion?
Billy Halim jQuery is really bad, because it does heavy abstractions, which are not necessary, but eat away performance. Its days of glory are long gone today.
Personally, I still use jQuery whenever I have to support old browser engines, because that's what jQuery is good at (which is also consistent with the answers of the others ;) ). For anything else, I stick to the standards (or polyfills in the worst case). By the way, as a result, I also do not use React and get by quite well.
Most libraries and frameworks are useful for very big applications, like a Facebook. But for your everyday stuff, leaving them out can be faster and lead to better performance. Writing vanilla JS, you will get better at handling low-level code in the long-run, which will ultimately also help you debug large applications which rely on frameworks and can give you the edge over your colleagues and competitors.
Lorefnon and Ben Buchanan (200ok) are correct in that React and jQuery do not cover the same subject matter one-for-one. However, the areas where React lacks a feature found in jQuery, chances are that there is a native feature that is better served to help. JavaScript has caught up a lot in the last few years to a point where many of the gaps that jQuery filled are now implemented natively. If you are going to invest time in learning a framework/library, a modern one like React or Vue is much more worthwhile. (Honestly I would recommend learning Vue for a novice before learning React.)
There are only a few concepts in jQuery that are critical to know to use it effectively.
$()append(), insert(), addClass()$.on()$.ajax()The main construct in jQuery is the node list, what is returned by $(). Node lists can then in turn be operated on to manipulate elements in the DOM. On the other hand, in modern frameworks, one of the foundational concepts is that of the binding. Bindings make code more intelligible by allowing logic to be declaratively included alongside markup rather than being imperatively executed separately onto markup. Bindings will cover jQuery's mechanisms for event handling (e.g. $.on()), DOM manipulation, and querying (implicitly). As for AJAX, just use the browser's native fetch() method.
Take for instance what is need to create a todo list with clickable items.
In React:
render() {
return (
<ul>
(todos.map(function(todo) {
return <li onClick=markDone>{todo.text}</li>
}))
</ul>
);
}
In Vue:
<ul>
<li v-for="todo in todos" v-on:click="markDone">
{{ todo.text }}
</li>
</ul>
In Ember:
<ul>
{{#each todos as |todo|}}
<li {{action 'markDone'}}>
{{todo.text}}
</li>
{{/each}}
</ul>
In Knockout:
<ul data-bind="foreach: todos">
<li data-bind="text: text, click: markDone"></li>
</ul>
In Angular 2:
<ul *ngFor="let todo of todos">
<li (click)="markDone($event)">
{{ todo.text }}
</li>
</ul>
However, in jQuery, it's more like this:
var list = $('<ul></ul>');
todos.forEach(function(todo)
var listItem = $('<li></li>')
.text(todo.text)
.on('click', markDone);
list.append(listItem);
});
$('body').append(list);
jQuery tends to lead to bad coding practices and sloppy code, often without any discernible structure. It is hard to maintain and hard to scale. With all of the alternatives available these days, there is no reason to have jQuery in your toolbelt... with exception of needing it to maintain legacy code.
Also I must disagree with the assertion that only vanilla JavaScript in worthwhile to learn and not any frameworks. For a novice, using only vanilla JavaScript will end up being too daunting. Libraries exist for a reason because they have solved a problem (and solved it well). Don't reinvent the wheel unnecessarily.
Matt Strom I think you should write this reply as a separate answer or just update your existing answer - so that more users can read this and upvote! :)
jQuery isn't _evil _as such. It has nicer syntax for a lot of simple tasks and vanilla js still has tricks and traps you have to remember, eg. Array.prototype.forEach hacks just to get IE11 to iterate over nodelists.
So comparing the two:
$('selector').each(function(){
$(this).dostuff();
});
Array.prototype.forEach.call(document.querySelectorAll('selector'), function(el) {
el.dostuff();
});
The vanilla js really isn't the nicest bit of code you're going to see all day, although it is quick.
So going from jQuery to vanilla I do miss the convenience of just not having to worry about compatibility. jQuery is just _a lot of extra weight _for that convenience; and being an abstraction it will always have a performance tradeoff. Hence rolling up the sleeves and using vanilla ;)