jQuery to JavaScript

Growing beyond the DOM

Rich Gilbank

Who is this guy?

And what's with the accent?

About me

  • I write code for fun and profit
  • Budding open-source contributor
  • All around nice guy, eh?
  • Front-end developer at Shopify

Shopify

  • A platform to start your new business
  • In-person, online, & more
  • Over 90,000 merchants
  • Over $2 Billion in merchant sales

What's all this then?

Let's learn some JavaScript™

Javascript: origins

  • 1995: Brendan Eich creates JavaScript in 10 days at Netscape
  • A "little brother" to Java

What's in a name?

1997: ECMAScript

(first edition)

  • 1998: 2nd edition
  • 1999: 3rd edition
  • 4th edition
  • edition 3.1
  • 2009: 5th edition
  • WIP: 6th edition

chaos

"ajax"

Coined by this guy:

Jesse James Garrett [Adaptive Path]

AJAX requests


var xmlHttp = null;
if (window.XMLHttpRequest) {
    // Modern browsers
    xhr = new XMLHttpRequest();
}
else
{
    if (window.ActiveXObject) {
        try {
            // IE6
            xhr = new ActiveXObject('MSXML2.XMLHTTP.3.0');
        } catch(e) {
            // IE < 5
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
    }
}
// Do stuff with xhr
        

DOM traversal


document.getElementById('elemId');

document.getElementsByTagName('button');

document.getElementsByClassName('my-class');

// ...
document.getElementsByClassName = function(cl) {
  var matches = [];
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    if((' '+elem[i].className+' ').indexOf(' '+cl+' ') > -1) matches.push(elem[i]);
  }
  return matches;
};
        

jQuery FTW!

AJAX requests


var xmlHttp = null;
if (window.XMLHttpRequest) {
    // Modern browsers
    xhr = new XMLHttpRequest();
}
else
{
    if (window.ActiveXObject) {
        try {
            // IE6
            xhr = new ActiveXObject('MSXML2.XMLHTTP.3.0');
        } catch(e) {
            // IE < 5
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
    }
}
// Do stuff with xhr
        

$.ajax( 'test.html' );
        

DOM traversal


document.getElementById('elemId');

document.getElementsByTagName('button');

document.getElementsByClassName('my-class');

// ...
document.getElementsByClassName = function(cl) {
  var matches = [];
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    if((' '+elem[i].className+' ').indexOf(' '+cl+' ') > -1) matches.push(elem[i]);
  }
  return matches;
};
        

$('#elemId');

$('button');

$('.my-class');
        

Today

(hooray!)

Ajax requests


// IE >= 7
var xhr = new XMLHttpRequest();
xhr.onload = function(){
    console.log(this.responseText);
}
xhr.open('get', 'test.html', true);
xhr.send();
        

Dom traversal


// IE >= 8
var elem = document.querySelector('.container > .elem');

var children = elem.querySelectorAll('button');
        

The future

Block-level scoping

The problem


var years = [];

for (var i = 0; i <= 9; i++) {
    years[i] = function () {
        console.log("The year is 201" + i);
    };
}

years[4]();
        

// The year is 2019
// ಠ_ಠ
        

The Solution


var years = [];

for (let i = 0; i <= 9; i++) {
    years[i] = function () {
        console.log("The year is 201" + i);
    };
}

years[4]();
        

// The year is 2014
        

For-of

Today


var myArray = ['a', 'b', 'c', 'd', 'e'];

for(var i in myArray) {
    console.log(i);  // 0, 1, 2, 3, 4
}
        


The Future


var myArray = ['a', 'b', 'c', 'd', 'e'];

for(var i of myArray) {
    console.log(i);  // a, b, c, d, e
}
        

Default parameters and spread operators

Default parameters


function myFunc(isWin = true, muchAwesome = true, suchBad = false){

    // Function-y stuff

}
        


Spread operators


function myFunc(arg1, ...otherArgs) {

    for(var i of otherArgs) {
        console.log(i);
    }

}
        

And lots of other things...

classes, destructuring, constants, generators, proxies, maps, weak maps, array comprehension, binary data, modules...

And more!

Are we there yet?
Are we there yet?
Are we there yet?
Are we there yet?
Are we there yet?
Are we there yet?
Are we there yet?
Are we there yet?
Are we there yet?
Are we there yet?

We'll get there when we get there!

https://github.com/google/traceur-compiler

http://www.es6fiddle.net

http://bit.ly/1gOlV5W

"But, I don't care about any of that!"

Web components

"Web components" means:

  • Shadow DOM
  • HTML Templates
  • Custom elements
  • HTML Imports

What it really means:


  Page Title

  
      

      
          
              Bob Smith
              I like this video
          
          
              That Guy
              I really don't like this video
          
      

  

  

Enter: Polymer

http://polymer-project.org

Thanks!

@richgilbank