Buon decimo compleanno jQuery!

E così una tra le librerie JavaScript più famose al mondo ha raggiunto il decimo anno di età. Che cosa è cambiato da allora? E conviene utilizzare oggi una libreria complessa come jQuery? Queste e altre sono le domande alle quali voglio rispondere con questo articolo, buona lettura!

Il 14 gennaio del 2006 jQuery venne presentato al mondo dal suo autore John Resig ed a oggi é diventata la libreria JavaScript piú utilizzata al mondo.

Grazie a questa libreria sono nati molti effetti e soluzioni che oggi implementiamo nei nostri siti web senza neanche pensarci troppo, molti di questi sono anche diventati parte integrante di JavaScript vanilla oppure di nuovi moduli introdotti nelle recenti specifiche CSS.

Benché sia sempre stata una libreria molto potente e utilizzata talvolta bisogna dire che la sua fama in parte è stata anche fonte del suo declino, fin troppi sviluppatori si avvicinavano a essa convinti di sviluppare in JavaScript; ma come Google o Facebook non sono internet, neanche questa libreria rappresenta JavaScript nella sua completezza.

In questo articolo non voglio fare un’accusa o elevare jQuery in nessun modo, piuttosto voglio fare un percorso a ritroso in cui metto in luce la storia di questa libreria e cerco di affrontare alcune argomentazioni che potrebbero interessarti.

10 anni fa, dove eravamo

jquery-anni

Facciamo un salto indietro al 2006, le librerie e i framework JavaScript all’epoca erano una novitá perché si trovavano solo piccole librerie e GitHub non esisteva. Se ci mettevamo a cercare su Google eravamo in grado di trovare solo Prototype.js, script.aculo.us, MooTools, Dojo ed Ext.js che hanno inspirato proprio jQuery o che talvolta hanno creato guerre di territorio.

Prototype é stato il primo framework in assoluto; ha inventato il concetto di $ in JavaScript (per questo jQuery implementó il noConflict per chi utilizzava più librerie che utilizzano questa soluzione) ed implementó le richieste AJAX semplificate per lo sviluppatore.

Script.aculo.us invece implementava, per Prototype, effetti visivi e controlli per gli elementi del DOM come il drag’n drop.

MooTools (creato da un italiano) invece divenne il rivale di jQuery perché avevano le stesse funzionalitá.

Dojo invece é un toolkit per creare elementi da utilizzare nelle pagine giá pronti come il le schede, tooltip, ordinamento delle tabelle e cosi via.

Ext.js si posiziona come alternativa a Dojo pensata esclusivamente per gli sviluppatori di applicazioni e che ha componenti avanzati.

Nel 2006 questo era il parco framework e jQuery ha preso il meglio da tutte e successivamente ha creato jQuery UI (nel 2007) per aggiungere altre funzionalitá.

Questo ovviamente é solo un piccolo riassunto altrimenti per presentare le varie librerie ci vorrebbe molto piú tempo!

La mia storia con jQuery

Io ho iniziato ad utilizzare jQuery dopo aver litigato con le richieste AJAX multi browser nel 2007/2008 e inizialmente lo utilizzavo con gli altri framework perché non avevo ancora scoperto jQuery UI.

La cosa che secondo me ha fatto decollare jQuery è stata la grande disponibilità di plugins in grado di aggiungere nuove funzionalità al nostro codice con semplici passi, cosa che comunque avevano anche le altre librerie. Solo che jQuery era molto piú semplice e venne utilizzato da molti big del settore, mi ricordo Google ed IBM in primis. Questo ha permesso alla libreria di scatenare molto interesse anche da parte degli altri sviluppatori.

Lo scorso anno John Resig ha pubblicato la prima versione con dei suoi appunti per spiegare le scelte nel codice, ma su GitHub é disponibile un archivio con le versioni piú antiche per studiare come sia stato possibile realizzare questa libreria.

Ad oggi jQuery non é fondamentale come lo era anni fá. É nato jQuery Mobile e Zepto che permettono di portare queste librerie anche nel mondo mobile, ma il concetto é ancora molto piú ampio perché esistono molte altre soluzioni che devono essere prese in considerazione, un po’ come abbiamo discusso in un recente webinar.

jQuery ha cambiato l’approccio che gli sviluppatori avevano nei confronti di JavaScript. Ha rivoluzionato l’interazione web con le sue animazioni e con la semplicitá delle chiamate AJAX. Questi sono ottimi punti di partenza ma ti ricordo che se vuoi diventare un bravo sviluppatore dovrai fare le tue esperienze anche con JavaScript vanilla.

Perché conoscere solo jQuery non basta perché é come conoscere solo la carrozzeria di una macchina, al primo problema non sai dove mettere le mani.

jQuery ha semplificato l’uso dei selettori e ha ispirato gli sviluppatori del W3C creando querySelector nel quale è possibile passare qualsiasi selettore CSS. Prima c’era solo getElementByID, getElementByClassName, getElementByTagName che non permettevano di essere cosí flessibili.

Come ti mostro nell’esempio appena passato accettavano solo una regola molto semplice ed era molto difficile realizzare selettori avanzati, cosa che ha limitato moltissimo il raggio di azione di javascript.

Se vuoi approfondire il linguaggio JavaScript ti ricordo che abbiamo preparato per te un corso completamente gratuito che ti permetterà di scoprire come muovere i primi passi all’interno di questo potente linguaggio.

Il primo esperimento per jQuery infatti é stato proprio la possibilitá di semplificare i selettori.

