jQuery — JavaScript più popolare al mondo. È stata creata dalla comunità dei web developer alla fine degli anni 2000, dando origine a un'ampia ecosistema di siti, plugin e framework che utilizzano jQuery.
Tuttavia, negli ultimi anni il suo status di strumento principale per lo sviluppo web è stato messo in discussione. Vediamo perché jQuery è diventata popolare e perché è uscita di moda, oltre ai casi in cui è ancora opportuno utilizzarla per creare siti moderni.
Storia breve di jQuery
John Resig () ha creato la prima versione della libreria nel 2005 e - in un evento chiamato BarCampNYC. Sul l'autore ha scritto:
jQuery è una libreria JavaScript il cui motto è: Programmare in JavaScript deve essere un piacere. jQuery prende compiti frequenti e ripetitivi, estrae tutto il markup non necessario e li rende brevi, eleganti e comprensibili.
jQuery ha due principali vantaggi. Il primo è una API conveniente per manipolare le pagine web. In particolare, fornisce potenti metodi per selezionare elementi. È possibile scegliere non solo per ID o classi, ma jQuery consente di scrivere espressioni complesse, ad esempio per selezionare elementi in base alle loro relazioni con altri elementi:
// Select every item within the list of people within the contacts element
$('#contacts ul.people li');Nel tempo, il meccanismo di selezione si è trasformato in una libreria autonoma .
Il secondo vantaggio della libreria era che astraeva le differenze tra i browser. All'epoca, era difficile scrivere codice in grado di funzionare affidabilmente su tutti i browser.
La mancanza di standardizzazione significava che gli sviluppatori dovevano tenere conto delle numerose differenze tra i browser e dei casi limite. Dai un'occhiata a e cerca jQuery.browser. Ecco uno dei esempi:
// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
// Use the handy event callback
jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );
// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {
// Only works if you document.write() it
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=javascript:void(0)></script>");
// Use the defer script hack
var script = document.getElementById("__ie_init");
script.onreadystatechange = function() {
if ( this.readyState == "complete" )
jQuery.ready();
};
// Clear from memory
script = null;
// If Safari is used
} else if ( jQuery.browser == "safari" ) {
// Continually check to see if the document.readyState is valid
jQuery.safariTimer = setInterval(function(){
// loaded and complete are both valid states
if ( document.readyState == "loaded" ||
document.readyState == "complete" ) {
// If either one are found, remove the timer
clearInterval( jQuery.safariTimer );
jQuery.safariTimer = null;
// and execute any waiting functions
jQuery.ready();
}
}, 10);
}E grazie a jQuery, gli sviluppatori potevano delegare le preoccupazioni su tutte queste insidie al team che sviluppava la libreria.
In seguito, jQuery ha semplificato l'implementazione di tecnologie più complesse, come animazioni e Ajax. La libreria è diventata praticamente uno standard per le dipendenze dei siti web. Oggi, essa rappresenta una parte sostanziale di Internet. W3Techs stima che .
Il controllo sullo sviluppo di jQuery è diventato anche più strutturato. Nel 2011, il team . E nel 2012, il jQuery Board.
. Nel 2015, la jQuery Foundation si è unita alla Dojo Foundation,, che poi si è unita con la Node.js Foundation nel-mo per formare, all'interno della quale jQuery è stata uno dei «.»
Le circostanze in cambiamento
Tuttavia, negli ultimi anni jQuery . GitHub. Bootstrap v5 , poiché è la sua «» (attualmente di 30 KB, minificata e compressa). Diversi trend nello sviluppo web hanno indebolito la posizione di jQuery come strumento necessario.
Browser
Per diverse ragioni, le differenze e le limitazioni dei browser sono diventate meno rilevanti. In primo luogo, la standardizzazione è migliorata. I principali sviluppatori di browser (Apple, Google, Microsoft e Mozilla) collaborano nello sviluppo nell'ambito di.
Sebbene i browser continuino a differire in alcuni aspetti importanti, i fornitori hanno almeno un mezzo per cercare e creare una base comune invece di tra di loro. Di conseguenza, le API dei browser hanno acquisito nuove opportunità. Ad esempio, è in grado di sostituire le funzioni Ajax di jQuery:
// jQuery
$.getJSON('https://api.com/songs.json')
.done(function (songs) {
console.log(songs);
})
// native
fetch('https://api.com/songs.json')
.then(function (response) {
return response.json();
})
.then(function (songs) {
console.log(songs);
});I metodi e duplicano gli strumenti di selezione di jQuery:
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');Ora è possibile manipolare le classi degli elementi tramite :
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');Sul sito sono elencate altre situazioni in cui il codice jQuery può essere sostituito con codice nativo. Alcuni sviluppatori continuano a utilizzare jQuery semplicemente perché non conoscono le nuove API, ma una volta informati, iniziano a utilizzare questa libreria meno frequentemente.
L'uso delle funzionalità native consente di migliorare le prestazioni delle pagine. Molti possono ora essere implementati utilizzando CSS.
Il secondo motivo è che i browser vengono aggiornati molto più rapidamente rispetto al passato. La maggior parte di essi adotta una , ad eccezione di Apple Safari. Possono aggiornarsi in background senza richiedere l’intervento dell’utente e non sono legati agli aggiornamenti del sistema operativo.
Ciò significa che le nuove funzionalità dei browser e le correzioni di bug vengono distribuite molto più rapidamente, e gli sviluppatori non devono aspettare che la quota raggiunga un livello accettabile. Possono utilizzarle con fiducia senza dover caricare jQuery o polyfill.
Il terzo motivo è che Internet Explorer sta per diventare completamente obsoleto. IE è stato a lungo il tallone d’Achille dello sviluppo web in tutto il mondo. I suoi tipi di bug erano molto comuni, e poiché IE ha dominato negli anni 2000 e non ha utilizzato la strategia di aggiornamento "evergreen", le sue vecchie versioni sono ancora frequenti.
Nel 2016, Microsoft ha accelerato il ritiro di IE dalla circolazione, versioni anteriori e inferiori, limitandosi al supporto di IE 11. Sempre più spesso, gli sviluppatori web possono permettersi il lusso di ignorare la compatibilità con IE.
Anche jQuery ha smesso di supportare IE 8 e versioni precedenti a partire da , rilasciata nel 2013. Sebbene in alcuni casi sia ancora necessaria la compatibilità con IE, ad esempio su siti web obsoleti, queste situazioni si verificano sempre più raramente.
Nuovi framework
Da quando è stato introdotto jQuery, sono stati creati numerosi framework, inclusi i moderni leader , e . Hanno due importanti vantaggi rispetto a jQuery.
Innanzitutto, consentono di dividere facilmente l'interfaccia utente in componenti. I framework sono progettati per gestire il rendering e l'aggiornamento della pagina. Mentre jQuery viene solitamente utilizzato solo per aggiornamenti, lasciando al server il compito di fornire la pagina iniziale.
D'altra parte, i componenti di React, Angular e Vue consentono di collegare strettamente HTML, codice e persino CSS. Proprio come dividiamo il codice in molte funzioni e classi autosufficienti, la possibilità di dividere l'interfaccia in componenti riutilizzabili semplifica la costruzione e la manutenzione di siti complessi.
Il secondo vantaggio è che i framework più recenti seguono un paradigma dichiarativo, in cui lo sviluppatore descrive come dovrebbe apparire l'interfaccia, mentre il framework si occupa di effettuare tutte le modifiche necessarie per raggiungere l'aspetto desiderato. Questo approccio è in contraddizione con l'approccio imperativo tipico del codice jQuery.
In jQuery, devi esplicitamente scrivere i passaggi per effettuare le modifiche. In un framework dichiarativo, invece, dici: «In base a questi dati, l'interfaccia dovrebbe apparire in questo modo». Questo può semplificare notevolmente la scrittura di codice privo di bug.
Gli sviluppatori hanno adottato nuovi approcci alla creazione di siti web, il che ha portato a una diminuzione della popolarità di jQuery.
Quando utilizzare jQuery?
Quindi, quando è necessario dovresti utilizzare jQuery?
Se la complessità del progetto aumenta, è meglio iniziare con un'altra libreria o framework che consenta di gestire la complessità in modo significativo. Ad esempio, suddividere l'interfaccia in componenti. L'uso di jQuery in tali siti potrebbe sembrare accettabile all'inizio, ma porterà rapidamente a codice spaghetti, dove non si sarà certi di quale frammento influenzi quale parte della pagina.
Mi sono trovato in una situazione del genere; nel tentativo di apportare qualsiasi modifica, si ha la sensazione di affrontare un compito difficile. Non si può essere certi di non rompere nulla, poiché i selettori jQuery dipendono dalla struttura HTML generata dal server.
All'altro estremo ci sono siti semplici, che richiedono solo un po' di interattività o contenuto dinamico. In questi casi, non userei jQuery per default, perché con le API native si possono fare molte più cose.
Anche se avessi bisogno di qualcosa di più potente, cercherei una libreria specializzata, ad esempio, per Ajax o per le animazioni. Sarà più semplice che caricare tutto jQuery per una funzionalità ridotta.
Credo che la migliore giustificazione per l'uso di jQuery sia il fatto che offre una funzionalità completa per lavorare sul front-end del sito. Invece di studiare i diversi API nativi o librerie specializzate, puoi semplicemente leggere la documentazione di jQuery e diventare subito produttivo.
L'approccio imperativo scalda male, ma è più facile da padroneggiare rispetto all'approccio dichiarativo di altre librerie. Per un sito con capacità decisamente limitate, è meglio utilizzare jQuery e lavorare tranquillamente: la libreria non richiede una costruzione o una compilazione complesse.
Inoltre, jQuery è utile se sei sicuro che il sito non diventerà complicato nel tempo e se non ti preoccupa la funzionalità nativa, che richiederà senza dubbio la scrittura di più codice rispetto a jQuery.
Puoi anche utilizzare questa libreria se hai bisogno di supportare le versioni obsolete di IE. In tal caso, jQuery ti supporterà come ai tempi in cui IE era il browser più popolare.
Uno sguardo al futuro
jQuery non scomparirà presto. Essa , e molti sviluppatori preferiscono utilizzare la sua API, anche con l'accesso a metodi nativi. La libreria ha aiutato un'intera generazione di sviluppatori a creare siti web funzionanti su qualsiasi browser. E anche se in molti aspetti è stata sostituita da nuove librerie, framework e paradigmi, jQuery ha giocato un enorme ruolo positivo nella creazione del web moderno.
Se la funzionalità di jQuery non cambia sostanzialmente, è molto probabile che nei prossimi anni l'uso della libreria continui a diminuire lentamente ma inesorabilmente. I nuovi siti web vengono generalmente creati fin dall'inizio utilizzando framework più moderni, e i casi d'uso adatti per jQuery si stanno facendo sempre più rari.
A qualcuno non piace l'intensità con cui gli strumenti per lo sviluppo web diventano obsoleti, ma per me è una testimonianza del rapido progresso. jQuery ci ha permesso di fare molte cose meglio. Lo stesso vale per i suoi successori.
Fonte: habr.com
