Doing it without jQuery

Back in 2006

sunglasses

Javascript wasn't called javascript....

AJAX

Joink

Animation demo

Draggables demo

Also in 2006

Frameworks were popular

  • Easy development
  • Fixed cross browser issues

Fast forward to 2014

jQuery is huge!

  • A shitload of plugins
  • Almost everybody knows / uses jQuery

No really, jQuery is huge!

238.66kb normal file size

Ok, that's not fair

28.58kb

Minified and gZipped

That's not so bad?

http://mathiasbynens.be/demo/jquery-size

Do you really need jquery?

Common issues

  • Responsive frameworks
  • Polyfills
  • Basic operation

Vanilla javascript

Try it

Common use of jQuery

Selectors

$('.my #awesome selector');
document.querySelectorAll('.my #awesome selector');

Finding children

$(el).find(selector);
el.querySelectorAll(selector);

querySelectorAll?

http://caniuse.com/#search=querySelectorAll

Adding classnames

$(el).addClass(className);
el.className += ' ' + className;

if (el.classList) {
	el.classList.add(className);
}else{
	el.className += ' ' + className;
}

Width / height

$(el).outerHeight()
el.offsetHeight

Parent

$(el).parent();
el.parentNode

Dom manipulation

$(el).remove();
el.parentNode.removeChild(el);

You might not need jQuery

http://youmightnotneedjquery.com

So back to basic?

Micro libraries

Qwery

Qwery is a modern selector engine built on top of querySelectorAll giving you practical utility.

https://github.com/ded/qwery

Bonzo

A library agnostic extensible DOM utility. Nothing else.

https://github.com/ded/bonzo

Events

$(el).on(eventName, eventHandler);
el.addEventListener(eventName, eventHandler);

Bean

Bean is a small, fast, cross-platform, framework-agnostic event manager designed for desktop, mobile, and touch-based browsers

https://github.com/fat/bean

Ajax

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});
request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400){
    // Success!
    resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

Reqwest

It's AJAX! All over again. Includes support for xmlHttpRequest, JSONP, CORS, and CommonJS Promises A.

https://github.com/ded/reqwest

So why not use jQuery?

If speed / filesize is important, can't we just ditch jquery/javscript for mobile users?

In short

  • Decide if you really need jQuery for your project
  • Check if you can do things faster without the help of any library
  • Check for small focussed micro libraries to help you complete the job

Jochen Vandendriessche

Freelance frontend developer at builtbyrobot

@joggink on twitter

THE END