jQuery: quando un vecchio amico batte i nuovi, ovvero come una leggenda dello sviluppo web continua a sorprenderci

Ricordi i tempi in cui il frontend era il Far West e la compatibilità cross-browser era una vera maledizione? Ogni interazione con il DOM richiedeva una dozzina di righe di codice e istruzioni condizionali solo per accontentare tutti i browser. Situazione familiare, vero? Fu in questo caos che jQuery irruppe, come un cavaliere su un cavallo bianco, e cambiò per sempre le regole del gioco. Non ha semplificato solo la vita di milioni di sviluppatori, ma ha anche posto le basi per molti approcci moderni nello sviluppo web.

Oggi, quando React, Vue e Angular la fanno da padrone, molti potrebbero pensare: "jQuery? È un dinosauro!" E si sbaglierebbero. Il progetto vive, evolve e, cosa più interessante, si adatta alle nuove realtà. Diamo un'occhiata a come jQuery può essere utile nel 2024 e perché il suo repository GitHub merita ancora la tua attenzione.

jQuery: Più di una semplice libreria

Per chi non avesse mai incontrato jQuery (sì, esistono!), è una libreria JavaScript che semplifica significativamente la manipolazione dei documenti HTML (DOM), la gestione degli eventi, la creazione di animazioni e l'interazione con il server tramite AJAX. La sua filosofia — "scrivi meno, fai di più" — è diventata un vero successo. Ricordi document.getElementById('myId').style.color = 'red';? Con jQuery si è trasformato in $('#myId').css('color', 'red'); — pura magia!

Chi ne ha bisogno oggi? In realtà, molte persone:

• Supporto a progetti legacy: Milioni di siti web funzionano ancora con jQuery. Se ti occupi di manutenzione di codice legacy, non puoi farne a meno.
• Prototipazione rapida: Hai bisogno di creare rapidamente un prototipo interattivo? jQuery lo farà in un attimo.
• Progetti piccoli senza framework: Per landing page, semplici siti vetrina o piccole utility dove includere un framework pesante sarebbe eccessivo, jQuery è l'opzione perfetta.
• Scopi educativi: Comprendere le basi della manipolazione del DOM e degli eventi attraverso jQuery è un'eccellente base prima di immergersi in framework più complessi.

Funzionalità chiave che sono ancora rilevanti

Nonostante l'età, le funzionalità core di jQuery rimangono estremamente convenienti:

Selettori su steroidi

Selezionare elementi sulla pagina usando i selettori CSS — è per questo che la gente ama ancora jQuery. Semplice, intuitivo e incredibilmente potente. Vuoi selezionare tutti i link dentro un blocco con classe menu? Ecco fatto: $('.menu a'). E poi applicare immediatamente un'azione su di essi, come aggiungere una classe: $('.menu a').addClass('active');.

AJAX senza mal di testa

Lavorare con richieste asincrone è sempre stato complicato. jQuery lo ha reso elementare. Inviare una richiesta GET e gestire la risposta è letteralmente un paio di righe:

$.get('/api/data', function(data) {
  console.log('Данные получены:', data);
});

Per scenari più complessi, c'è l'universale $.ajax() che ti dà il pieno controllo sulla richiesta.

Diamo vita all'interfaccia: animazioni ed effetti

Nascondere, far apparire, far scorrere gli elementi in modo fluido — tutto questo è facilmente implementabile con jQuery. Creare una bell'animazione che renda la tua interfaccia più vivace è possibile senza una conoscenza approfondita delle animazioni CSS:

$('#myElement').slideUp(500, function() {
  console.log('Элемент скрыт!');
});

Lavorare con gli eventi: semplice e affidabile

Assegnare gestori di eventi, delegarli, rimuoverli — tutto questo è intuitivo e cross-browser. Il metodo .on() è diventato uno standard per lavorare con gli eventi:

$('#myButton').on('click', function() {
  alert('Кнопка нажата!');
});

jQuery nel 2024: adattarsi al mondo moderno

Non pensare che jQuery si sia fermato nel passato. Il repository è sviluppato attivamente, e questo è evidente dal supporto delle versioni:

• Versione 4.x: Attualmente in beta, il che testimonia il lavoro costante sulla libreria.
• Versione 3.x: Mantenuta attivamente e che riceve aggiornamenti. Questa è il tuo cavallo di battaglia per la maggior parte dei progetti.

Ma la parte più interessante è l'adattamento agli standard moderni. jQuery ora supporta i moduli ECMAScript (ESM), permettendoti di importarlo come un normale modulo nel tuo codice JavaScript moderno. Inoltre, può essere usato in Node.js e persino nelle estensioni del browser.

