# hvorfor diskuterer vi selv fremtiden for jQuery?

ikke gå glipp av videoen over artikkelen!

Fordi jQuery fortsatt kjører flertallet av frontend weblogikken! Den driver rundt 70% av de beste nettsidene og 20% av hele nettet (Kilde). Det er stort!

Men dette gjør spørsmålet om sin fremtid enda fremmed.

jQuery har problemer. Det er overalt, og det er egentlig ikke fremtidssikker. Det var et fantastisk verktøy da det ble sluppet tilbake i 2006, men kjerneproblemene det løst på den tiden, er ikke problemer lenger. I stedet kan du nå løpe inn i flere problemer når du bruker jQuery.

For å forstå dette, la oss vurdere problemene jQuery løst tilbake i 2006.

JavaScript var litt ødelagt og nettlesere implementerte det veldig annerledes

Dette var en av de store tingene jQuery hjalp med. Plutselig hadde du en brukervennlig API som tillot deg å manipulere DOM. Og enda bedre enn det: DEN samme API jobbet på tvers av alle de store nettleserne!

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

JavaScript og nettet som helhet var langt mindre moden

jquery tillot utviklere å bare «gjøre mer» på nettet – på frontend for å være presis. Opprette engasjerende brukergrensesnitt (Som Du Trenger JavaScript) var enklere fordi du kan bruke en godt dokumentert API. Animere elementer, legge til og fjerne innhold, endre stiler og re-bestilling elementer var betydelig enklere å oppnå enn med vanilje JavaScript. jQuery også lagt til en kraftig Og likevel tilgjengelig Ajax API som gjorde sending av bakgrunnsforespørsler lett også. Dette er en kjerne byggestein Av JavaScript-drevet UIs siden du ikke trenger å laste inn en ny side på hver bruker handling og kan laste eller manipulere server-side data bak kulissene.

    Lær Vue.js

    Vue.js gjør bygge reaktive nettsider enkle. En fin syntaks + kraftige funksjoner-det er ikke den verste pakken du kan få.

    Lær Reagere

    Reagere Er et flott alternativ Til Vue.js. Det er ekstremt populært, og du bør absolutt ikke gå glipp av det!

    Lær Angular

    Angular startet alt! Lær rammen Som Er Moren Til React.js og Vue!

# Hva har endret seg?

problemene løst av jQuery er ikke problemer lenger.

JavaScript modnet, nettleserkompatibilitet ble bedre. Vi har et levende frontend – utviklingsøkosystem med tusenvis av pakker og verktøy, vi kan bruke langt kraftigere Ajax-biblioteker som Axios hvis vi vil.Dette betyr ikke at alt er bra, men kjerneproblemene som ble løst av jQuery eksisterer egentlig ikke lenger.I Stedet er jQuery nå et verktøy som ofte (ikke alltid selvfølgelig) brukes av mindre erfarne webutviklere som aldri har byttet til vanilla JavaScript eller rammer som Angular eller React.

og det er viktig å forstå forresten: Vi snakker ikke bare om jQuery vs Angular. Vanilla JavaScript er et reelt alternativ!MENS DOM traversering og manipulering var langt vanskeligere i 2006, fikk vi mange funksjoner som querySelector innebygd i vanilla JavaScript nå. Disse tingene fungerer, og de fungerer til og med på tvers av nettlesere.

hvis du har muligheten til å bruke vanilla JavaScript i stedet for å oppnå i utgangspunktet det samme med jQuery, er det åpenbart bedre å bruke vanilla-alternativet. Du lagrer den ekstra pakken nedlasting, og du trenger ikke å lære en ekstra syntaks.

# det er ikke Bare Vanilje JavaScript…

det er ikke bare vanilje JavaScript skjønt. Vi fikk bare bedre alternativer i disse dager.

Vanilje JavaScript har tydeligvis fortsatt sine grenser. Hvis du bygger et komplekst BRUKERGRENSESNITT med mye logikk implementert Via JavaScript, kommer du raskt til situasjoner der du egentlig må skrive en slags spaghetti-kode. Administrerende DOM state er vanskelig tross alt.

Og ikke bare det . Du støter regelmessig på situasjoner der DOM-traversallogikken din bryter hvis du noen gang bestemmer deg for å bestille HTML-koden din (eller introdusere nye elementer).

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

denne koden vil slutte å fungere hvis DU endrer HTML-koden som dette.

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

Og det samme ville være sant for vanilje JavaScript traversering teknikker.

Åpenbart kan du skrive kode som fortsatt vil fungere i scenariet ovenfor. Men det kan da bryte under forskjellige omstendigheter. Eller du ender med en ganske lang kjede av traversale metoder for å trygt velge hva du planlegger å manipulere. Og dette blir bare vanskeligere hvis du manuelt oppretter eller fjerner DOM-elementer via jQuery.

