jQuery vs JavaScript Vanilla: Quale scegliere nel web moderno?

Scopri le differenze tra jQuery e JavaScript puro (Vanilla JS). Analizziamo vantaggi, svantaggi e scenari d'uso per capire quando utilizzare l'una o l'altra.

Introduzione: Il dilemma dello sviluppatore web

Benvenuti alla quinta lezione del nostro corso "Impara jQuery in 40 lezioni". Se sei arrivato fin qui, hai già iniziato a scrivere le tue prime righe di codice e probabilmente ti sei chiesto: "Perché dovrei usare una libreria come jQuery se posso fare le stesse cose con JavaScript puro?"

Questa è una delle domande più classiche e dibattute nel mondo dello sviluppo front-end. Per rispondere correttamente, dobbiamo prima definire i termini. Quando parliamo di JavaScript Vanilla, intendiamo il linguaggio JavaScript standard, così come viene implementato dai browser, senza l'ausilio di librerie esterne o framework. jQuery, invece, è una libreria scritta in JavaScript che "impacchetta" le funzionalità comuni del linguaggio in metodi più semplici, brevi e facili da ricordare.

In questa lezione esploreremo a fondo il perché jQuery sia nata, come ha cambiato il web e quale sia il suo ruolo oggi, nell'era di ES6+ e dei moderni framework come React o Vue.js.

Perché jQuery è nata? Il contesto storico

Per capire il valore di jQuery, dobbiamo fare un salto indietro nel tempo, verso l'era di Internet Explorer 6, 7 e 8. In quel periodo, il web era un "Far West". Ogni browser interpretava il codice JavaScript in modo leggermente diverso. Quello che funzionava su Firefox poteva causare un crash totale su Internet Explorer.

Gli sviluppatori dovevano scrivere codice estremamente ripetitivo e complesso per gestire queste differenze, una pratica chiamata cross-browser compatibility. Ad esempio, selezionare un elemento DOM o aggiungere un evento al click richiedeva diverse righe di codice diverse a seconda del browser utilizzato.

jQuery è nata con un motto preciso: "Write less, do more" (Scrivi meno, fai di più). La libreria ha creato un'astrazione: lo sviluppatore chiamava una funzione jQuery, e la libreria si occupava di tradurre quella chiamata nel codice specifico necessario per farla funzionare su tutti i browser disponibili.

Confronto Tecnico: Sintassi e Approccio

La differenza più evidente tra i due approcci è la sintassi. jQuery utilizza il simbolo del dollaro $ come scorciatoia per accedere alle sue funzioni, rendendo il codice molto più conciso.

Selezione degli elementi

In JavaScript Vanilla, per selezionare un elemento tramite un ID o una classe, utilizziamo metodi come document.getElementById() o document.querySelectorAll(). In jQuery, tutto viene semplificato attraverso un unico selettore simile a quello di CSS.

Ecco un esempio pratico di come selezionare tutti i paragrafi con una determinata classe e cambiare il loro colore in rosso.

// --- APPROCCIO JAVASCRIPT VANILLA ---
const paragraphs = document.querySelectorAll('.highlight');
paragraphs.forEach(p => {
    p.style.color = 'red';
});

// --- APPROCCIO JQUERY --
$('.highlight').css('color', 'red');

Spiegazione: Nel codice Vanilla, dobbiamo prima recuperare una lista di elementi (una NodeList), poi iterare su ogni singolo elemento utilizzando un ciclo forEach per applicare lo stile. In jQuery, il metodo .css() agisce automaticamente su tutti gli elementi trovati dal selettore, eliminando la necessità di scrivere manualmente il ciclo.

Gestione degli Eventi

Gestire l'interazione dell'utente è un altro punto dove jQuery brilla per brevità. Vediamo come gestire un evento di click su un bottone.

// --- APPROCCIO JAVASCRIPT VANILLA ---
const btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
    alert('Hai cliccato il bottone!');
});

// --- APPROCCIO JQUERY --
$('#myButton').on('click', function() {
    alert('Hai cliccato il bottone!');
});

Spiegazione: Sebbene addEventListener sia ormai lo standard moderno e molto potente, la sintassi .on() di jQuery è leggermente più compatta e, storicamente, era molto più semplice da implementare in modo cross-browser.

Manipolazione del DOM e Animazioni

Uno dei punti di forza storici di jQuery è la facilità con cui permette di manipolare il Document Object Model (DOM) e di creare animazioni semplici senza dover scrivere decine di righe di CSS o JavaScript complesso.

Creazione e inserimento di elementi

Immaginiamo di voler aggiungere un nuovo elemento <li> a una lista <ul>.

// --- APPROCCIO JAVASCRIPT VANILLA ---
const ul = document.getElementById('myList');
const li = document.createElement('li');
li.textContent = 'Nuovo Elemento';
ul.appendChild(li);

// --- APPROCCIO JQUERY --
$('#myList').append('<li>Nuovo Elemento</li>');

