# miért is beszélünk a jQuery jövőjéről?

ne hagyja ki a cikk feletti videót!

mert a jQuery továbbra is a frontend webes logikájának nagy részét futtatja! A legnépszerűbb weboldalak 70% – át és a teljes web 20% – át működteti (forrás). Ez hatalmas!

de ez még furcsábbá teszi a jövőjével kapcsolatos kérdést.

jQuery problémái vannak. Mindenhol ott van, és nem igazán jövőbiztos. Ez egy csodálatos eszköz volt, amikor 2006-ban megjelent, de az akkoriban rögzített alapvető kérdések már nem jelentenek problémát. Ehelyett most már több problémába ütközhet a jQuery használatakor.

ennek megértéséhez nézzük meg a jQuery 2006-ban rögzített problémáit.

A JavaScript eléggé elromlott, és a böngészők nagyon eltérően implementálták

ez volt az egyik legfontosabb dolog, amiben a jQuery segített. Hirtelen volt egy könnyen használható API, amely lehetővé tette a DOM manipulálását. És még ennél is jobb: ugyanaz az API működött az összes főbb böngészőben!

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

A JavaScript és a Web egésze sokkal kevésbé volt Érett

a jQuery lehetővé tette a fejlesztők számára, hogy egyszerűen “többet tegyenek” a weben – pontosabban a frontenden. A vonzó felhasználói felületek létrehozása (amelyekhez JavaScript szükséges) könnyebb volt, mert jól dokumentált API-t használhat. Az elemek animálása, a tartalom hozzáadása és eltávolítása, a stílusok megváltoztatása és az elemek újrarendelése lényegesen könnyebb volt, mint a Vanilla JavaScript használatával. jQuery is hozzá egy erős, mégis hozzáférhető Ajax API, amely lehetővé tette a küldő háttér kérések egyszerű is. Ez a JavaScript-vezérelt UI-k alapvető építőeleme, mivel nem kell minden felhasználói műveletnél új oldalt betöltenie, és a kulisszák mögött betöltheti vagy manipulálhatja a szerveroldali adatokat.

    Ismerje meg a Vue-t.js

    Vue.js teszi épület reaktív weboldalak egyszerű. Egy szép szintaxis + erőteljes funkciók-ez nem a legrosszabb csomag, amit kaphat.

    Ismerje meg a reagálást

    a React nagyszerű alternatívája a Vue-nak.js. Rendkívül népszerű, és nem szabad kihagyni!

    tanulni szögletes

    szögletes kezdődött az egész! Ismerje meg azt a keretet, amely a React anyja.js és Vue!

# mi változott?

a jQuery által rögzített problémák már nem problémák.

a JavaScript érett, a böngésző kompatibilitása sokkal jobb lett. Van egy vibráló frontend fejlesztési ökoszisztéma több ezer csomaggal és eszközzel, sokkal erősebb Ajax könyvtárakat használhatunk, mint például az Axios, ha akarjuk.

Ez nem azt jelenti, hogy minden nagyszerű, de a jQuery által rögzített alapvető problémák valójában már nem léteznek.

ehelyett a jQuery now egy olyan eszköz, amelyet gyakran (természetesen nem mindig) használnak kevésbé tapasztalt webfejlesztők, akik soha nem váltottak át vanília JavaScriptre vagy olyan keretrendszerekre, mint az Angular vagy a React.

és ezt fontos megérteni: nem csak a jQuery vs Angularról beszélünk. Vanilla JavaScript egy igazi alternatíva!

míg a DOM bejárása és manipulálása sokkal nehezebb volt 2006-ban, sok olyan funkciót kaptunk, mint a querySelector, amely a Vanilla JavaScript-be van építve. Ezek a dolgok működnek, sőt böngészőkön keresztül is működnek.

Ha lehetősége van a Vanilla JavaScript használatára, ahelyett, hogy alapvetően ugyanazt érné el a jQuery-vel, akkor nyilvánvalóan jobb a vanilla opciót használni. Elmented az extra csomag letöltését, és nem kell extra szintaxist tanulnod.

# ez nem csak vanília JavaScript…

