# Perché discutiamo anche del futuro di jQuery?

Non perderti il video sopra l’articolo!

Perché jQuery esegue ancora la maggior parte della logica web frontend! Alimenta circa il 70% delle prime pagine web e il 20% dell’intero web (Fonte). E ‘ enorme!

Ma questo rende ancora più strana la domanda sul suo futuro.

jQuery ha problemi. È ovunque e non è davvero a prova di futuro. È stato uno strumento straordinario quando è stato rilasciato nel 2006, ma i problemi principali che ha risolto in quel momento non sono più problemi. Invece, ora puoi incorrere in molti più problemi quando usi jQuery.

Per capire questo, consideriamo i problemi risolti da jQuery nel 2006.

JavaScript era un po ‘ rotto e i browser lo implementavano in modo molto diverso

Questa è stata una delle cose principali con cui jQuery ha aiutato. All’improvviso, hai avuto un’API facile da usare che ti ha permesso di manipolare il DOM. E ancora meglio: la stessa API ha funzionato su tutti i principali browser!

$('h1').text('Awesome!')

JavaScript e il web nel suo complesso erano molto meno maturi

jQuery ha permesso agli sviluppatori di semplicemente “fare di più” sul web – sul frontend per essere precisi. Creare interfacce utente coinvolgenti (per le quali è necessario JavaScript) è stato più semplice perché è possibile utilizzare un’API ben documentata. Animare gli elementi, aggiungere e rimuovere contenuti, cambiare stili e riordinare gli elementi è stato molto più facile da ottenere rispetto a vanilla JavaScript. jQuery ha anche aggiunto un’API Ajax potente e allo stesso tempo accessibile che ha reso facile anche l’invio di richieste in background. Questo è un elemento fondamentale delle UI basate su JavaScript poiché non è necessario caricare una nuova pagina su ogni azione dell’utente e può caricare o manipolare i dati lato server dietro le quinte.

    Impara Vue.js

    Vue.js rende semplice la creazione di pagine web reattive. Una bella sintassi + potenti funzionalità-che non è il pacchetto peggiore che si potrebbe ottenere.

    Impara React

    React è un’ottima alternativa a Vue.js. È estremamente popolare e non dovresti assolutamente perderlo!

    Impara Angular

    Angular ha iniziato tutto! Impara il quadro che è la madre di React.js e Vue!

# Cosa è cambiato?

I problemi risolti da jQuery non sono più problemi.

JavaScript è maturato, la compatibilità del browser è migliorata. Abbiamo un vivace ecosistema di sviluppo frontend con migliaia di pacchetti e strumenti, possiamo usare librerie Ajax molto più potenti come Axios se vogliamo.

Questo non significa che tutto sia fantastico, ma i problemi principali che sono stati risolti da jQuery non esistono più.

Invece, jQuery ora è uno strumento che viene spesso (non sempre ovviamente) utilizzato da sviluppatori Web meno esperti che non hanno mai effettuato il passaggio a JavaScript vanilla o framework come Angular o React.

E questo è importante da capire a proposito: non stiamo parlando solo di jQuery vs Angular. Vanilla JavaScript è una vera alternativa!

Mentre l’attraversamento e la manipolazione DOM erano molto più difficili nel 2006, ora abbiamo molte funzionalità come querySelector integrate in vanilla JavaScript. Queste cose funzionano e funzionano anche attraverso i browser.

Se hai la possibilità di usare vanilla JavaScript invece di ottenere fondamentalmente lo stesso con jQuery, è ovviamente meglio usare l’opzione vanilla. Si salva il download del pacchetto aggiuntivo e non è necessario imparare una sintassi aggiuntiva.

# Non è solo Vanilla JavaScript

Non è solo vanilla JavaScript però. Abbiamo semplicemente ottenuto alternative migliori in questi giorni.

Vanilla JavaScript chiaramente ha ancora i suoi limiti. Se stai costruendo un’interfaccia utente complessa con molta logica implementata tramite JavaScript, finisci rapidamente in situazioni in cui devi essenzialmente scrivere una sorta di codice spaghetti. Gestire lo stato DOM è difficile dopo tutto.

