Zgodovina in dediščina jQuery

jQuery — najbolj priljubljena JavaScript knjižnica na svetu. Skupnost spletnih razvijalcev jo je ustvarila konec 2000-ih, kar je pripeljalo do nastanka bogate ekosistem spletnih strani, vtičnikov in okvirov, ki uporabljajo jQuery.

Vendar v zadnjih letih njen status glavnega orodja za spletni razvoj ni več tako trden. Poglejmo, zakaj je jQuery postala priljubljena in zakaj je začela izpadati iz mode, pa tudi kdaj je še vedno smiselno uporabljati za ustvarjanje sodobnih spletnih strani.

Kratka zgodovina jQuery

John Resig (John Resig) je ustvaril prvo različico knjižnice leta 2005, in jo objavil leta 2006- na dogodku, imenovanem BarCampNYC. Na uradni spletni strani jQuery je avtor napisal:

jQuery — to je JavaScript knjižnica, na kateri temelji moto: Programiranje v JavaScriptu mora biti prijetno. jQuery vzame pogoste, ponavljajoče se naloge, odstrani nepotrebno poravnavo in jih naredi kratke, elegantne in razumljive.

jQuery ima dve glavni prednosti. Prva je udoben API za manipulacijo spletnih strani. Zlasti ponuja močne metode za izbiro elementov. Izbira ni mogoča le po ID-ju ali razredih, jQuery omogoča pisanje zapletenih izrazov, na primer, za izbiro elementov na podlagi njihovih medsebojnih povezav z drugimi elementi:

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

Sčasoma je mehanizem izbire prerasel v posebno knjižnico Sizzle.

Druga prednost knjižnice je bila ta, da je abstraktirala razlike med brskalniki. V tistih letih je bilo težko napisati kodo, ki bi zanesljivo delovala v vseh brskalnikih.

Pomanjkanje standardizacije je pomenilo, da so morali razvijalci upoštevati številne razlike med brskalniki in robne primere. Oglejte si ta zgodnji izvorni kodo jQuery in poiščite jQuery.browser. Tukaj je en primer:

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

In zahvaljujoč jQuery so se lahko razvijalci znebili skrbi o vseh teh skritih težavah na ramenih ekipe, ki razvija knjižnico.

Kasneje je jQuery olajšala uvedbo bolj zapletenih tehnologij, kot so animacije in Ajax. Knjižnica je dejansko postala standardna odvisnost za spletne strani. In danes zagotavlja delovanje velikega dela interneta. W3Techs ocenjuje, da 74 % spletnih strani danes uporablja jQuery.

Nadzor nad razvojem jQuery je prav tako postal bolj formaliziran. Leta 2011 je ekipa ustanovila jQuery Board. In leta 2012 jQuery Board se je preoblikoval v jQuery Foundation.

V letu 2015 se je jQuery Foundation združila z Dojo Foundation, da ustvari JS Foundation, ki se je nato združil z Node.js Foundation v 2019-m za ustvarjanje OpenJS Foundation, v okviru katere je bil jQuery eden od „preboja projektov.»

Spremenjene okoliščine

Vendar je jQuery v zadnjih letih izgubil svojo priljubljenost. GitHub je odstranil knjižnico s sprednjega dela svojega spletnega mesta. Bootstrap v5 se želi znebiti jQuery, ker je to njegova „največja odvisnost stranke za običajen JavaScript“ (trenutno velikost 30 KB, minimizirana in stisnjena). Več trendov v spletnem razvoju je oslabilo pozicijo jQuery kot nujnega orodja.

Brskalniki

