Sono passati ben 12 anni a quando ho iniziato a utilizzare JQuery. All’epoca era una gran comodità e ne fui entusiasta, al punto che decisi di preparare subito due esempi da pubblicare qui (uno e due). Da allora molte cose sono cambiate e JQuery sta avendo un ruolo più marginale, specialmente nei nuovi progetti. Molte delle librerie che lo annoveravano fra le dipendenze ora ne fanno a meno, ma molti di noi lo usano ancora per abitudine. Ma allora JQuery è morto? Scopriamolo.

Innanzitutto occorre capire meglio il contesto in cui è nato JQuery. Il web, oltre ad essere composto da codice disordinato, soffriva delle profonde differenze fra i browser più usati. Mozilla Firefox aveva superato Internet Explorer e Google Chrome si faceva strada, ma il navigatore di casa Microsoft era ancora molto usato, addirittura nella sua obsoleta versione 6, benché notoriamente lento ed irrispettoso degli standard. Codice scritto per Firefox in genere funzionava bene su Chrome e Opera, ma rischiava di non girare o di dare effetti imprevisti su Explorer e viceversa. JQuery mette a disposizione un set di istruzioni per la manipolazione del DOM, dello stile e per effettuare richieste HTTP asincrone, accessibili attraverso la semplicissima funzione $, ottimizzate per funzionare nello stesso modo in tutti i browser più noti.

Oggi le cose sono cambiate. Explorer non c’è più e non ne sentiamo la mancanza. Il browser di Microsoft è Edge che utilizza lo stessa base di codice di Google Chrome e l’ultimo standard di JavaScript, ECMA6 include molte comodità ed è ben supportato.

Vediamo alcuni esempi.
Istruzioni come

$('#id-elemento)
$('.classe-elemento')
$('elemento[name="nome-elemento"')

possono essere sostituite da
document.getElementById('id-elemento')
document.querySelectorAll('.classe-elemento')
document.getElementsByTagName('nome-elemento')

Il secondo di questi, querySelectorAll, è il più interessante perché permette di utilizzare una sintassi simile a quella a cui eravamo abituati con JQuery. Gli elementi restituiti dalle tre funzioni sono sempre di tipo Node, così, proprio come in JQuery, possiamo contare su un’interfaccia uniforme per poterli manipolare.

Altro esempio è quello delle chiamate AJAX. In JQuery utilizzavamo le funzioni $.ajax, $.getJson, ecc. All’epoca erano davvero comode perché Explorer e Firefox avevano metodi diversi per le richieste asincrone. Oggi possiamo contare su un approccio diverso ed elegante che fa uso delle funzioni asincrone, senza usare librerie esterne:

async function postJSON(data) {
  try {
    const response = await fetch("https://ilmiosito.com/api", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(data),
    });

    const result = await response.json();
    // gestione risultato
  } catch (error) {
    // gestione errore
  }
}

postJSON({
  campo1: dato1,
  campo2: dato2
});

Il cuore di tutto è la funzione fetch, parte della API Fetch. Non mi dilungherò sul fatto che questo approccio richiede la padronanza del concetto di programmazione concorrente coi relativi problemi del produttore/consumatore che qualsiasi buon programmatore dovrebbe aver imparato. Per l’uso corretto di questa tecnica in JavaScript raccomando la lettura della pagina relativa alle parole-chiave async e await, ma anche una rinfrescata al concetto di Promise.

Come abbiamo visto, è venuta meno la condizione principale che ha favorito la diffusione di JQuery: l’incompatibilità fra browser ed il bisogno di interfacce più semplici di quelle fornite dallo JavaScript puro.
Alcuni lamentano il peso aggiuntivo e superfluo di JQuery sulle pagine. Inoltre, strumenti strettamente legati a JQuery, come JQueryUI e JQuery Mobile (oggi deprecato) hanno un aspetto ormai superato da strumenti più recenti come Bootstrap. Esistono oggi svariati framework che rendono la manipolazione delle pagine lato-client (e, per estensione, la creazione di applicazioni web a pagina singola) molto più semplice e/o il codice più ordinato. Fra questi possiamo ricordare Angular, React e AlpineJS (quest’ultimo dichiaratamente “un JQuery per il web moderno”).

Quindi JQuery sparirà presto? No, non necessariamente. Esistono milioni di righe di codice che sono state scritte quando JQuery era ancora uno dei migliori aiuti a disposizione del programmatore JavaScript e comunque si tratta di uno strumento tuttora attivamente sviluppato e mantenuto e del quale molti di noi hanno ancora un’ottima padronanza. In molti considereranno la sostituzione della libreria come una bassa priorità, se non come una fatica inutile. Preferiranno al limite aggiornare la versione di JQuery e continuare a mantenere il vecchio codice finché non sarà ora di mandarlo in pensione. Ed anche allora potrebbero decidere di scrivere i nuovi moduli usando uno strumento che conoscono bene.

Personalmente, ho installato JQuery nei nuovi progetti fino all’inizio di quest’anno. Sto iniziando a farne a meno solo recentemente per il semplice motivo che ci tengo ad essere aggiornato sugli strumenti più richiesti negli annunci di lavoro, nonché su quelli più promettenti (tipo Alpine). JQuery lo conosco molto bene ormai e lo utilizzo ancora nella manutenzione del vecchio codice, mentre per il nuovo codice preferisco studiare soluzioni nuove.