# proč vůbec diskutujeme o budoucnosti jQuery?

nenechte si ujít video nad článkem!

protože jQuery stále provozuje většinu webové logiky frontendu! Pohání kolem 70% nejlepších webových stránek a 20% celého webu (zdroj). To je obrovský!

ale to dělá otázku týkající se jeho budoucnosti ještě podivnější.

jQuery má problémy. Je to všude a není to opravdu do budoucna. Byl to úžasný nástroj, když byl propuštěn v roce 2006, ale hlavní problémy, které v té době opravil, už nejsou problémy. Místo toho nyní můžete při používání jQuery narazit na další problémy.

abychom tomu porozuměli, uvažujme o problémech, které jQuery opravil v roce 2006.

JavaScript byl rozbitý a prohlížečů implementovány to velmi odlišně

Toto byla jedna z hlavních věcí, jQuery pomohl. Najednou jste měli snadno použitelné API, které vám umožnilo manipulovat s DOM. A ještě lepší než to: stejné API fungovalo ve všech hlavních prohlížečích!

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

JavaScript a web jako celek bylo méně zralý

jQuery dovoleno vývojářům jednoduše „dělat více“ na web – na frontend, abych byl přesný. Vytváření poutavých uživatelských rozhraní (pro které potřebujete JavaScript) bylo jednodušší, protože byste mohli použít dobře zdokumentované API. Animace prvků, přidávání a odebírání obsahu, změna stylů a opětovné objednání položek bylo výrazně snazší dosáhnout než u vanilkového JavaScriptu. jQuery také přidal výkonný a přesto přístupné Ajax API, který dělal odesílání požadavků na pozadí snadné stejně. Toto je základní stavební blok UIs řízených JavaScriptem, protože nemusíte načítat novou stránku při každé akci uživatele a můžete načíst nebo manipulovat s daty na straně serveru v zákulisí.

    Naučte se Vue.js

    Vue.js usnadňuje vytváření reaktivních webových stránek. Pěkná syntaxe + výkonné funkce-to není nejhorší balíček, který byste mohli získat.

    Naučte se reagovat

    reagovat je skvělou alternativou k Vue.js. Je nesmírně populární a neměli byste si to nechat ujít!

    Naučte se Úhlové

    Úhlové začalo to všechno! Naučte se rámec, který je matkou React.js a Vue!

# co se změnilo?

problémy opravené jQuery již nejsou problémy.

JavaScript vyzrál, Kompatibilita prohlížeče se zlepšila. Máme živý vývojový ekosystém frontendu s tisíci balíčků a nástrojů, můžeme použít mnohem výkonnější knihovny Ajax, jako je Axios, pokud chceme.

to neznamená, že je všechno skvělé, ale základní problémy, které byly opraveny jQuery, už opravdu neexistují.

místo toho je jQuery nyní nástrojem, který často (ne vždy samozřejmě) používají méně zkušení vývojáři webu, kteří nikdy nepřecházeli na vanilkový JavaScript nebo rámce jako Angular nebo React.

a to je důležité pochopit mimochodem: nemluvíme jen o jQuery vs Angular. Vanilkový JavaScript je skutečnou alternativou!

Zatímco DOM traversal a manipulace byla obtížnější v roce 2006, máme mnoho funkcí, jako querySelector postaven v vanilky JavaScript. Tyto věci fungují a dokonce fungují napříč prohlížeči.

Pokud máte možnost použít vanilkový JavaScript místo toho, abyste dosáhli v podstatě stejného s jQuery, je samozřejmě lepší použít možnost vanilka. Uložíte další balíček ke stažení a nemusíte se učit další syntaxi.

# není to jen vanilkový JavaScript …

není to jen vanilkový JavaScript. V dnešní době jsme prostě dostali lepší alternativy.

vanilkový JavaScript má zjevně stále své limity. Pokud budujete složité uživatelské rozhraní se spoustou logiky implementované pomocí JavaScriptu, rychle skončíte v situacích, kdy v podstatě musíte napsat nějaký druh špagetového kódu. Správa státu DOM je přece jen obtížná.

a nejen to. Pravidelně narazíte na situace, kdy se vaše logika procházení DOM zlomí, pokud se někdy rozhodnete znovu objednat HTML kód (nebo zavést nové prvky).

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

Tento kód přestane fungovat, pokud takto změníte HTML kód.

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

a totéž by platilo pro techniky traverzování JavaScriptu.

je zřejmé, že můžete napsat kód, který by ve výše uvedeném scénáři stále fungoval. Ale to by se pak mohlo zlomit za různých okolností. Nebo skončíte s poměrně dlouhým řetězcem metod procházení, abyste mohli bezpečně vybrat, co plánujete manipulovat. A to se stává obtížnějším, pouze pokud ručně vytvoříte nebo odeberete prvky DOM pomocí jQuery.

Pokud jste někdy měli use-case, kde jste potřebovali přidat a odebrat prvky dynamicky-řekněme na základě nějakého pole JavaScriptu, které drží data – znáte bolest, která je s tím spojena při použití jQuery nebo vanilkového JavaScriptu. Nechte na pokoji, pokud chcete pracovat s těmito prvky (např. připojit posluchače kliknutí nebo styly).

# Frameworks na záchranu!

je tu Oprava!

JavaScript frameworky jako Angular, React (oh, to je vlastně knihovna-odpusť mi reagovat lidi) nebo Vue například.

všechny tyto rámce mají jeden zásadní rozdíl ve srovnání s jQuery (a vanilkovým JavaScriptem): nepíšete kód pro ruční navigaci v DOM.

místo toho používáte deklarativní přístup.

