A Very Public and Overdue Funeral for jQuery

AVeryPublicandOverdue
FuneralforjQuery
FITC WEB UNLEASHED - SEPT 26TH, 2017
$

Luke DeWitt
WEB TEAM LEAD / DAD /
SMOKER OF VARIOUS MEATS /
SAD BLUE JAYS FAN
Today’s Oﬃciant

Show of hands…
(notice a theme?)

DOM Selection / Manipulation
jQuery 2017
$(‘#el’);
$(‘.class’);
$(‘h1’);
d.getElementById(‘el’);
d.getElementsByClassName(‘class’);
d.getElementsByTagName(‘h1’);

jQuery 2017
$(‘#el’);
$(‘.class’);
$(‘h1’);
d.querySelector(‘#el’);
d.querySelectorAll(‘.class’);
d.querySelectorAll(‘h1’);

94%
99%
100%
Speed Increase

jQuery
2017
if ($(‘#about’).length > 0) {
// about page logic
}
if (null !== d.querySelector(‘#about’) {
// about page logic
}

Class Manipulation
jQuery
2017
$el.addClass(‘new-class’);
$el.removeClass(‘old-class’);
$el.toggleClass(‘class’);
use classList instead!

Class Manipulation
jQuery
2017
$el.addClass(‘new-class’);
$el.removeClass(‘old-class’);
$el.toggleClass(‘class’);
$el.classList.add(‘new-class’);
$el.classList.remove(‘old-class’);
$el.classList.toggle(‘class’);

Class Manipulation
jQuery
2017
$el.hasClass(‘some-class’);
$el.classList.contains(‘some-class’);

Class Manipulation
81%
85%
52%
Speed Increase

Attributes
jQuery
2017
// get
let foo = $el.attr(“id”);
// set
$el.attr(“id”, “foobar”);
// get
let id = $el.id;
// set
$el.setAttribute(“id”, “foobar”);

Data Attributes
jQuery
2017
$el.data();
// { foo: “bar”, baz: 52, alpha: [1, 2, 3] }
$el.dataset;
// { foo: “bar”, baz: 52, alpha: [1, 2, 3] }

Data Attributes
jQuery
2017
// set
$el.data(“foo”, “bar”);
// get
let foo = $el.data(“foo”);
// set
$el.dataset.foo = “bar”;
// get
let foo = $el.dataset.foo;

Data Attributes
32%
41%
8%
Speed Increase (Read)
75%
86%
65%
Speed Increase (Write)

XHR
jQuery
2017
$.ajax(‘https://someapi.com/users', {
success: function() {…},
dataType: ‘json’,
error: function() {…}
});
fetch(‘https://someapi.com/users')
.then(res => res.json())
.then(data => {
// do work
});

XHR
76%
83%
34%
Speed Increase

Data Iteration / Manipulation
jQuery
2017
$.each(array, (a) => {…});
$.map(array, (a) => {…});
$.merge(array1, array2);
array.forEach((a) => {…});
array.map((a) => {…});
array.concat((a) => {…});

Data Iteration / Manipulation
71%
79%
90%
Speed Increase (Map)
56%
29%
7%
Speed Increase (Merge)

Promises
jQuery 2017
function jqPromise() {
var deferred = $.Deferred();
setTimeout(() => {
deferred.resolve();
}, 100);
return deferred.promise();
}
jqPromise();

Promises
jQuery 2017
function jqPromise() {
var deferred = $.Deferred();
setTimeout(() => {
deferred.resolve();
}, 100);
return deferred.promise();
}
jqPromise();
function jsPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 100);
};
}
jsPromise();

Promises
88%
79%
90%
Speed Increase

Animation
jQuery
2017
$el.fadeIn(‘fast’);
$el.slideDown(‘slow’);
$el.animate({…});
Use CSS Animations / Transitions
Use the Web Animations API

redspace.com / T (902) 444.3490 FACEBOOK REDspace
TWITTER @theREDspace
LINKEDIN The REDspaceLUKE DEWITT @whatadewitt
THANKYOU!

THANKYOU!
Oh, by the way, we’re hiring! http://redspace.recruiterbox.com

A Very Public and Overdue Funeral for jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (8)

Similar to A Very Public and Overdue Funeral for jQuery

Similar to A Very Public and Overdue Funeral for jQuery (20)

More from FITC

More from FITC (20)

Recently uploaded

Recently uploaded (19)

A Very Public and Overdue Funeral for jQuery