Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Very Public and Overdue Funeral for jQuery

218 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×