E non solo quello. Ti imbatti regolarmente in situazioni in cui la tua logica di attraversamento DOM si interrompe se decidi di riordinare il tuo codice HTML (o introdurre nuovi elementi).

<div> <h1>What's new?</h1> <div> <p>An interesting discussion over the future of jQuery evolved over the last days.</p> </div></div>

$('#news') .find('div') .find('p') .text('This replaces the paragraph text - hopefully')

Questo codice smetterà di funzionare se si modifica il codice HTML in questo modo.

<div> <h1>What's new?</h1> <p>An interesting discussion over the future of jQuery evolved over the last days.</p></div>

E lo stesso vale per le tecniche di attraversamento JavaScript vanilla.

Ovviamente, puoi scrivere codice che funzionerebbe ancora nello scenario precedente. Ma potrebbe poi rompersi in circostanze diverse. Oppure finisci con una lunga catena di metodi di attraversamento per selezionare in modo sicuro qualsiasi cosa tu abbia intenzione di manipolare. E questo diventa più difficile solo se crei o rimuovi manualmente elementi DOM tramite jQuery.

Se hai mai avuto un caso d’uso in cui avevi bisogno di aggiungere e rimuovere elementi in modo dinamico-diciamo basato su alcuni array JavaScript che contengono dati – conosci il dolore associato a questo quando usi jQuery o vanilla JavaScript. Lascia stare se vuoi lavorare con questi elementi (ad esempio, allega listener o stili di clic).

# Quadri in soccorso!

C’è una correzione per questo!

Framework JavaScript come Angular, React (oh, questa è una libreria in realtà – perdonami React folks) o Vue per esempio.

Tutti questi framework hanno una differenza fondamentale rispetto a jQuery (e vanilla JavaScript): non si scrive codice per navigare manualmente nel DOM.

Si utilizza invece un approccio dichiarativo.

Cosa significa?

Bene, ecco come puoi tranquillamente selezionare e manipolare il contenuto HTML da prima in questo articolo – questa volta usando Vue:

<div> <h1>What's new?</h1> <div> <p>{{ myText }}</p> </div></div>
new Vue({ el: '#news', data: { myText: 'This never fails to hit its target', },})

Come puoi vedere, Vue segue chiaramente una filosofia diversa da quella di jQuery. Lo stesso sarebbe vero per React e Angular a proposito.

Per il resto di questo articolo, userò Vue per gli esempi, semplicemente perché ha una sintassi molto bella ed è facile iniziare. Importa Vue nella tua pagina web e sei a posto.

Ma Angular e React seguono anche approcci comparabili. Se vuoi saperne di più su questi, ho ottenuto risorse utili per te:

  • Angular – The Complete Guide
  • React – The Complete Guide
  • Angular vs React vs Vue

E, naturalmente, nel caso in cui tu voglia approfondire Vue, ho anche delle risorse su questo: Vue – The Complete Guide.

Tutti si concentrano sul consentire di contrassegnare semplicemente i punti nel DOM in cui deve essere visualizzato il contenuto. Non devi descrivere il percorso verso quel luogo – il framework lo calcolerà per te!

# Ma la soluzione Vue è più lunga!

Se si confronta la soluzione jQuery con la soluzione Vue, si vede chiaramente che l’approccio Vue è un po ‘ più lungo (in termini di righe di codice scritte).

Ma questo era un esempio molto semplice! Esempi più complessi crescono rapidamente in termini di dimensioni e, peggio ancora, la complessità quando si tratta di codice jQuery richiesto. Ma non per Vue (o gli altri framework).

Questo perché l’approccio generale è così diverso. Se descrivi semplicemente la tua struttura dati, la tua logica e il modo in cui connetti i tuoi dati al DOM (il tuo modello per così dire), non devi scrivere tanto codice aggiuntivo quando il tuo codice HTML o la logica aziendale diventano più complessi.