Spiegazione: In JavaScript puro, dobbiamo creare l'elemento come oggetto, assegnargli il testo e poi "appenderlo" al genitore. jQuery permette di passare direttamente una stringa HTML al metodo .append(), rendendo l'operazione immediata.

Animazioni

jQuery ha introdotto metodi come .fadeIn(), .fadeOut(), .slideUp() e .slideDown() che hanno permesso a milioni di siti di avere interazioni fluide con una sola riga di codice. Per ottenere lo stesso effetto in Vanilla JS, dovresti manipolare le proprietà CSS di opacità o altezza tramite un timer (setInterval o requestAnimationFrame) o utilizzare le CSS Transitions, che però richiedono una gestione più accurata delle classi CSS.

Quando usare jQuery oggi? (Pro e Contro)

Con l'avvento di ES6 (ECMAScript 2015) e delle versioni successive, JavaScript è evoluto enormemente. Molte delle funzioni che rendevano jQuery indispensabile sono ora integrate nativamente nel linguaggio.

Vantaggi di jQuery

  1. Velocità di sviluppo: Per piccoli progetti o prototipi, scrivere meno codice accelera i tempi.
  2. Facilità per i principianti: La curva di apprendimento è più dolce rispetto a JS puro per chi non ha basi di programmazione.
  3. Manutenzione di siti legacy: Moltissimi siti web (incluso WordPress) utilizzano jQuery. Saperlo usare è fondamentale per lavorare su progetti esistenti.
  4. Plugin ecosistema: Esistono migliaia di plugin pronti all'uso per slider, gallerie e form validati.

Svantaggi di jQuery

  1. Performance: jQuery è un "wrapper". Ogni volta che chiami una funzione jQuery, il browser deve eseguire il codice della libreria che poi esegue il codice JS sottostante. Questo aggiunge un leggero overhead.
  2. Peso del file: Includere jQuery significa caricare un file esterno (anche se leggero, circa 30KB gzipped), il che può influire sui tempi di caricamento della pagina (LCP - Largest Contentful Paint).
  3. Ridondanza: Molte funzioni di jQuery sono ora duplicate da metodi moderni come document.querySelector o l'API fetch (che sostituisce l'ormai datato $.ajax).

Esempi Pratici e Casi d'Uso Reali

Per rendere concreta questa lezione, analizziamo due scenari reali.

Caso 1: Un menu a tendina (Dropdown)

Se devi creare un menu che appare e scompare al click, jQuery è imbattibile per rapidità: $('.menu-toggle').click(function() { $('.menu').slideToggle(); }); In Vanilla JS, dovresti gestire l'altezza massima o una classe CSS di visibilità, aggiungendo logica per l'animazione.

Caso 2: Chiamate API (AJAX)

Prima di fetch, fare una richiesta a un server era un incubo con XMLHttpRequest. jQuery ha semplificato tutto con $.ajax() o $.getJSON().

Oggi, l'approccio moderno in Vanilla JS è questo:

fetch('https://api.esempio.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Errore:', error));

Questo codice è pulito, asincrono e non richiede librerie esterne.

Errori comuni e FAQ

"Posso usare entrambi nello stesso file?"

Sì, è possibile. Tuttavia, fai attenzione a non confondere gli oggetti. Un oggetto selezionato con jQuery $('.classe') non è lo stesso di un elemento selezionato con Vanilla JS. Per convertire un oggetto jQuery in un elemento DOM puro, puoi usare $('.classe')[0].

"jQuery è morta?"

No. Sebbene non sia più la scelta primaria per le nuove Single Page Application (SPA) dove dominano React, Vue o Angular, jQuery è ancora presente in una percentuale enorme di siti web globali. È uno strumento specializzato: ottimo per l'interattività di pagine statiche o CMS, meno per applicazioni web complesse.

"Perché il mio codice jQuery non funziona?"

L'errore più comune è includere lo script di jQuery dopo il tuo file JS personalizzato. Ricorda che la libreria deve essere caricata per prima, altrimenti il browser non riconoscerà il simbolo $ e restituirà l'errore ReferenceError: $ is not defined.

Prossimi passi e conclusioni

In questa lezione abbiamo visto che la scelta tra jQuery e JavaScript Vanilla non è una questione di "meglio o peggio", ma di contesto. Se stai costruendo un sito semplice, un tema WordPress o devi aggiornare un vecchio progetto, jQuery è un alleato potentissimo. Se invece stai puntando a diventare un professionista del front-end moderno, è fondamentale padroneggiare JavaScript Vanilla, poiché è la base di ogni framework moderno.

Cosa fare ora?

  1. Sperimenta: Prendi un piccolo script scritto in jQuery e prova a riscriverlo in Vanilla JS. Noterai subito dove jQuery ti semplifica la vita e dove JS puro ti dà più controllo.
  2. Studia ES6+: Approfondisci i concetti di Arrow Functions, Destructuring e Template Literals. Vedrai che molto del "codice verboso" di JS puro sparisce con queste novità.
  3. Continua il corso: Nella prossima lezione entreremo nel vivo della manipolazione del DOM con jQuery, imparando a modificare contenuti, attributi e classi in tempo reale.

Buon coding!