Selettori JavaScript ispirati a jQuery

jquery-selettori

Non possiamo non parlare di Sizzle.js, con la nascita di jQuery e della sua visione semplificata per accedere ai selettori CSS nacque questo progetto che ad oggi é utilizzato in molte altre librerie e aggiunge, tra le altre, nuove flag come :visible o :not non sono disponibili nativamente.

Un altro tallone d’Achille che è stato risolto con jQuery è la gestione degli eventi visto che prima bisognava scrivere in modo complesso o si inseriva la chiamata direttamente nel codice HTML tramite il classico onclick="".

Ad oggi questo é molto semplice grazie ad addEventListener che combinato a querySelector permette di avere lo stesso risultato di jQuery.

La rivoluzione fu anche l’accesso ai CSS tramite il chaining o attraverso array che con una sola riga permettevano di cambiare piú regole mentre in JavaScript vanilla ancora oggi é richiesto di fare una chiamata per ogni proprietá.

Ma veniamo invece alla ciliegina sulla torta che ha permesso a jQuery di diventare una tra le librerie più apprezzate e utilizzate nel Web 2.0. AJAX rivoluzionò parecchio le cose perché prima delle funzionalità incluse in questa libreria era necessario una XMLHttpRequest con la sua complicata sintassi e la retro compatibilità per IE che richiedeva l’uso di ActiveX mentre con jQuery era molto semplice.

Qua sotto ti lascio un esempio che confronta, come prima, il codice JavaScript con quello di jQuery per farti notare meglio le diferenze.

Oggi esiste la nuova Fetch API che ancora non è compatibile in tutti i browser, ma ci sono le polyfill che aggiungono il supporto (https://github.com/github/fetch) anche agli altri browser per semplificare le tue chiamate AJAX.

Oltre a questo possiamo dare un’occhiata alle animazioni che tramite animate, in cui bisogna solo impostare il tempo e come far diventare l’oggetto, ha permesso a molti sviluppatori di divertirsi. Solo questa funzione ha dimostrato quanto le pagine web potessero essere interattive e potenti portando alla nascitá di slideshow, caroselli, finestre modali, menu animati ed anche ai primi interessanti giochi in JavaScript.

Tutto questo grazie a una singola libreria che ha permesso agli sviluppatori di cambiare il modo in cui interagivano con la pagina web in modo molto semplificato richiedendo alo stesso tempo meno codice. Combina adesso tutto questo con la compatibilitá tra i vari browser sul mercato, adesso hai raggiunto le potenzialità di jQuery.

Non devo ricordare che quel periodo la compatibilità era la chimera di ogni sviluppatore. Ricordo che avevo 3 versioni differenti di IE, Firefox e altri browser nel mio computer e dovevo verificare che tutto funzionasse.

Come abbiamo visto ad oggi le necessità di compatibilità dei browser non sono più sulla lista di cose fondamentali, ma piuttosto troviamo molto interesse su API avanzate come WebGL.

Quindi lo sviluppatore di tutti i giorni non ha bisogno di includere jQuery nella maggior parte delle occasioni, é necessario solo quando ci sono delle animazioni che non sono disponibili nativamente nel browser e per poche altre cose che possono essere risolte senza dover portare una grossa libreria come questa.

Insomma é necessario solo nei casi in cui é richiesta una interazione maggiore a livello visivo perché gli elementi fondamentali facilmente accessibili per gli sviluppatori ci sono tutti.

Talvolta basta scrivere codice jQuery e tradurlo successivamente in codice JavaScript vanilla per vedere quante righe si risparmiano veramente. Comprendo che può sembrare un doppio lavoro ma molto spesso si usa jQuery soltanto per abitudine e alla fine siamo in grado soltanto di salvare 5 righe di codice e si aumentano soltanto i tempi di esecuzione.

Va detto anche il fatto che jQuery elimina molti dei problemi in JavaScript come ad esempio la rimozione degli eventi, i cicli per i selettori molto piú semplici, semplifica molte altre cose ed é facile da leggere. Allo stesso tempo JavaScript vanilla é piú veloce (in termini di millisecondi) e richiede meno file da caricare.

Ultimo punto per cui bisogna conoscere JavaScritp vanilla é che permette di utilizzare NodeJS, soluzione per eseguire codice JavaScript lato server, dove jQuery non esiste e per questo è buona pratica conoscere anche questo linguaggio.

Pro e Contro

Vediamo quindi di ricapitolare i pro e contro di jQuery:

Pro:

  1. Facile da leggere
  2. Semplice da scrivere
  3. Animazioni semplificate
  4. Utilizzo di AJAX semplificato
  5. Gestione del dom e selettore semplificato ed avanzato
  6. Plugin e moduli di tutti i tipi
  7. Compatibilità multipiattaforma

Contro:

  1. Lento (in termini di millisecondi)
  2. Libreria da caricare a parte
  3. Alcune funzionalità sono presenti in JavaScript ES5 e ES6

Fare un pro e contro di JavaScript vanilla risulta in questo caso inutile visto che ci sono moltissime altre librerie.

Concludendo ti lascio qualche link come ad esempio PlainJS che permette di trovare il codice JavaScript specifico a seconda di quello che ti serve, in modo da organizzare al meglio il codice e scrivere codice più performante.

Ora è il momento di chiederti qualcosa, quanto ti ha cambiato la vita jQuery? Lo utilizzi ancora? Oppure lo utilizzi con framework piú potenti come Angular.js o React.js?

Lascia il tuo Pensiero