Per jQuery, questa è una cosa diversa però. Se hai bisogno di raggiungere elementi che sono profondamente annidati o se hai bisogno di fare cose complesse come scorrere gli elementi da creare, finisci rapidamente con il codice più complesso (e anche soggetto a errori) che hai visto in precedenza.

Questo produrrà:

<div> <div>Apples</div> <div>Bananas</div> <div>Milk</div></div>

Gli elementi nidificati<div>sono cliccabili e la classe CSShighlighted verrà aggiunta a qualsiasi elemento facendo clic.

Considera lo snippet Vue (e HTML) che otterrebbe lo stesso:

new Vue({ el: '#output', data: { shoppingList: , },})

È ancora una riga di codici di cui hai bisogno qui ma è molto più facile da capire, mantenere e modificare! Dichiari come dovrebbe essere il tuo codice HTML alla fine, descrivi i tuoi dati e gestisci il tuo selected stato nel tuo codice JS.

La magia avviene con l’aiuto delle cosiddette direttive-v-for (per looping), v-on (per l’ascolto degli eventi) e v-bind (per cambiare l’elemento HTML) stanno facendo tutto il lavoro qui. React e Angular generalmente hanno soluzioni comparabili, sebbene React non usi direttive. Non ti costringerà comunque a scrivere manualmente tutto il codice per selezionare e creare elementi.

Man mano che la tua app web (frontend) cresce e costruisci interfacce UTENTE ancora più complesse, adorerai un approccio dichiarativo che non ti costringe a catene infinite e non mantenibili dicss()$(...) eappendTo() chiamate.

# jQuery è almeno più piccolo?

Vue offre una sintassi nettamente diversa – fa un sacco di lavoro pesante per quanto riguarda l’accesso DOM e la manipolazione per voi.

Questo chiaramente deve avere un prezzo, vero? jQuery è certamente più piccolo, giusto?

Beh no no. Non e ‘cosi’.

A partire da marzo 2018 jQuery pesa 29kb minified e gzipped mentre Vue arriva a 30kb minified e gzipped. Che dire di React e Angular?

React consiste in realtà di due pacchetti: ReactDOM e React stesso. Combinato, è necessario scaricare circa 34kb minified + gzipped per farlo funzionare.

Angular è molto più grande di quello poiché Angular è un framework molto più grande che è particolarmente adatto per le grandi applicazioni aziendali. Per tali tipi di app, vincerà contro jQuery non a causa delle sue dimensioni del pacchetto, ma a causa di tutto il dolore che ti salva.

# Quindi never non usare mai più jQuery?

La domanda ora ovviamente è se dovresti sempre usare Vue, Angular o React allora. O ci sono casi d’uso in cui l’uso di jQuery ha ancora senso?

In generale, credo che il tempo di jQuery stia volgendo al termine. Almeno nella sua forma attuale.

Potresti ancora sceglierlo per casi banali, ma perché non dovresti semplicemente usare vanilla JavaScript per questo e salvare i 30kbs extra + la sintassi extra in cui devi entrare? Sarai uno sviluppatore web migliore se conosci comunque vanilla JS.

jQuery ovviamente vede ancora molto uso in molte app Web legacy e rimarrà lì per un bel po ‘ di tempo.

Se hai bisogno di lavorare su tali app web, probabilmente non troverai un modo per aggirare jQuery per ora e l’apprendimento potrebbe quindi essere ancora qualcosa che vale la pena il tuo tempo.

Un sacco di popolari pacchetti di terze parti si basano ancora su jQuery-Bootstrap, il framework CSS, lo fa per esempio (sfortunatamente lo fa anche nella sua ultima versione – 4.X). Dover aggiungere la dipendenza extra a causa di un tale pacchetto è fastidioso, quindi personalmente cerco sempre di scoprire cosa fa esattamente jQuery per quel determinato pacchetto. Una volta ottenuto quel pezzo di informazione, è possibile ricostruire la funzionalità con vanilla JS o qualche altro framework e con successo sbarazzarsi di jQuery da allora in poi.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.