Javascript without jQuery

A word on jQuery

• jQuery is everywhere
• It's become the standard.
• It's synonymous with javascript.
• It's seen as a language rather than a framework.
• Modern browsers give us a great deal of functionality out of the box.
• jQuery can abstract you away from the DOM.
• It's nice to know how things work.

What do we use jQuery for?

• $(document).ready();
• $('.thing').hide();
• $('.thing').addClass('thingier');
• $('.thing').slideDown('fast');
• $('li:last-child').before('<li>penultimate child</li>');

Why would you skip jQuery?

• only using a subset of browsers
• not writing much JS
• all your js is business logic
• using webworkers
• exploring the latest features

Native DOM Selection

• the power of the dollar
• the new Dollar (querySelect)
• getElementsByClassName
• performance boosts
• what the heck is a nodelist?

$('#thing');

document.getElementById('thing');

$('.things');

document.getElementsByClassName('things');

$('input');

document.getElementsByTagName('input');

$('#thing .list li');

document.querySelector('#thing .list li');

Reading the DOM

• what is a dom element?
• styles
• attributes
• events
• methods
• relationships
• Reading the dom like this reminds you that it is an Object Model.

Manipulating the DOM

• The DOM as strings
• slower
• less verbose
• more easily understood
• The DOM as objects
• creates reusable dom elements
• allows for easy referencing

$('#thing').html('<p>hello<p>');

document.getElementById('thing').innerHTML = '<p>hello<p>';

$('.things').append('<span>thing<span>');

document.querySelector('.things').innerHTML += '<p>hello<p>';

var thing = document.createElement('p');
document.querySelector('.things').appendChild(thing);
      

$('#thing p').remove();

document.getElementById('#thing').removeChild('p');

Animation/DHTML

• CSS3 vs requestAnimationFrame
• both more performant than setTimeOut
• CSS3 animations can be fiddly
• requestAnimationFrame requires loops and processing

$('#thing').animate({top:'12px', left: '12px'});

document.getElementById('thing').classList.add('tadaa');

#thing{
  position:absolute;
  top:0px;
  left:0px;
  transition:all 0.5s ease-out;
}

#thing.tadaa{
  top:12px;
  left:12px;
}
      

Handling Events

• listeners vs assignment
• How many events are there?
• what does that 'false' mean?
• What's in an event object?
• What contexts do you get back?
• 'live' or 'deferred' bindings
• custom/triggering events.

$('#thing').click(function(){console.log('hello world!');});

document.getElementById('thing').addEventListener('click', function(){
  console.log('hello world!');
}, false);

$(window).trigger('newMessage', { message: "Hello World!", time: new Date()})

var event = new CustomEvent(
  "newMessage",
  {
    detail: {
      message: "Hello World!",
      time: new Date()
    },
    bubbles: true,
    cancelable: true
  }
);
window.dispatchEvent(event);
      

Discovering the DOM

• jQuery wraps everything away
• By using native events you can start exploring with the console
• You see the underlying thinking behind the browser
• Approaching css as style objects is interesting
• break out of that monad!

Cross Browser Compatability

• jQuery is great at this
• It's why it's so big!
• Polyfills are an answer
• The DOM tends to be honest.
• Use feature detection.

underscore js

• a big microframework
• gives us some powerful FP functionality
• hands us some of the nice bits of jquery without the weight
• loads of clever stuff with arrays
• feels very javascripty!

An alternative: microframeworks

• A movement inspired by node js
• A library with one focus
• All free from dependencies
• You choose the amount of code you want
• All open source
• Easy to adapt / roll your own
• http://microjs.com/

An Admission

• I use jQuery a lot.
• It's still my go to library.
• Its fast and easy.
• I'm more likely to rmeove jquery than avoid it.
• I rely on jQuery’s events.
• I rely on jQuery’s AJAX methods.
• I rely on jQuery when using IE.

Useful Links

• Lee Brimelow
• MDN
• tuts plus