Costruisci il tuo jQuery: build personalizzata per i minimalisti

Qui arriviamo a una delle funzionalità più cool e, a mio parere, più sottovalutate del jQuery moderno — la possibilità di creare build personalizzate. Perché trascinare dentro tutto il frullatore quando ti serve solo un frullatore? Gli sviluppatori di jQuery lo capiscono perfettamente e ti offrono strumenti per creare la tua versione leggera della libreria.

Immagina di aver bisogno solo di richieste AJAX e manipolazione base del DOM, ma non delle animazioni e dei selettori complessi. In una situazione normale, includeresti l'intera libreria. Ma con jQuery, puoi costruirla senza i moduli non necessari!

Per questo, ti serviranno Node.js e Git. Clona il repository:

git clone https://github.com/jquery/jquery.git
cd jquery
npm install

Poi, per costruire la tua versione unica, usa il comando npm run build con l'opzione --exclude:

npm run build -- --exclude=ajax/jsonp -e css -e deprecated -e dimensions -e effects -e offset -e wrap

Questo comando escluderà i moduli JSONP, la manipolazione CSS (insieme agli effetti dipendenti, dimensioni, offset), i metodi deprecati, le animazioni e i metodi di wrapping degli elementi dalla build. Come risultato, otterrai un file jquery.js significativamente più piccolo che contiene solo le funzionalità di cui hai bisogno. Questa è la soluzione perfetta per l'ottimizzazione delle prestazioni, specialmente sui dispositivi mobili!

A proposito, c'è persino un alias speciale per creare la build ufficiale jQuery Slim, che esclude AJAX, effetti e metodi deprecati:

npm run build -- --filename=jquery.slim.js --slim

Puoi anche specificare il nome del file, la directory di build e persino costruire jQuery come modulo ECMAScript (--esm) o factory (--factory) per l'uso in ambienti specifici.

Per i contributor e i curiosi: diamo un'occhiata sotto il cofano

Se vuoi non solo usare jQuery, ma anche contribuire o semplicemente capire come funziona una libreria così massiccia, il repository offre guide dettagliate per contribuire. Questa è una grande opportunità per diventare parte della storia e migliorare le tue competenze.

Testing — La base della stabilità

Ovviamente, un progetto del genere non può esistere senza test approfonditi. jQuery usa QUnit — un framework per i test unitari JavaScript, che, tra l'altro, è stato creato dagli stessi sviluppatori di jQuery. Puoi eseguire i test localmente per assicurarti della stabilità delle modifiche o semplicemente studiare come vengono scritti i test per una libreria grande. Ecco tutto ciò di cui hai bisogno:

npm install
npm start

Poi apri il server dei test (ad esempio usando WAMP/MAMP/LAMP) e naviga all'URL appropriato. Il README elenca persino utili metodi per lavorare con i test, come q() per ottenere elementi per ID o fireNative() per simulare eventi DOM nativi.

Git Magic per utenti avanzati

Gli sviluppatori di jQuery condividono utili trucchi Git che possono tornare utili non solo quando si lavora a questo progetto, ma anche nella tua pratica quotidiana. Ad esempio, comandi per pulire la directory di lavoro allo stato upstream/main:

git reset --hard upstream/main
git clean -fdx

Oppure configurare il rebase automatico su git pull per una cronologia dei commit più pulita:

git config branch.autosetuprebase local

E se hai mai avuto a che fare con conflitti di merge, git mergetool è il tuo salvatore. Il README elenca persino scorciatoie da tastiera per un uso comodo. Una piccola cosa, ma gradita!

Conclusioni: jQuery merita la tua attenzione oggi?

Assolutamente sì! jQuery non è solo un relitto del passato, ma un progetto vivo e in evoluzione che continua a fornire valore. La sua bassa barriera d'ingresso, l'enorme ecosistema di plugin (anche se non li abbiamo discussi in questo articolo, ma esistono!), e, cosa più importante, la possibilità di creare build personalizzate e leggere lo rendono uno strumento rilevante in determinati scenari.

Se stai lavorando a progetti dove la velocità di sviluppo senza un framework complesso è importante, se ti occupi di manutenzione di codice vecchio, o se vuoi semplicemente avere uno strumento veloce e affidabile per la manipolazione del DOM e AJAX nel tuo arsenale, allora jQuery è la tua scelta. E la possibilità di costruirlo secondo le tue esigenze specifiche? È solo la ciliegina sulla torta che ti permette di dare nuova vita alla buona vecchia libreria e renderla veramente moderna.

Quindi, se non hai ancora controllato il repository jQuery su GitHub, ora è il momento. Potresti trovare esattamente ciò che stavi cercando!