Presented at Web Unleashed 2017 More info at www.fitc.ca Presented by Luke Dewitt, REDspace Overview 2017. The browser wars are in full force with Chrome, Safari, Edge, and Firefox all battling for market share. Resources are being poured into JavaScript rendering engines, and the language itself continues to grow and expand at a rate unseen anytime before to take advantage of modern machines… An unfortunate casualty along the way – jQuery. Once dubbed the “only tool you need”, it has been rendered almost useless by modern day browsers. Join Luke as he bids a fond, and somewhat embarrassing, goodbye to an old friend, and introduces some new methods that you can start using today on your sites and apps. Objective To show you that you can ditch jQuery today with little to no effort! Target Audience Anyone who builds websites in 2017 and still relies on jQuery to do a lot of their heavy lifting. Assumed Audience Knowledge Basic JavaScript Four Things Audience Members Will Learn Writing JavaScript without leaning on jQuery Performance benefits of ditching jQuery Micro-frameworks Why it’s time to say goodbye

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

3. Welcome.

4. Luke DeWitt
WEB TEAM LEAD / DAD /
SMOKER OF VARIOUS MEATS /
SAD BLUE JAYS FAN
Today’s Officiant

8. *SPOILERALERT*

9. R.I.P.

10. 😭

12. DUDE!

13. SAVAGE AF

14. DUDE!

15. Show of hands…

16. HISTORYTIME

29. Mobile Traffic Growth

32. Mobile Traffic Growth

38. WEAREPROGRAMMERS!!!

41. = 👍

42. Tissue, anyone?

43. Show of hands…

44. Show of hands…
(notice a theme?)

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

46. DOM Selection / Manipulation
jQuery 2017
$(‘#el’);
$(‘.class’);
$(‘h1’);
d.querySelector(‘#el’);
d.querySelectorAll(‘.class’);
d.querySelectorAll(‘h1’);

47. DOM Selection / Manipulation
94%
99%
100%
Speed Increase

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

49. Another theme…

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

51. 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’);

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

53. Class Manipulation
81%
85%
52%
Speed Increase

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

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

56. 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;

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

58. 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
});

59. Obligatory

60. XHR
76%
83%
34%
Speed Increase

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

63. WITHGREATPOWER
(ANDARRAYS)

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

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

66. 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();

67. Promises
88%
79%
90%
Speed Increase

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

69. Start today!

70. “But my plugins…”

71. One more show of hands…

72. MicroJS

73. MicroJS

74. MicroJS

75. MicroJS

76. Almost anything…

77. Still kickin’…

79. Still kickin’…

80. I get it…

83. Time to say goodbye…

84. Thank you for coming.

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

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