Ez nem csak vanília JavaScript bár. Manapság egyszerűen jobb alternatívákat kaptunk.

a vanília JavaScriptnek nyilvánvalóan még mindig vannak korlátai. Ha összetett felhasználói felületet épít, sok logikával, amelyet JavaScript-en keresztül valósítanak meg, akkor gyorsan olyan helyzetekbe kerül, amikor lényegében valamilyen spagetti kódot kell írnia. A DOM állam kezelése végül is nehéz.

és nem csak ez. Rendszeresen olyan helyzetekbe kerül, amikor a DOM bejárási logikája megszakad, ha valaha úgy dönt, hogy újra megrendeli a HTML-kódot (vagy új elemeket vezet be).

<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')

Ez a kód nem fog működni, ha így módosítja a HTML kódot.

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

és ugyanez igaz a vanília JavaScript bejárási technikákra is.

nyilvánvaló, hogy olyan kódot írhat, amely továbbra is működik a fenti forgatókönyvben. De akkor más körülmények között eltörhet. Vagy a végén elég hosszú lánc bejárási módszerek biztonságosan válassza ki, amit tervez manipulálni. Ez pedig csak nehezebbé válik, ha manuálisan hoz létre vagy távolít el DOM elemeket a jQuery segítségével.

Ha valaha is volt olyan felhasználási eseted, amikor dinamikusan kellett hozzáadni és eltávolítani az elemeket-mondjuk valamilyen JavaScript tömb alapján, amely adatokat tartalmaz -, akkor tudod, hogy milyen fájdalom jár ezzel a jQuery vagy a Vanilla JavaScript használatakor. Hagyja békén, ha ezekkel az elemekkel szeretne dolgozni (például csatolja a kattintási hallgatókat vagy stílusokat).

# keretek a mentéshez!

van egy fix, hogy!

JavaScript keretrendszerek, mint például az Angular, a React (Ó, ez valójában egy könyvtár – bocsáss meg nekem reagáló emberek) vagy a Vue.

ezeknek a keretrendszereknek egy alapvető különbsége van a jQuery-hez (és a Vanilla JavaScript-hez) képest: nem írsz kódot a Dom kézi navigálásához.

ehelyett deklaratív megközelítést használ.

mit jelent ez?

Nos, itt van, hogyan lehet biztonságosan kiválasztani és manipulálni a HTML tartalmat a cikk korábbi részében-ezúttal a Vue használatával:

<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', },})

mint látható, a Vue egyértelműen más filozófiát követ, mint a jQuery. Ugyanez igaz a React és Angular esetében is.

a cikk további részében a Vue-t fogom használni a példákhoz-egyszerűen azért, mert nagyon szép szintaxisa van, és könnyű elkezdeni. Importálja a Vue – t a weboldalára, és készen áll.

de az Angular és a React is hasonló megközelítéseket követ. Ha többet szeretne megtudni ezekről, hasznos forrásokat kaptam az Ön számára:

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

és természetesen, ha mélyebbre akarsz merülni a Vue-ba, erre is kaptam forrásokat: Vue-a teljes útmutató.

mindegyik arra összpontosít, hogy egyszerűen megjelölje azokat a helyeket a DOM-ban, ahol a tartalmat meg kell jeleníteni. Nem kell leírnia az ahhoz a helyhez vezető utat-a keret meg fogja találni az Ön számára!

# de a Vue megoldás hosszabb!

ha összehasonlítja a jQuery megoldást a Vue megoldással, világosan látja, hogy a Vue megközelítés egy kicsit hosszabb (az írott kódsorok szempontjából).

de ez egy nagyon egyszerű példa! A bonyolultabb példák mérete gyorsan növekszik, és ami még rosszabb, összetettsége, amikor a szükséges jQuery kódról van szó. De nem a Vue (vagy a többi keret) számára.

Ez azért van, mert az általános megközelítés annyira más. Ha csak leírod az adatstruktúrádat, a logikádat és azt, hogy hogyan kapcsolod össze az adataidat a Dom-mal (úgymond a sablonoddal), akkor nem kell olyan sok kiegészítő kódot írnod, amikor a HTML-kódod vagy az üzleti logikád összetettebbé válik.

