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);

YouMightNotNeedjQuery.com

Pain Points

When does using vanilla JavaScript get annoying?

jQuery Plugins

http://metafizzy.co

Classes

// jQuery
$(el).addClass(className);

// vanilla JavaScript
if (el.classList) {
  el.classList.add(className); // IE 10+
} else {
  el.className += ' ' + className;
}

desandro/classie

// 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);

desandro/eventie

// 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 */ }
);

🎉?

github/fetch

IE 10+

🎉

🔥

🚒💨

🚒

🔥

💭

Questions?

@silvenon

silvenon