Iz več razlogov so razlike in omejitve brskalnikov postale manj pomembne. Prvič, standardizacija se je izboljšala. Glavni razvijalci brskalnikov (Apple, Google, Microsoft in Mozilla) skupaj razvijajo spletne standarde v okviru Web Hypertext Application Technology Working Group.
Čeprav se brskalniki še vedno razlikujejo v nekaterih pomembnih točkah, imajo vendorji vsaj orodje za iskanje in ustvarjanje skupne osnovne platforme namesto stalnega spopada drug z drugim. Ustrezno so API-ji brskalnikov pridobili nove funkcionalnosti. Na primer, Fetch API lahko nadomesti Ajax-funkcije iz 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);
    });

Metode querySelector in querySelectorAll podvajajo izbire iz jQuery:

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

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

Zdaj je mogoče manipulirati s class-i elementov s pomočjo classList:

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

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

Na spletnem mestu You Might Not Need jQuery je navedeno še nekaj situacij, kjer se lahko koda jQuery nadomesti s strankami. Nekateri razvijalci vedno vztrajajo pri jQuery, ker preprosto ne vedo za nove API-je, vendar ko se spoznajo, jo začnejo redkeje uporabljati.

Uporaba nativnih funkcij omogoča izboljšanje zmogljivosti strani. Mnogi animacijski učinki iz jQuery so zdaj mogoče doseči močno učinkoviteje s pomočjo CSS.

Drugi razlog je, da se brskalniki posodabljajo veliko hitreje kot prej. V večini se uporablja strategija „večni zeleni“, razen Apple Safari. Posodobitve se lahko izvajajo v ozadju brez angažiranja uporabnika in niso vezane na posodobitve OS.

To pomeni, da se nove funkcionalnosti brskalnikov in popravki napak širijo veliko hitreje in razvijalcem ni treba čakati, da delež Can I Use doseže sprejemljivo raven. Z lahkoto lahko uporabljajo nove funkcije in API brez nalaganja jQuery ali polifilov.

Tretji razlog je, da Internet Explorer postaja vse bolj irrelevantna. IE že dolgo predstavlja težavo za spletno razvijanje po vsem svetu. Njegove značilne napake so bile široko razširjene, in ker je IE prevladoval v 2000-ih in ni uporabljal strategije nenehnega posodabljanja, se še vedno pogosto nahajajo njegove stare različice.

V letu 2016 je Microsoft pospešil umik IE. prenehaj z podporo za različico 10 in manj, osredotočil pa se je na podporo IE 11. In vse pogosteje si spletni razvijalci lahko privoščijo luksuz, da ignorirajo združljivost z IE.

Tudi jQuery je prenehal podpirati IE 8 in starejše različice od različice 2.0, ki je izšla leta 2013. Čeprav je v nekaterih primerih še vedno potrebna podpora za IE, na primer na starejših straneh, pa se te situacije pojavljajo vedno redkeje.

Nova ogrodja

Od nastanka jQuery je bilo ustvarjenih številna ogrodja, vključno z modernimi voditelji, React, Angular in Vue. Imata dva pomembna prednosti pred jQuery.

Prvič, omogočajo enostavno razčlenitev uporabniškega vmesnika na komponente. Ogrodja so zasnovana tako, da obravnavajo risanje in posodabljanje strani. Medtem ko se jQuery običajno uporablja samo za posodabljanje, nalaga strežniku nalogo zagotavljanja začetne strani.

Po drugi strani pa komponente React, Angular in Vue omogočajo tesno povezavo HTML, kode in celo CSS. Tako kot razdelimo bazo kode na številne samostojne funkcije in razrede, tako možnost razdelitve vmesnika na ponovno uporabne komponente poenostavi sestavljanje in vzdrževanje zapletenih spletnih strani.

Druga prednost je, da novejša ogrodja sledijo deklarativni paradigmi, v okviru katere razvijalec opisuje, kako naj bi izgledal vmesnik, medtem ko za izpeljavo vseh potrebnih sprememb za dosego želenega poskrbi ogrodje. Ta pristop nasprotuje imperativnemu pristopu, značilnemu za kodo jQuery.