Hvis du noen gang hadde et brukstilfelle der du trengte å legge til og fjerne elementer dynamisk-la oss si basert på Noen JavaScript-arrayer som holder data – vet du smerten som er knyttet til det når du bruker jQuery eller vanilla JavaScript. La være alene hvis du da vil jobbe med disse elementene(f. eks.

# Rammer til redning!

Det er en løsning for det!JavaScript-rammer som Angular, React (oh, det er et bibliotek faktisk – tilgi Meg Å Reagere folk) eller Vue for eksempel.Alle disse rammene har en grunnleggende forskjell i forhold til jQuery( og vanilla JavaScript): du skriver ikke kode for å navigere DOM manuelt.

du bruker en deklarativ tilnærming i stedet.

Hva betyr dette?

vel, her er hvordan du trygt kan velge OG manipulere HTML-innhold fra tidligere i denne artikkelen-denne gangen ved Hjelp Av 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', },})

Som du kan se, Vue tydelig følger en annen filosofi enn jQuery gjør. Det samme ville være sant For React og Angular forresten.

for resten av denne artikkelen bruker Jeg Vue for eksemplene-bare fordi den har en veldig fin syntaks og det er lett å komme i gang med. Importer Vue til nettsiden din, og du er god til å gå.

Men Angular og React følger også sammenlignbare tilnærminger. Hvis du vil lære mer om disse, har jeg nyttige ressurser for deg:

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

Og selvfølgelig, hvis du vil dykke dypere inn I Vue, fikk jeg ressurser på det også: Vue – The Complete Guide.

de fokuserer alle på at du bare kan markere steder i DOM hvor innholdet skal vises. Du trenger ikke å beskrive veien til det stedet-rammen vil finne det for deg!

# Men vue-løsningen er lengre!

hvis du sammenligner jquery-løsningen Med Vue-løsningen, ser du tydelig At Vue-tilnærmingen er litt lengre (når det gjelder kodelinjer skrevet).

Men dette var et veldig enkelt eksempel! Mer komplekse eksempler vokser raskt i størrelse og, enda verre, kompleksitet når det gjelder jQuery-kode som kreves. Men ikke For Vue(eller de andre rammene).

det er fordi den generelle tilnærmingen er så forskjellig. Hvis du bare beskriver datastrukturen, logikken din og hvordan du kobler dataene dine TIL DOM (malen din så å si), trenger du ikke å skrive så mye ekstra kode når HTML-koden eller forretningslogikken blir mer kompleks.

for jQuery, det er en annen ting skjønt. Hvis du trenger å nå elementer som er dypt nestet, eller hvis du trenger å gjøre komplekse ting som looping gjennom å være opprettet elementer, ender du raskt med den mer komplekse (og også feilutsatte) koden du så tidligere.

Dette vil gi:

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

den nestede<div>elementer er klikkbare oghighlightedCSS-klassen vil bli lagt til ethvert element ved å klikke.

Vurdere Vue (OG HTML) tekstutdrag som ville oppnå det samme:

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

Det er fortsatt noen linje med koder du trenger her, men det er så mye lettere å forstå, vedlikeholde og redigere! Du erklærer hva HTML-koden din skal se ut til slutt, du beskriver dataene dine og administrerer din selected tilstand I js-koden din.

magien skjer ved hjelp av såkalte direktiver- v-for (for looping),v-on (for hendelseslytting) ogv-bind (for å endre HTML-elementet) gjør alt arbeidet her. React og Angular har generelt sammenlignbare løsninger, men React bruker ikke direktiver. Det vil fortsatt ikke tvinge deg til å skrive all koden manuelt for å velge og lage elementer.

som din (frontend) web app vokser og du bygger enda mer komplekse UIs, vil du elske en slik deklarativ tilnærming som ikke tvinger deg inn i endeløse, uoppnåelige kjeder avcss()$(...) ogappendTo() samtaler.

# er jQuery mindre i det minste?

Vue tilbyr en tydelig annen syntaks-det gjør mye av det tunge løftet OM DOM-tilgang og manipulasjon for deg.

Det må helt klart komme til en pris, ikke sant? jQuery sikkert er mindre, ikke sant?

Vel … nei. Det er ikke tilfelle.Fra Mars 2018 veier jQuery 29kb minified og gzipped mens Vue kommer på 30kb minified og gzipped.Hva Med Reaksjon og Vinkel?

React består faktisk av to pakker: ReactDOM og React selv. Kombinert må du laste ned omtrent 34kb minified + gzipped for å få det oppe.

Angular er langt større enn Det siden Angular er en måte større rammeverk som er spesielt egnet for store bedriftsapplikasjoner. For slike typer apps, vil det vinne mot jQuery ikke på grunn av det er pakkestørrelse, men på grunn av all smerten det sparer deg.

# så…bruk aldri jQuery igjen?

spørsmålet nå er selvfølgelig om du alltid skal bruke Vue, Angular eller React da. Eller er det brukstilfeller der bruk av jQuery fortsatt gir mening?

Generelt tror jeg at jquerys tid kommer til en slutt. I hvert fall i sin nåværende form.Du kan fortsatt velge den for trivielle tilfeller, men hvorfor ville du ikke bare bruke vanilla JavaScript for det og lagre de ekstra 30kbs + den ekstra syntaksen du må komme inn på? Du vil bli en bedre webutvikler hvis du vet vanilla JS uansett.

jQuery ser åpenbart fortsatt mye bruk i mange eldre webapper, og det kommer til å bli der lenge.Hvis du trenger å jobbe med slike webapper, vil du sannsynligvis ikke finne en vei rundt jQuery for nå, og å lære det kan derfor fortsatt være noe verdt tiden din.Mange populære tredjepartspakker stoler fortsatt på jQuery-Bootstrap, CSS-rammen, gjør det for eksempel (dessverre gjør det det i sin nyeste versjon – 4.x). Å måtte legge til ekstra avhengighet på grunn av en slik pakke er irriterende, derfor prøver jeg alltid å finne ut hva jQuery gjør for den oppgitte pakken. Når du har fått den informasjonen, kan du gjenoppbygge funksjonaliteten med vanilla JS ELLER et annet rammeverk og bli kvitt jquery etterpå.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.