You (probably) Don't Need jQuery (anymore)
IE 6-8
Safari 5.1
Why is jQuery Useful?
- abstracts browser inconsistencies away
- simple syntax
- easy DOM manipulation
Why is jQuery Hurtful
- you're not learning much JavaScript
// jQuery
$.ajax({
type: 'POST',
url: '/my/url',
data: data
});// vanilla JavaScript
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);Pain Points
When does using vanilla JavaScript get annoying?
jQuery Plugins
Classes
// jQuery
$(el).addClass(className);// vanilla JavaScript
if (el.classList) {
el.classList.add(className); // IE 10+
} else {
el.className += ' ' + className;
}// classie
classie.add(el, className);Events
// jQuery
$(el).on(eventName, handler);// vanilla JavaScript
function addEventListener(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler); // IE 9+
} else {
el.attachEvent('on' + eventName, function(){
handler.call(el);
});
}
}
addEventListener(el, eventName, handler);// eventie
eventie.bind(el, eventName, handler);AJAX
$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) { /* ... */ },
error: function() { /* ... */ }
});// vanilla JavaScript
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// success
var resp = request.responseText;
} else {
// error status code
}
};
request.onerror = function() {
// connection error
};
request.send();Fetch API
fetch('/my/url').then(
function (resp) { /* success */ },
function (err) { /* error */ }
);🎉?
IE 10+
🎉
🔥
🚒💨
🚒
🔥
🔥
🔥
🔥
💭
Questions?
@silvenon
silvenon
You Don't Need jQuery
By Matija Marohnić
