jQuery è una libreria JavaScript molto popolare che ha rivoluzionato lo sviluppo web negli anni 2000. Grazie a jQuery, i programmatori potevano manipolare facilmente il DOM, effettuare richieste Ajax, creare animazioni e gestire gli eventi con una sintassi semplice e cross-browser. jQuery ha contribuito a spingere i limiti del web e a rendere le applicazioni web più moderne e interattive, in un’epoca in cui tutto questo era complicato usando Javascript senza librerie o framework.
L'evoluzione di Javascript
Negli ultimi anni, jQuery ha perso parte della sua rilevanza e utilità. Javascript ha introdotto nuove sintassi che rendono il codice più leggibile e nuove API semplici da usare, che permettono di fare molte cose che un tempo erano impensabili senza jQuery. Contemporaneamente, I browser moderni come Chrome, Firefox, Edge e Safari hanno implementato JavaScript in modo consistente e conforme agli standard, riducendo la necessità di usare jQuery per risolvere le incompatibilità tra i browser.
Anche se non è sbagliato utilizzarlo, porta con se una riduzione netta delle performance del sito a causa delle dimensioni della libreria in se e della minor velocità di esecuzione.
Confronto tra jQuery e Javascript puro
I seguenti esempi mostreranno alcuni casi d’uso che sono stati punti di forza di jQuery fin dalla sua nascita. Saranno presentate delle alternative in Javascript puro.
Eseguire azioni con un click
Le nuove API document.querySelector e document.querySelectorAll rendono molto semplice selezionare un elemento del DOM ed effettuare manipolazioni. Vediamo, per esempio, come mostrare un alert dopo aver cliccato un pulsante.
// jQuery
$('.target').on('click', function(e) {
alert('Hello, world');
});
//Javascript - primo elemento
document.querySelector('.target').addEventListener('click', function (e) {
alert('Hello, world');
});
// Javascript - elementi multipli
document.querySelector('.target').forEach(target => {
target.addEventListener('click', function (e) {
alert('Hello, world');
});
});Effettuare richieste HTTP asincrone
Una delle funzionalità che hanno reso jQuery così popolare è $.ajax, che rende molto agevole effettuate richieste HTTP asincrone. La nuova API fetch() di Javascript permette di fare altrettanto senza utilizzare librerie. Vediamo come inviare dati a una pagina in formato JSON, mediante una richiesta POST.
//Javascript puro
fetch('http://example.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Daniele Pani',
job: 'Web Developer'
})
}).then(r => r.json()).then(r => {
console.log(r)
})
//jQuery
$.ajax({
type: "POST",
url: 'http://example.com',
data: JSON.stringify({
name: 'Daniele Pani',
job: 'Web Developer'
}),
datatype: 'json',
contentType: "application/json",
success: function(response) {
console.log(response)
}
});
Aggiungere o rimuovere classi
Per aggiungere o rimuovere classi da un elemento HTML, Javascript implementa la proprietà .classList. In questo modo è diventato molto semplice manipolare le classi, aggiungere o rimuovere stili e implementare animazioni.
// Aggiungere classi
// Javascript puro
document.querySelector('.btn-primary').classList.add('disabled')
// jQuery
$('.btn-primary').addClass('disabled')
//Rimuovere classi
// Javascript puro
document.querySelector('.btn-primary').classList.remove('disabled')
// jQuery
$('.btn-primary').removeClass('disabled')
Sul sito You might not need jQuery è possibile trovare una lista esaustiva di esempi d’uso di Javascript puro al posto di jQuery.
Perchè jQuery sopravvive
Ci sono diversi fattori che contribuiscono a tenere in vita jQuery:
- Alcune piattaforme popolari continuano a utilizzarlo. Tra queste c’è WordPress, insieme a diversi plugin. Viene inoltre incluso in molti template HTML premium;
- Il framework, nel corso degli anni, si è ritagliato una reputazione di unico strumento per costruire siti in modo semplice. Tale reputazione è ancora viva, nonostante l’evoluzione di Javascript;
- Molti siti sono stati realizzati diversi anni fa, in un’epoca in cui le novità di Javascript erano ancora acerbe o poco conosciute e documentate;
- Alcuni sviluppatori continuano a utilizzarlo per non dover studiare strumenti alternativi, per mancanza di tempo libero o più semplicemente per non cambiare il proprio metodo di lavoro acquisito da tempo.
jQuery può essere utilizzato proficuamente quando il progetto utilizza un CMS o un framework che ne dipende. È inoltre ancora valido per progetti legacy o quando la performance è considerata sacrificabile. Tuttavia, per progetti più moderni e performanti è consigliabile usare JavaScript puro, mentre per applicativi più complessi esistono librerie più moderne come Angular, React e Vue.