🥇Historien og arven til jQuery

jQuery — det mest populære JavaScript-biblioteket i verden. Felleskapet av webutviklere skapte det på slutten av 2000-tallet, noe som førte til en rik økosystem av nettsteder, plugins og rammeverk som bruker jQuery under panseret.

Men i de siste årene har dets status som hovedverktøy for webutvikling blitt svekket. La oss se på hvorfor jQuery ble populært og hvorfor det er ute av moten, samt i hvilke tilfeller det fortsatt er fornuftig å bruke det for å lage moderne nettsteder.

Kort historie om jQuery

John Resig (John Resig) laget den første versjonen av biblioteket i 2005, og publiserte det i 2006-m på et arrangement kalt BarCampNYC. På den offisielle jQuery-nettsiden skrev forfatteren:

jQuery er et JavaScript-bibliotek, basert på det enkle prinsippet: Det skal være gøy å programmere med JavaScript. jQuery tar vanlige, repeterende oppgaver, fjerner unødvendig oppmerking og gjør dem korte, elegante og forståelige.

jQuery har to hovedfordeler. Den første er et brukervennlig API for manipulasjon av nettsider. Spesielt gir det kraftige metoder for å velge elementer. Du kan velge ikke bare etter ID eller klasser, jQuery lar deg skrive komplekse uttrykk, for eksempel for å velge elementer basert på deres relasjoner med andre elementer:

// Select every item within the list of people within the contacts element
$('#contacts ul.people li');

Over tid ble valgmekanismen til en egen bibliotek Sizzle.

Den andre fordelen med biblioteket var at det abla forskjellene mellom nettlesere. På den tiden var det vanskelig å skrive kode som ville fungere pålitelig i alle nettlesere.

Mangelen på standardisering betydde at utviklere måtte ta hensyn til de mange forskjellene mellom nettlesere og grense tilfeller. Ta en titt på denne tidlige jQuery-kildekoden og se etter jQuery.browser. Her er et av eksemplene:

// 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);
}

Og takket være jQuery kunne utviklerne legge ansvaret for alle disse fallgruvene på skuldrene til teamet som utviklet biblioteket.

Senere gjorde jQuery implementering av mer komplekse teknologier, som animasjoner og Ajax, enklere. Biblioteket ble faktiske standardavhengighet for nettsteder. Og i dag driver det en stor del av internett. W3Techs anslår at 74 % av nettstedene bruker i dag jQuery.

Kontrollen over utviklingen av jQuery ble også mer formalisert. I 2011 opprettet teamet jQuery Board. Og i 2012 ble jQuery Board omgjort til jQuery Foundation.

I 2015 blei jQuery Foundation ein del av Dojo Foundation, for å opprette JS Foundation, som deretter slo seg sammen med Node.js Foundation i 2019-en for å danne OpenJS Foundation, hvor jQuery var ett av «banebrytende prosjektene.»

Endrede omstendigheter

Men de siste årene har jQuery mistet noe av sin popularitet. GitHub fjernet biblioteket fra frontend-siden sin. Bootstrap v5 vil bli kvitt jQuery, fordi det er dets «største klientavhengighet for vanlig JavaScript» (for øyeblikket på 30 KB, minifisert og pakket). Flere trender innen webutvikling har svekket jQuerys stilling som et nødvendig verktøy.

Nettlesarar

Av en rekke grunner har forskjeller og begrensninger mellom nettleserne blitt mindre viktige. For det første har standardiseringen blitt bedre. De viktigste nettleserutviklerne (Apple, Google, Microsoft og Mozilla) samarbeider om å utvikle webstandarder i rammer av Web Hypertext Application Technology Working Group.
Selv om nettleserne fortsatt skiller seg fra hverandre på flere viktige punkter, har leverandørene i det minste et middel for å finne og lage et felles grunnlag i stedet for permanent krig mot hverandre. Følgelig har API-ene i nettleserne fått nye muligheter. For eksempel, Fetch API kan erstatte Ajax-funksjoner fra 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);
    });

Metoder querySelector og querySelectorAll dupliserer valgverktøyene fra jQuery:

