Per tanto tempo, dal 2006 in poi, il JavaScript (anche detto JS) divenne un linguaggio molto popolare e utilizzato per creare effetti grafici accattivanti per le slide di un sito web, oppure per migliorare la UX (User Experience) di una semplice web application.
In quell’anno il JS esprime tutta la sua potenza, grazie all’uscita di una libreria chiamata JQuery, un framework capace di rendere il codice JS semplice, veloce e facilmente integrabile all’interno di progetti complessi e non.
Questa libreria, da un paio di anni ad oggi, sta iniziando ad attraversare un lentissimo declino, ma prima di addentrarci nella questione voglio raccontarvi la breve storia di questo grandissimo mito!
Breve storia del Jquery
John Resig sviluppatore front-end e insegnante alla Khan Academy nel gennaio del 2006, crea questa potentissima libreria, il cui nome originale era JSelect. Dato che non trovò nessun dominio disponibile con quel nome, decide di battezzarlo JQuery con lo slogan “Write less, do more” che tradotto sta per “Scrivi di meno, fai di più”.
La nascita di questo framework ha come primo scopo quello di facilitare la manipolazione degli elementi DOM riassumendo il codice in poche semplici righe e di facilitare la gestione dei progetti rendendo il codice meno complesso e più gestibile.
Inoltre risolveva le problematiche del vecchio standard JS che non aveva funzioni che velocizzassero le chiamate degli elementi DOM.
Per essere più chiaro vi faccio un esempio con JQuery e un altro con il vecchio standard ECMAScript (aka JavaScript), partendo da un Layout HTML (che non cambierà in nessuno dei due esempi).
Supponiamo di creare 5 quadrati sfondo blu e bordo nero (Layout HTML) e decidiamo di cambiare i colori dello sfondo (da blu a rosso) e dei bordi (da neri a blu).
Layout HTML (Non cambia in nessuno dei due esempi)
<html>
<head>
<title>Esempio Ciclo</title>
<style>
.quadrato {
width:200px;
height:200px;
margin:8px;
background:blue;
border:1px solid black;
float:left;
}
.bordo_blue {
border:5px solid blue;
}
</style>
</head>
<body>
<div class="quadrato"></div>
<div class="quadrato"></div>
<div class="quadrato"></div>
<div class="quadrato"></div>
<div class="quadrato"></div>
</body>
Attraverso il Codice JQuery (di seguito), otteniamo la trasformazione dei colori del sfondo e dei bordi attraverso una libreria (jquery-3.3.1.slim.min.js ) che aggiunge una classe CSS.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
$(document).ready(function () {
$(".quadrato").css("background","red");
$(".quadrato").addClass("bordo_blue");
});
</script>
Invece, attraverso il codice Javascript ECMA 4, avremo:
<script>
var quadrato = document.getElementsByClassName("quadrato");
for(i= 0; i <= quadrato.length; i++) {
quadrato[i].style.backgroundColor = "red";
quadrato[i].classList.add("bordo_blue");
}
</script>
Come potrai vedere, il JQuery abbrevia di molto il codice sorgente Javascript utilizzando la variabile di riferimento $, utilizzata anche da altri frameworks di sviluppo come Prototype, MooTools e YUI ma con scopi differenti.
Il carattere $ serve a dichiarare un’istanza JQuery e richiama l’elemento assoluto del browser ovvero document che precarica gli script annessi con il metodo ready.
Infine la $ può richiamare sia gli Id che le classi usando la sintassi CSS (#selettore, .selettore) in modo che capisca perfettamente che tipo di DOM sta manovrando, applicando il comportamento a tutti gli elementi senza aggiungere altro codice.
Invece con Javascript per poter applicare le modifiche è stato necessario utilizzare un ciclo for per poter ciclare l’istanza di ogni elemento con la classe “quadrato” e in più aggiungere la funzione .add che richiama a sua volta la proprietà classList.
Con questo esempio abbiamo riassunto in poche parole tutto ciò che ci siamo detti fino ad ora, in modo da capire le sostanziali differenze di codice e di velocità (in questo caso) tra JQuery e JavaScript.
La nascita di ECMA 6 (JavaScript 6)
Dopo anni di ritardi di sviluppo, dibattiti fra i vari team che gestivano lo standard ECMA, i vari problemi di retro-compatibilità (una cosa normale, tra l’altro) tra Js e browser, finalmente a giugno 2016 nasce lo standard ECMA 6 che introduce nuove caratteristiche e funzionalità al Javascript (finalmente!).
Queste caratteristiche rendono il Js un linguaggio più agevole e il codice molto più dinamico, ma soprattutto meno ridondante.
Una delle caratteristiche più importanti e l’introduzione dei metodi querySelector e querySelectorAll appartenente alla classe document.
Di seguito, userò lo stesso esempio del paragrafo precedente, utilizzando il codice nella versione Js 6.
<script>
var quadrato = document.querySelector(".quadrato");
quadrato.setAttribute("style","background-color:red");
quadrato.classList.add("bordo_blue");
</script>
Cosa succede in Js 6:
Dichiaro una variabile quadrato e assegno la funzione querySelector che restituisce il primo elemento trovato che ha come classe “.quadrato”.
La grande novità di Js 6 è la funzione SetAttribute che permette di aggiungere al codice HTML nuove proprietà CSS sotto forma di funzione, utilizzando come primo parametro “style” e assegnando, come secondo, la proprietà (background-color:red) rimandandolo al DOM specificato.
Nel caso in cui vogliamo assegnare le proprietà CSS a tutti gli elementi della classe .quadrato, bisogna utilizzare la funzione querySelectorAll e un ciclo for per iterare tutti gli elementi, come nell’esempio seguente.
<script>
var quadrato = document.querySelectorAll(".quadrato");
var index = document.querySelectorAll(".quadrato").length;
for(i = 0; i <= index; i++) {
quadrato[i].setAttribute("style","background-color:red");
quadrato[i].classList.add("bordo_blue");
}
</script>
Un’altra caratteristica di questo nuovo standard è l’Arrow function ( =>) (per approfondire clicca qui) che permette di creare una funzione anonima per compiere un’azione [() =>, vedi l’esempio successivo per capirne di più], cosa non possibile per il vecchio standard JS e per JQuery.
Possiamo fare un esempio: abbiamo un solo quadrato, al quale aggiungo un evento click, con il quale il colore cambia.
Avremo nella versione Layout HTML/CSS, questo:
<html>
<head>
<title>Esempio Ciclo JQuery</title>
<style>
.quadrato {
width:200px;
height:200px;
margin:8px;
background:blue;
border:1px solid black;
float:left;
}
.bordo_blue {
border:5px solid blue;
}
</style>
</head>
<body>
<div class="quadrato"></div>
</body>
Con il codice JQuery, questo:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
$(document).ready(function () {
$(".quadrato").on("click", function() {
$(".quadrato").css("background","red");
$(".quadrato").addClass("bordo_blue");
});
});
</script>
E, infine con il codice JS, quest’altro:
<script>
var quadrato = document.querySelector(".quadrato");
quadrato.addEventListener("click",() => {
quadrato.setAttribute('style','background-color:red;');
quadrato.classList.add("bordo_blue");
});
</script>
Nella funzione addEventListener, come secondo parametro, ho inserito l’arrow function che prende il posto della keyword function (funzione principale) per generare la funzione anonima associata all’evento click in ascolto.
In questo caso, come si può vedere, il codice è ridotto all’osso rispetto al JQuery che è costretto a pre-caricare gli script in CDN o sul server, attraverso il metodo ready() per regolare il corretto funzionamento delle dipendenze.
In più la classe .quadrato è richiamata ogni qualvolta deve essere svolta un’azione, e quindi impiega più tempo per eseguire il processo.
Invece in Js, la classe .quadrato è l’oggetto DOM scelto ed è richiamato una sola volta, favorendo, non solo una migliore gestione del codice sorgente, ma anche gestione del tempo di esecuzione.
Ma quindi il JQuery non si utilizza più?
No, per ora questa libreria rimarrà utilizzata ancora per molto tempo, sicuramente sarà stabile e funzionante per altri 10 anni visto che l’80% delle web app, portali CMS come WordPress ed altri, usano questa tecnologia integrata nel core di sviluppo (sti gran cazzi!). Quindi per gli utilizzatori e appassionati del JQuery non temete, potete farne tranquillamente uso, nessuno ve lo vieta =), ma sia chiaro, dovrete esercitarvi a scrivere più codice JS con il nuovo standard piuttosto che usare JQ oppure, allegramente migrare ad altri Frameworks come Angular Js, React o Poly.
La sua scomparsa dipenderà dall’evoluzione delle nuove librerie che usciranno con il nuovo standard oppure con l’aggiornamento di questi attuali.
Se ti interessa approfondire l’argomento del nuovo standard ECMA Vs JQuery clicca qui, troverai alcuni algoritmi utili e tanti suggerimenti.
Da qui per ora è tutto 🙂
Stay Tuned