co to znamená?

No, zde je návod, jak můžete bezpečně vybrat a manipulovat s HTML obsah z dříve v tomto článku – tentokrát pomocí 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', },})

Jak můžete vidět, Vue jasně vyplývá, jinou filozofii, než jQuery. Totéž by mimochodem platilo pro React a Angular.

pro zbytek tohoto článku použiji Vue pro příklady-jednoduše proto, že má velmi pěknou syntaxi a je snadné začít. Importujte Vue na svou webovou stránku a je dobré jít.

ale Úhlové a reagovat také následovat srovnatelné přístupy. Pokud se chcete dozvědět více o těchto, mám užitečné zdroje pro vás:

  • Úhlové – Kompletní Průvodce
  • Reagovat – Kompletní Průvodce
  • Úhlové vs Reagovat vs Vue

A samozřejmě, v případě, že chcete ponořit se hlouběji do Vue, mám prostředky na to taky: Vue – Kompletní Průvodce.

všechny se zaměřují na to, aby vám umožnily jednoduše označit místa v DOM, kde by měl být obsah zobrazen. Nemusíte popisovat cestu k tomuto místu-rámec to přijde za vás!

# ale řešení Vue je delší!

pokud porovnáte řešení jQuery s řešením Vue, jasně vidíte, že přístup Vue je o něco delší (pokud jde o napsané řádky kódu).

ale to byl velmi jednoduchý příklad! Složitější příklady rychle rostou ve velikosti a, ještě horší, složitost, pokud jde o jQuery kód potřebný. Ale ne pro Vue (nebo jiné rámce).

je to proto, že obecný přístup je tak odlišný. Pokud se vám jen popsat vaše data strukturu, logiku a jak se připojit data do DOM (šablonu tak říci), nemusíte psát, že mnoho další kód, když vaše HTML kód nebo obchodní logika se stává složitější.

pro jQuery je to ale něco jiného. Pokud potřebujete dostat prvky, které jsou hluboce vnořené nebo pokud potřebujete udělat složitější věci, jako je opakování prostřednictvím k-být-vytvořené prvky, můžete rychle skončit s více složitých (a také náchylné k chybám) kód, který jste viděli dříve.

tím se získá:

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

vnořené <div> prvky jsou klikací a highlighted CSS třídy budou přidány do jakékoliv prvek po kliknutí.

Zvážit Vue (a HTML) fragment, který by se dosáhnout stejné:

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

To je pořád nějaký řádek kódy, které potřebujete, ale tady je to mnohem snazší pochopit, udržovat a upravovat! Na konci deklarujete, jak by měl váš HTML kód vypadat, popíšete svá data a spravujete svůj selected stav ve vašem JS kódu.

magie se děje s pomocí tzv. směrnic – v-for (pro smyčkování), v-on (event poslech) a v-bind (pro změnu prvku HTML) dělají všechny práce zde. React a Angular mají obecně srovnatelná řešení, ačkoli React nepoužívá směrnice. Stále vás nebude nutit ručně psát celý kód pro výběr a vytváření prvků.

Jak vaše (frontend) webové aplikace roste a stavět i složitější UIs, budete milovat takové deklarativní přístup, který nenutí vás do nekonečné, unmaintainable řetězce css()$(...)appendTo() hovory.

# je jQuery alespoň menší?

Vue nabízí výrazně odlišnou syntaxi – to dělá hodně těžké zvedání, pokud jde o DOM přístup a manipulaci pro vás.

to zjevně musí přijít za cenu,že? jQuery je určitě menší, že?

No … ne. Tak to není.

od března 2018 váží jQuery 29kb minified a gzipped, zatímco Vue přichází na 30kb minified a gzipped.a co React a Angular?

React se vlastně skládá ze dvou balíčků: ReactDOM a React sám. Dohromady, budete muset stáhnout zhruba 34kb minified + gzipped, aby si to nahoru a běží.

Angular je mnohem větší než to, protože Angular je mnohem větší rámec, který je vhodný zejména pro velké podnikové aplikace. U takových typů aplikací vyhraje proti jQuery ne kvůli velikosti balíčku, ale kvůli veškeré bolesti, kterou vám ušetří.

# takže … už nikdy nepoužívejte jQuery?

otázkou nyní samozřejmě je, zda byste měli vždy používat Vue, Angular nebo reagovat. Nebo existují případy použití, kdy použití jQuery stále dává smysl?

obecně se domnívám, že jqueryho čas se chýlí ke konci. Alespoň v současné podobě.

stále můžete vybrat to pro triviální případy, ale proč by ne jen používat vanilla JavaScript a zachránit extra 30kbs + extra syntaxe musíte se dostat do? Budete lepší webový vývojář, pokud víte, vanilla JS tak jako tak.

jQuery samozřejmě stále vidí mnoho použití v mnoha starších webových aplikacích a zůstane tam nějakou dobu.

Pokud potřebujete pracovat na takových webových aplikacích, pravděpodobně prozatím nenajdete cestu kolem jQuery a učení, že by to mohlo být stále něco, co stojí za váš čas.

mnoho populárních balíčků třetích stran se také stále spoléhá na jQuery-Bootstrap, CSS framework ,dělá to například (bohužel to dělá i ve své nejnovější verzi-4.x). Nutnost přidat další závislost kvůli takovému balíčku je nepříjemná, proto se osobně vždy snažím zjistit, co přesně jQuery dělá pro daný balíček. Jakmile získáte tuto informaci, můžete obnovit funkčnost pomocí vanilla JS nebo jiného rámce a poté se úspěšně zbavit jQuery.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.