// jQuery
const fooDivs = $('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

Å manipulere klassene til elementene kan nå gjøres med classList:

// jQuery
$('#warning').toggleClass('visible');

// native
document.querySelector('#warning').classList.toggle('visible');

På nettstedet Du trenger kanskje ikke jQuery det er listet opp flere situasjoner der jQuery-koden kan erstattes med native kode. Noen utviklere holder alltid fast ved jQuery, fordi de bare ikke kjenner de nye API-ene, men når de får vite om dem, begynner de å bruke biblioteket sjeldnere.

Å bruke native funksjoner gjør det mulig å forbedre ytelsen til sidene. Mange animasjonseffekter fra jQuery kan nå implementeres mye mer effektivt med CSS.

Den andre grunnen er at nettleserne oppdateres mye raskere enn før. I de fleste brukes en «eviggrønn» oppdateringsstrategi, bortsett fra Apple Safari. De kan oppdateres i bakgrunnen uten brukerens involvering og er ikke knyttet til OS-oppdateringer.

Dette betyr at nye muligheter i nettleserne og feilrettinger sprer seg mye raskere, og utviklere trenger ikke å vente på at andelen Kan jeg bruke vil nå et akseptabelt nivå. De kan trygt bruke nye funksjoner og API-er uten å måtte laste ned jQuery eller polyfills.

Den tredje grunnen er at Internet Explorer nærmer seg fullstendig foreldelse. IE har lenge vært et mareritt for webutvikling over hele verden. Dens karakteristiske feil har vært utbredt, og ettersom IE dominerte på 2000-tallet og ikke brukte en 'eviggrønn' oppdateringsstrategi, er det stadig gamle versjoner som er i omløp.

I 2016 akselererte Microsoft avviklingen av IE, ved å slutte å støtte den tiende og eldre versjoner, ved å begrense støtten til IE 11. Og stadig oftere kan webutviklere tillate seg å ignorere kompatibilitet med IE.

Til og med jQuery sluttet å støtte IE 8 og eldre fra versjon 2.0, som ble utgitt i 2013. Og selv om det fortsatt er tilfeller hvor støtte for IE er nødvendig, for eksempel på gamle nettsteder, skjer disse situasjonene sjeldnere.

Nye rammeverk

Siden jQuery ble introdusert, har mange rammeverk blitt utviklet, inkludert moderne ledere React, Angular og Vue. De har to viktige fordeler sammenlignet med jQuery.

For det første gjør de det enkelt å dele brukergrensesnittet inn i komponenter. Rammeverkene er designet for å håndtere rendering og oppdatering av siden. jQuery brukes vanligvis kun for oppdatering, og overlater til serveren ansvaret for å levere den opprinnelige siden.

På den annen side tillater komponentene i React, Angular og Vue en tett sammenkobling av HTML, kode og til og med CSS. Som vi deler kodebasen inn i mange selvforsynte funksjoner og klasser, gjør muligheten for å dele grensesnittet inn i gjenbrukbare komponenter det lettere å bygge og vedlikeholde komplekse nettsteder.

Den andre fordelen er at nyere rammeverk følger en deklarativ tilnærming, der utvikleren beskriver hvordan grensesnittet skal se ut, og rammeverket tar seg av alle nødvendige endringer for å oppnå det ønskede resultatet. Denne tilnærmingen er i kontrast til den imperativ tilnærmingen som er karakteristisk for jQuery-kode.

I jQuery skriver du tydelig ned trinnene for å gjøre endringer. I et deklarativt rammeverk sier du: 'I henhold til disse dataene, bør grensesnittet se slik ut.' Dette kan i stor grad forenkle kode skriving uten feil.

Utviklerne har tatt i bruk nye metoder for nettsideutvikling, noe som har ført til at populariteten til jQuery har falt.

Når bør man bruke jQuery?

Så når skal vi bør bruke jQuery?

Hvis prosjektets kompleksitet øker, er det bedre å begynne med et annet bibliotek eller rammeverk som gir en fornuftig måte å håndtere kompleksitet på, for eksempel ved å dele opp grensesnittet i komponenter. Bruken av jQuery på slike nettsteder kan i starten virke akseptabelt, men det vil raskt føre til spaghetti-kode, hvor du ikke vet hvilke deler som påvirker hvilke deler av siden.

Jeg har vært i en slik situasjon, der ethvert forsøk på å gjøre en endring føles som en vanskelig oppgave. Man kan ikke være sikker på at man ikke ødelegger noe, fordi jQuery-selektorene er avhengige av HTML-strukturen som serveren har laget.

I den andre enden av skalaen finner vi enkle nettsteder som bare trenger litt interaktivitet eller dynamisk innhold. I slike tilfeller ville jeg heller ikke automatisk bruke jQuery, fordi man kan gjøre mye mer med native API-er.

Selv om jeg trenger noe mer kraftfullt, vil jeg se etter et spesialisert bibliotek, for eksempel axios for Ajax eller Animate.css for animasjoner. Det vil være enklere enn å laste hele jQuery for å få liten funksjonalitet.

Jeg tror det beste argumentet for å bruke jQuery er at det tilbyr omfattende funksjonalitet for frontend-arbeid på nettstedet. I stedet for å lære forskjellige native API-er eller spesialiserte biblioteker, kan du bare lese jQuery-dokumentasjonen, og du blir straks produktiv.

Den imperativ tilnærmingen skalerer dårlig, men er enklere å mestre enn den deklarative tilnærmingen til andre biblioteker. For et nettsted med klart begrensede muligheter, er det best å bruke jQuery og jobbe i fred: Biblioteket krever ingen komplisert bygging eller kompilering.

I tillegg er jQuery nyttig i de tilfellene hvor du er sikker på at nettstedet ikke vil bli mer komplekst over tid, og hvis du ikke er bekymret for native funksjonalitet som helt klart vil kreve mer kode enn jQuery.

Du kan også bruke dette biblioteket hvis det er behov for å støtte eldre versjoner av IE. Da vil jQuery fungere for deg, akkurat som i de tidene da IE var den mest populære nettleseren.

Fremtidsblikk

jQuery vil ikkje forsvinne med det første. Det utvikles aktivt, og mange utviklere foretrekker å bruke API-et, selv om nativemetoder er tilgjengelige. Biblioteket har hjulpet en hel generasjon utviklere med å lage nettsteder som fungerer på alle nettlesere. Og selv om mange aspekter har blitt erstattet av nye biblioteker, rammeverk og paradigmer, har jQuery spilt en enormt positiv rolle i å skape moderne web.

Hvis funksjonaliteten til jQuery ikke endres vesentlig, er det sannsynlig at bruken av biblioteket vil fortsette å avta sakte, men sikkert i løpet av de neste årene. Nye nettsteder blir vanligvis laget fra bunnen av ved å bruke mer moderne rammeverk, og passende bruksområder for jQuery oppstår stadig sjeldnere.

Noen liker ikke intensiteten av verktøyene for webutvikling som blir utdaterte, men for meg er det et tegn på rask fremgang. jQuery har gjort oss i stand til å gjøre mye bedre. Det samme gjelder for dens etterkommere.

Kilde: habr.com

The history and legacy of jQuery