V jQuery jasno določate korake za izvajanje kakršnih koli sprememb. V deklarativnem ogrodju pa rečete: „Na podlagi teh podatkov bi moral vmesnik izgledati tako.“ To lahko močno poenostavi pisanje kode brez napak.

Razvijalci so sprejeli nove pristope k razvoju spletnih strani, kar je povzročilo upad priljubljenosti jQuery.

Kdaj uporabiti jQuery?

Kdaj torej bi morali uporabiti jQuery?

Če bo kompleksnost projekta naraščala, je bolje začeti z drugo knjižnico ali ogrodjem, ki omogoča smiselno upravljanje s kompleksnostjo. Na primer, razdelitev vmesnika na komponente. Uporaba jQuery na takih spletnih straneh se lahko sprva zdi sprejemljiva, vendar hitro privede do nastanka spaghetti kode, kjer ne boste prepričani, kateri del vpliva na kateri del strani.

Bil sem v taki situaciji, kjer ob poskusu kakršne koli spremembe nastane občutek težke naloge. Ni mogoče biti prepričan, da ne boste ničesar pokvarili, ker so jQuery selektorji odvisni od HTML strukture, ki jo ustvari strežnik.

Na drugem koncu lestvice so preproste spletne strani, ki zahtevajo le malo interaktivnosti ali dinamične vsebine. V takih primerih tudi ne bi po privzetku uporabil jQuery, ker je mogoče z nativnimi API-ji narediti veliko več.

Tudi če bom potreboval kaj močnejšega, bom poiskal specializirano knjižnico, na primer, axios za Ajax ali Animate.css za animacije. To bo preprosteje kot nalaganje celotnega jQuery zaradi majhne funkcionalnosti.

Menim, da je najboljši razlog za uporabo jQuery to, da ponuja obsežno funkcionalnost za delo s frontendom spletne strani. Namesto da bi se učili različnih nativnih API-jev ali specializiranih knjižnic, lahko preberete le dokumentacijo jQuery in takoj postanete produktivni.

Imperativni pristop se slabo širi, vendar ga je lažje obvladati kot deklarativne pristope drugih knjižnic. Za spletno stran z očitno omejenimi zmožnostmi je bolje uporabiti jQuery in mirno delati: knjižnica ne zahteva zapletenega sestavljanja ali prevajanja.

Poleg tega je jQuery dobra izbira v primerih, ko ste prepričani, da se spletna stran ne bo sčasoma zapletla, in če vas ne skrbi nativna funkcionalnost, ki bo nedvomno zahtevala več kodiranja kot jQuery.

Prav tako lahko to knjižnico uporabite, če je treba podpreti stare različice IE. Takrat bo jQuery služil kot v tistih časih, ko je bil IE najbolj priljubljen brskalnik.

Pogled v prihodnost

jQuery ne bo odšla še dolgo. Ona aktivno se razvija, in mnogi razvijalci raje uporabljajo njen API, tudi ko so na voljo naravne metode. Knjižnica je pomagala celemu naraščaju razvijalcev pri ustvarjanju spletnih strani, ki delujejo v vseh brskalnikih. In čeprav so jo v mnogih pogledih nadomestile nove knjižnice, okviri in paradigme, je jQuery odigrala ogromno pozitivno vlogo pri oblikovanju sodobnega spleta.

Če se funkcionalnost jQuery bistveno ne spremeni, je zelo verjetno, da se bo uporaba knjižnice v naslednjih letih nadalje počasi, a vztrajno zmanjševati. Nove spletne strani se ponavadi od vsega začetka ustvarjajo z uporabo sodobnejših okvirov, in ustrezni scenariji uporabe jQuery se pojavljajo vse redkeje.

Nekaterim se ne zdi intenzivnost zastare orodij za spletni razvoj prijetna, a zame je to dokaz hitrega napredka. jQuery nam je omogočila, da smo lahko veliko stvari delali bolje. Enako velja tudi za njene naslednike.

Izvor: habr.com