Presented at JoomlaDay Chicago 2019 Joomla 4 is on the horizon and will be closer than ever to the standards of the modern web. Underlying scripts will not rely on external libraries any longer, reducing dependencies for the years ahead. For small javascript tasks, writing directly to the DOM may be faster than relying on libraries such as jQuery. In this hands-on session, we will see how small jQuery tasks can be easily rewritten with plain javascript.

1.
JQUERY VS PURE
JAVASCRIPT
OLIVIER BUISARD
OCTOBER 2019

2. Olivier Buisard
A BIT OF HISTORY
10/11/2019
1995 061999 2012 2015090720051997 08
ES3
jScript AJAX
1.5 3.0
ES5 ES6

3. Olivier Buisard
TODAY
• Matured standards
• Wide support
• ‘Death’ of old browsers (IE6-8)
10/11/2019

4. Olivier Buisard
JQUERY ADVANTAGES AND
DRAWBACKS
• Written in JavaScript
• Supports old browsers
• Code simplification, chaining
• Many available plugins
• Extra library file including features you may not need
• Possible conflicts with other libraries
• Heavy to operate on mobile devices
• Overuse and inefficiency
10/11/2019

5. Olivier Buisard
ADVANTAGES IN LEARNING TODAY’S
PURE JAVASCRIPT
• Fast (native to the browsers)
• Clean, efficient code
• Helps understand jQuery underlying code
10/11/2019

6. Olivier Buisard
SEPARATION AND DELEGATION
• HTML:
the structure (content, buttons, links)
• CSS:
the visual, the interactivity, the layout
• JavaScript:
the loading of content on demand (AJAX), the event listeners
(for touch, clicks and scroll…)
10/11/2019

7. Olivier Buisard
DOCUMENT READY
10/11/2019
jQuery(document).ready(function($) {
// do something
});
document.addEventListener("DOMContentLoaded", function() {
// do something
});

8. Olivier Buisard
SELECTING ELEMENTS – ‘$’
10/11/2019
$(".tile");
$("#mytile");
// select the first instance of .tile
document.querySelector(".tile");
// select all instances of .tile
document.querySelectorAll(".tile");
// select ‘the’ instance of #mytile
document.getElementById("mytile");

9. Olivier Buisard
USING SELECTED ELEMENTS
10/11/2019
$(".tile").hide();
document.querySelectorAll(".tile").forEach(function(tile) {
tile.style.display = "none";
});

10. Olivier Buisard
TRAVERSING THE TREE
10/11/2019
var tile = $(".tile");
tile.next();
tile.prev();
tile.parent();
var tile = document.querySelector(".tile");
tile.nextElementSibling;
tile.previousElementSibling;
tile.parentElement;

11. Olivier Buisard
WORKING WITH THE DOM
10/11/2019
// Create a div and add text
var element = $("<div/>");
element.text("This is just text");
// Create a div and add text
var element = document.createElement("div");
var text = document.createTextNode("This is just text");
element.appendChild(text);

12. Olivier Buisard
USING CLASSES
10/11/2019
var tile = document.querySelector(".tile");
tile.classList.add("active");
tile.classList.remove("active");
tile.classList.toggle("active");
if (tile.classList.contains("active")) {
// Do something...
}
var tile = $(".tile");
tile.addClass("active");
tile.removeClass("active");
tile.toggleClass("active");
if (tile.hasClass("active")) {
// Do something...
}

13. Olivier Buisard
WORKING WITH EVENTS
10/11/2019
$(".button").click(function(e) {
// Do something...
});
$(".tile").trigger("myEvent");
document.querySelector(".button")
.addEventListener("click", function(e) {
// Do something...
});
document.querySelector(".tile")
.dispatchEvent(new Event("myEvent"));

14. Olivier Buisard
AJAX
10/11/2019
$.ajax({
url: "data.json"
}).done(function(data) {
// Handle data
}).fail(function() {
// Handle error
});
fetch("data.json")
.then(function(data) {
// Handle data
})
.catch(function(error) {
// Handle error
});

15. Olivier Buisard
LIVE EXAMPLE
10/11/2019

16. Olivier Buisard 010/11/2019
Make sure that no one will be blocked
by using an older browser
if they don’t get all interactions
that are meant for a new technology

17. Olivier Buisard
CAN I USE ?
10/11/2019

18. Olivier Buisard
BABELJS.IO
10/11/2019

19. Olivier Buisard
POLYFILL.IO
10/11/2019

20. Olivier Buisard
YOUR OWN POLYFILL
10/11/2019
if (!Array.prototype.push) {
// Check if not already supported, then only add.
// No need to check this when you want to Override the method
// Add method to prototype of array,
// so that it can be directly called on array
Array.prototype.push = function() {
// Use loop for multiple/any no. of elements
for (var i = 0; i < arguments.length; i++) {
this[this.length] = arguments[i];
}
// Return new length of the array
return this.length;
};
}

21. Olivier Buisard
SHOULD I GET RID OF JQUERY?
• In Joomla 3, if the template uses Bootstrap 2, 3 or 4,
jQuery is included
• For complex interactions (ie slider), use jQuery
• For simpler code, go with pure JavaScript
• Joomla 4 is slowly becoming jQuery independent
• Bootstrap 5 will not require jQuery
10/11/2019

22. Olivier Buisard
REFERENCES
• youmightnotneedjquery.com
• tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript
• javascript.info (modern JavaScript tutorial)
• github.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript
• caniuse.com
• babeljs.io
• polyfill.io
10/11/2019

23. Olivier Buisard
OLIVIER.BUISARD@SIMPLIFYYOURWEB.COM
@SIMPLIFYYOURWEB THANK YOU!
10/11/2019