Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
AVeryPublicandOverdue
FuneralforjQuery
FITC WEB UNLEASHED - SEPT 26TH, 2017
$
Welcome.
Luke DeWitt
WEB TEAM LEAD / DAD /
SMOKER OF VARIOUS MEATS /
SAD BLUE JAYS FAN
Today’s Officiant
*SPOILERALERT*
R.I.P.
😭
DUDE!
SAVAGE AF
DUDE!
Show of hands…
HISTORYTIME
Mobile Traffic Growth
Mobile Traffic Growth
WEAREPROGRAMMERS!!!
= 👍
Tissue, anyone?
Show of hands…
Show of hands…
(notice a theme?)
DOM Selection / Manipulation
jQuery 2017
$(‘#el’);
$(‘.class’);
$(‘h1’);
d.getElementById(‘el’);
d.getElementsByClassName(...
DOM Selection / Manipulation
jQuery 2017
$(‘#el’);
$(‘.class’);
$(‘h1’);
d.querySelector(‘#el’);
d.querySelectorAll(‘.clas...
DOM Selection / Manipulation
94%
99%
100%
Speed Increase
DOM Selection / Manipulation
jQuery
2017
if ($(‘#about’).length > 0) {
// about page logic
}
if (null !== d.querySelector(...
Another theme…
Class Manipulation
jQuery
2017
$el.addClass(‘new-class’);
$el.removeClass(‘old-class’);
$el.toggleClass(‘class’);
use clas...
Class Manipulation
jQuery
2017
$el.addClass(‘new-class’);
$el.removeClass(‘old-class’);
$el.toggleClass(‘class’);
$el.clas...
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
$e...
Data Attributes
jQuery
2017
$el.data();
// { foo: “bar”, baz: 52, alpha: [1, 2, 3] }
$el.dataset;
// { foo: “bar”, baz: 52...
Data Attributes
jQuery
2017
// set
$el.data(“foo”, “bar”);
// get
let foo = $el.data(“foo”);
// set
$el.dataset.foo = “bar...
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() {…}
});...
Obligatory
XHR
76%
83%
34%
Speed Increase
Data Iteration / Manipulation
jQuery
2017
$.each(array, (a) => {…});
$.map(array, (a) => {…});
$.merge(array1, array2);
ar...
WITHGREATPOWER
(ANDARRAYS)
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);
r...
Promises
jQuery 2017
function jqPromise() {
var deferred = $.Deferred();
setTimeout(() => {
deferred.resolve();
}, 100);
r...
Promises
88%
79%
90%
Speed Increase
Animation
jQuery
2017
$el.fadeIn(‘fast’);
$el.slideDown(‘slow’);
$el.animate({…});
Use CSS Animations / Transitions
Use th...
Start today!
“But my plugins…”
One more show of hands…
MicroJS
MicroJS
MicroJS
MicroJS
Almost anything…
Still kickin’…
Still kickin’…
I get it…
Time to say goodbye…
Thank you for coming.
redspace.com / T (902) 444.3490 FACEBOOK REDspace
TWITTER @theREDspace
LINKEDIN The REDspaceLUKE DEWITT @whatadewitt
THANK...
THANKYOU!
Oh, by the way, we’re hiring! http://redspace.recruiterbox.com
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
A Very Public and Overdue Funeral for jQuery
Prochain SlideShare
Chargement dans…5
×

A Very Public and Overdue Funeral for jQuery

452 vues

Publié le

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

Publié dans : Internet
  • Login to see the comments

A Very Public and Overdue Funeral for jQuery

  1. 1. AVeryPublicandOverdue FuneralforjQuery FITC WEB UNLEASHED - SEPT 26TH, 2017 $
  2. 2. Welcome.
  3. 3. Luke DeWitt WEB TEAM LEAD / DAD / SMOKER OF VARIOUS MEATS / SAD BLUE JAYS FAN Today’s Officiant
  4. 4. *SPOILERALERT*
  5. 5. R.I.P.
  6. 6. 😭
  7. 7. DUDE!
  8. 8. SAVAGE AF
  9. 9. DUDE!
  10. 10. Show of hands…
  11. 11. HISTORYTIME
  12. 12. Mobile Traffic Growth
  13. 13. Mobile Traffic Growth
  14. 14. WEAREPROGRAMMERS!!!
  15. 15. = 👍
  16. 16. Tissue, anyone?
  17. 17. Show of hands…
  18. 18. Show of hands… (notice a theme?)
  19. 19. DOM Selection / Manipulation jQuery 2017 $(‘#el’); $(‘.class’); $(‘h1’); d.getElementById(‘el’); d.getElementsByClassName(‘class’); d.getElementsByTagName(‘h1’);
  20. 20. DOM Selection / Manipulation jQuery 2017 $(‘#el’); $(‘.class’); $(‘h1’); d.querySelector(‘#el’); d.querySelectorAll(‘.class’); d.querySelectorAll(‘h1’);
  21. 21. DOM Selection / Manipulation 94% 99% 100% Speed Increase
  22. 22. DOM Selection / Manipulation jQuery 2017 if ($(‘#about’).length > 0) { // about page logic } if (null !== d.querySelector(‘#about’) { // about page logic }
  23. 23. Another theme…
  24. 24. Class Manipulation jQuery 2017 $el.addClass(‘new-class’); $el.removeClass(‘old-class’); $el.toggleClass(‘class’); use classList instead!
  25. 25. 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’);
  26. 26. Class Manipulation jQuery 2017 $el.hasClass(‘some-class’); $el.classList.contains(‘some-class’);
  27. 27. Class Manipulation 81% 85% 52% Speed Increase
  28. 28. Attributes jQuery 2017 // get let foo = $el.attr(“id”); // set $el.attr(“id”, “foobar”); // get let id = $el.id; // set $el.setAttribute(“id”, “foobar”);
  29. 29. Data Attributes jQuery 2017 $el.data(); // { foo: “bar”, baz: 52, alpha: [1, 2, 3] } $el.dataset; // { foo: “bar”, baz: 52, alpha: [1, 2, 3] }
  30. 30. 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;
  31. 31. Data Attributes 32% 41% 8% Speed Increase (Read) 75% 86% 65% Speed Increase (Write)
  32. 32. 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 });
  33. 33. Obligatory
  34. 34. XHR 76% 83% 34% Speed Increase
  35. 35. Data Iteration / Manipulation jQuery 2017 $.each(array, (a) => {…}); $.map(array, (a) => {…}); $.merge(array1, array2); array.forEach((a) => {…}); array.map((a) => {…}); array.concat((a) => {…});
  36. 36. WITHGREATPOWER (ANDARRAYS)
  37. 37. Data Iteration / Manipulation 71% 79% 90% Speed Increase (Map) 56% 29% 7% Speed Increase (Merge)
  38. 38. Promises jQuery 2017 function jqPromise() { var deferred = $.Deferred(); setTimeout(() => { deferred.resolve(); }, 100); return deferred.promise(); } jqPromise();
  39. 39. 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();
  40. 40. Promises 88% 79% 90% Speed Increase
  41. 41. Animation jQuery 2017 $el.fadeIn(‘fast’); $el.slideDown(‘slow’); $el.animate({…}); Use CSS Animations / Transitions Use the Web Animations API
  42. 42. Start today!
  43. 43. “But my plugins…”
  44. 44. One more show of hands…
  45. 45. MicroJS
  46. 46. MicroJS
  47. 47. MicroJS
  48. 48. MicroJS
  49. 49. Almost anything…
  50. 50. Still kickin’…
  51. 51. Still kickin’…
  52. 52. I get it…
  53. 53. Time to say goodbye…
  54. 54. Thank you for coming.
  55. 55. redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspaceLUKE DEWITT @whatadewitt THANKYOU!
  56. 56. THANKYOU! Oh, by the way, we’re hiring! http://redspace.recruiterbox.com

×