{"id":1092,"date":"2023-07-02T10:46:39","date_gmt":"2023-07-02T08:46:39","guid":{"rendered":"https:\/\/www.ilbytecidio.it\/?p=1092"},"modified":"2023-07-02T11:28:07","modified_gmt":"2023-07-02T09:28:07","slug":"jquery-serve-ancora-nel-2023","status":"publish","type":"post","link":"https:\/\/www.ilbytecidio.it\/?p=1092","title":{"rendered":"JQuery: serve ancora nel 2023?"},"content":{"rendered":"\n
\"\"<\/a><\/figure>\n\n\n\n

Sono passati ben 12 anni a quando ho iniziato a utilizzare JQuery<\/a>. All’epoca era una gran comodit\u00e0 e ne fui entusiasta, al punto che decisi di preparare subito due esempi da pubblicare qui (uno<\/a> e due<\/a>). Da allora molte cose sono cambiate e JQuery sta avendo un ruolo pi\u00f9 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 \u00e8 morto? Scopriamolo.<\/p>\n\n\n\n\n\n\n\n

Innanzitutto occorre capire meglio il contesto in cui \u00e8 nato JQuery. Il web, oltre ad essere composto da codice disordinato<\/a>, soffriva delle profonde differenze fra i browser pi\u00f9 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\u00e9 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<\/a>, dello stile e per effettuare richieste HTTP asincrone, accessibili attraverso la semplicissima funzione $, ottimizzate per funzionare nello stesso modo in tutti i browser pi\u00f9 noti.<\/p>\n\n\n\n

Oggi le cose sono cambiate. Explorer non c’\u00e8 pi\u00f9 e non ne sentiamo la mancanza. Il browser di Microsoft \u00e8 Edge che utilizza lo stessa base di codice di Google Chrome e l’ultimo standard di JavaScript, ECMA6 include molte comodit\u00e0 ed \u00e8 ben supportato.<\/p>\n\n\n\n

Vediamo alcuni esempi.
Istruzioni come <\/p>\n\n\n\n

$('#id-elemento)
$('.classe-elemento')
$('elemento[name=\"nome-elemento\"')<\/code><\/p>\n\n\n\n

possono essere sostituite da
document.getElementById('id-elemento')
document.querySelectorAll('.classe-elemento')
document.getElementsByTagName('nome-elemento')<\/code><\/p>\n\n\n\n

Il secondo di questi, querySelectorAll<\/a>, \u00e8 il pi\u00f9 interessante perch\u00e9 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<\/a>, cos\u00ec, proprio come in JQuery, possiamo contare su un’interfaccia uniforme per poterli manipolare.<\/p>\n\n\n\n

Altro esempio \u00e8 quello delle chiamate AJAX. In JQuery utilizzavamo le funzioni $.ajax<\/a>, $.getJson<\/a>, ecc. All’epoca erano davvero comode perch\u00e9 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:<\/p>\n\n\n\n

\n
\n
async function postJSON(data) {\n  try {\n    const response = await fetch(\"https:\/\/ilmiosito.com\/api\", {\n      method: \"POST\",\n      headers: {\"Content-Type\": \"application\/json\"},\n      body: JSON.stringify(data),\n    });\n\n    const result = await response.json();\n    \/\/ gestione risultato\n  } catch (error) {\n    \/\/ gestione errore\n  }\n}\n\npostJSON({\n  campo1: dato1,\n  campo2: dato2\n});<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
Il cuore di tutto \u00e8 la funzione fetch<\/a>, parte della API Fetch<\/a>. Non mi dilungher\u00f2 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<\/a>, ma anche una rinfrescata al concetto di Promise<\/a>.<\/p>\n\n\n\n
Come abbiamo visto, \u00e8 venuta meno la condizione principale che ha favorito la diffusione di JQuery: l’incompatibilit\u00e0 fra browser ed il bisogno di interfacce pi\u00f9 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<\/a> e JQuery Mobile<\/a> (oggi deprecato<\/a>) hanno un aspetto ormai superato da strumenti pi\u00f9 recenti come Bootstrap<\/a>. 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\u00f9 semplice e\/o il codice pi\u00f9 ordinato. Fra questi possiamo ricordare Angular<\/a>, React<\/a> e AlpineJS<\/a> (quest’ultimo dichiaratamente “un JQuery per il web moderno”).<\/p>\n\n\n\n
Quindi JQuery sparir\u00e0 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\u00e0, se non come una fatica inutile. Preferiranno al limite aggiornare la versione di JQuery e continuare a mantenere il vecchio codice finch\u00e9 non sar\u00e0 ora di mandarlo in pensione. Ed anche allora potrebbero decidere di scrivere i nuovi moduli usando uno strumento che conoscono bene.<\/p>\n\n\n\n
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\u00f9 richiesti negli annunci di lavoro, nonch\u00e9 su quelli pi\u00f9 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Sono passati ben 12 anni a quando ho iniziato a utilizzare JQuery. All’epoca era una gran comodit\u00e0 e ne fui entusiasta, al punto che decisi di preparare subito due esempi da pubblicare qui (uno e due). Da allora molte cose … Continua a leggere→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[123,120,121,119,115,124,118,125,122],"class_list":["post-1092","post","type-post","status-publish","format-standard","hentry","category-programmazione-javascript","tag-alpine","tag-angular","tag-bootstrap","tag-framework","tag-javascript","tag-javascript-lato-client","tag-jquery","tag-programmazione-web","tag-react"],"views":280,"_links":{"self":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts\/1092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1092"}],"version-history":[{"count":5,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts\/1092\/revisions"}],"predecessor-version":[{"id":1099,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=\/wp\/v2\/posts\/1092\/revisions\/1099"}],"wp:attachment":[{"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ilbytecidio.it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}