a jQuery esetében ez egy másik dolog. Ha mélyen beágyazott elemeket kell elérnie, vagy ha összetett dolgokat kell végrehajtania, mint például a létrehozandó elemek hurkolása, akkor gyorsan a korábban látott összetettebb (és hibára hajlamos) kódhoz jut.

Ez megadja:

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

a beágyazott<div>az elemek kattinthatók, és ahighlighted CSS osztály hozzáadódik minden elemhez, ha rákattint.

fontolja meg a Vue (és HTML) kódrészletet, amely ugyanazt érné el:

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

Ez még mindig néhány kódsor, amire szükséged van itt, de sokkal könnyebb megérteni, karbantartani és szerkeszteni! Kijelented, hogy a HTML kódod hogyan nézzen ki a végén, leírod az adataidat és kezeled a selected állapotodat a JS kódodban.

a varázslat az úgynevezett irányelvek segítségével történik-v-for(hurkoláshoz), v-on(eseményhallgatáshoz) és v-bind (A HTML elem megváltoztatásához) itt minden munkát elvégeznek. A React és az Angular általában hasonló megoldásokat kapott, bár a React nem használ irányelveket. Még mindig nem kényszerít arra, hogy manuálisan írja be az összes kódot az elemek kiválasztásához és létrehozásához.

ahogy a (frontend) webes alkalmazásod növekszik, és még összetettebb UI-kat építesz, imádni fogod ezt a deklaratív megközelítést, amely nem kényszerít végtelen, karbantarthatatlan láncokra css()$(...)és appendTo() hívásokat.

# A jQuery legalább kisebb?

a Vue kifejezetten eltérő szintaxist kínál – sok nehéz feladatot végez a DOM hozzáféréssel és a manipulációval kapcsolatban.

ennek nyilvánvalóan ára van, nem igaz? a jQuery minden bizonnyal kisebb, igaz?

Nos … nem. Nem ez a helyzet.

2018 márciusától a jQuery súlya 29kb minified és gzipped, míg a Vue 30KB minified és gzipped. mi a helyzet a React és Angular rendszerrel?

a React valójában két csomagból áll: ReactDOM és React magát. Kombinált, akkor le kell töltenie nagyjából 34kb minified + gzipped, hogy ez a futás.

Angular sokkal nagyobb, mint hogy mivel Angular egy módja nagyobb keretet, amely különösen alkalmas a nagy vállalati alkalmazások. Az ilyen típusú alkalmazások, akkor nyerni ellen jQuery nem azért, mert ez a csomag mérete, hanem azért, mert az összes fájdalmat takarít meg.

# Tehát … soha többé ne használja a jQuery-t?

a kérdés most természetesen az, hogy akkor mindig a Vue, Angular vagy a React alkalmazást kell-e használni. Vagy vannak olyan felhasználási esetek, amikor a jQuery használatának még mindig van értelme?

általában úgy gondolom, hogy jQuery ideje véget ér. Legalábbis jelenlegi formájában.

még mindig lehet választani, hogy triviális esetekben, de miért nem csak használja Vanilla JavaScript, hogy mentse az extra 30kbs + az extra szintaxis van, hogy bekerüljön? Jobb webfejlesztő leszel, ha egyébként ismered a vanilla JS-t.

a jQuery nyilvánvalóan még mindig sok régi webes alkalmazásban látja a használatát, és jó ideig ott is marad.

ha ilyen webes alkalmazásokon kell dolgoznia, akkor valószínűleg nem fogja megtalálni az utat a jQuery körül, és a tanulás ezért még mindig érdemes időt.

sok népszerű harmadik féltől származó csomag még mindig a jQuery-Bootstrap, a CSS keretrendszerre támaszkodik (sajnos még a legújabb verziójában is – 4.x). Bosszantó, hogy egy ilyen csomag miatt hozzá kell adni az extra függőséget, ezért személy szerint mindig megpróbálom kideríteni, hogy a jQuery pontosan mit tesz az adott csomagért. Miután megkapta ezt az információt, újjáépítheti a funkcionalitást a vanilla JS vagy más keretrendszer segítségével, majd sikeresen megszabadulhat a jQuery-től.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.