# waarom bespreken we zelfs de toekomst van jQuery?

mis de video boven het artikel niet!

omdat jQuery nog steeds het grootste deel van de frontend weblogica draait! Het vermogen ongeveer 70% van de top webpagina ‘ s en 20% van het hele web (bron). Dat is enorm!

maar dit maakt de vraag over de toekomst nog vreemder.

jQuery heeft problemen. Het is overal en het is niet echt toekomstbestendig. Het was een geweldige tool toen het werd uitgebracht terug in 2006, maar de kernproblemen het vast terug op het moment zijn geen problemen meer. In plaats daarvan, kunt u nu lopen in veel meer problemen bij het gebruik van jQuery.

om dit te begrijpen, laten we eens kijken naar de problemen die jQuery in 2006 heeft opgelost.

JavaScript was een beetje kapot en browsers implementeerden het heel anders

Dit was een van de belangrijkste dingen waarmee jQuery hielp. Opeens had je een makkelijk te gebruiken API waarmee je de DOM kon manipuleren. En nog beter dan dat: dezelfde API werkte in alle grote browsers!

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

JavaScript en het web als geheel waren veel minder volwassen

jQuery stond ontwikkelaars toe om gewoon “meer te doen” op het web – op de frontend om precies te zijn. Het maken van boeiende gebruikersinterfaces (waarvoor je JavaScript nodig hebt) was makkelijker omdat je een goed gedocumenteerde API kon gebruiken. Het animeren van elementen, het toevoegen en verwijderen van inhoud, het veranderen van stijlen en het opnieuw bestellen van items was aanzienlijk gemakkelijker te bereiken dan met Vanilla JavaScript. jQuery voegde ook een krachtige en toch toegankelijke Ajax API die het verzenden van achtergrond verzoeken gemakkelijk ook gemaakt. Dit is een kern bouwsteen van JavaScript-driven UI ‘ s omdat je niet hoeft om een nieuwe pagina te laden op elke gebruiker actie en kan laden of manipuleren server-side gegevens achter de schermen.

    leer Vue.js

    Vue.js maakt het bouwen van reactieve webpagina ‘ s eenvoudig. Een mooie syntaxis + krachtige functies-dat is niet het slechtste pakket dat je kon krijgen.

    Learn React

    React is een geweldig alternatief voor Vue.js. Het is extreem populair en je moet het absoluut niet missen!kenmerken

    Learn Angular

    Angular started it all! Leer het kader dat de moeder is van React.js en Hog!

# Wat is er veranderd?

de problemen opgelost door jQuery zijn geen problemen meer.

JavaScript is gerijpt, browsercompatibiliteit is veel beter geworden. We hebben een levendig frontend-ontwikkelingsecosysteem met duizenden pakketten en tools, we kunnen veel krachtigere Ajax-bibliotheken zoals Axios gebruiken als we dat willen.

Dit betekent niet dat alles geweldig is, maar de kernproblemen die door jQuery zijn opgelost, bestaan niet echt meer.

in plaats daarvan is jQuery nu een tool die vaak (niet altijd natuurlijk) wordt gebruikt door minder ervaren webontwikkelaars die nooit de overstap maakten naar Vanilla JavaScript of frameworks zoals Angular of React.

en dat is belangrijk om te begrijpen door de manier waarop: we hebben het niet alleen over jQuery vs hoekig. Vanilla JavaScript is een echt alternatief!

terwijl Dom traversal en manipulatie veel moeilijker was in 2006, kregen we nu veel functionaliteiten zoals querySelector ingebouwd in vanilla JavaScript. Deze dingen werken en ze werken zelfs via browsers.

als je de mogelijkheid hebt om Vanilla JavaScript te gebruiken in plaats van in principe hetzelfde te bereiken met jQuery, is het natuurlijk beter om de vanilla optie te gebruiken. U bespaart het extra pakket downloaden en je hoeft niet te leren een extra syntaxis.

# het is niet alleen Vanilla JavaScript…

Het is echter niet alleen Vanilla JavaScript. We hebben tegenwoordig gewoon betere alternatieven.

Vanilla JavaScript heeft duidelijk nog steeds zijn grenzen. Als je een complexe gebruikersinterface bouwt met veel logica geà mplementeerd via JavaScript, kom je snel in situaties terecht waar je in wezen een soort spaghetti code moet schrijven. Het beheren van DOM state is immers moeilijk.

en niet alleen dat. Je komt regelmatig in situaties terecht waar je dom traversal logica breekt als je ooit besluit om je HTML code opnieuw te bestellen (of nieuwe elementen te introduceren).

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

deze code werkt niet meer als u de HTML-code op deze manier wijzigt.

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

en hetzelfde zou gelden voor Vanilla JavaScript traversal technieken.

Uiteraard kunt u code schrijven die nog steeds werkt in het bovenstaande scenario. Maar het kan dan breken onder andere omstandigheden. Of je eindigt met een vrij lange keten van traversale methoden om veilig te selecteren wat je van plan bent te manipuleren. En dit wordt alleen maar moeilijker als u handmatig DOM-elementen te maken of te verwijderen via jQuery.

Als u ooit een use – case had waarbij u elementen dynamisch moest toevoegen en verwijderen – laten we zeggen gebaseerd op een JavaScript – array met gegevens-dan weet u welke pijn daaraan verbonden is bij het gebruik van jQuery of Vanilla JavaScript. Laat staan als je dan wilt werken met deze elementen (bijvoorbeeld voeg Klik luisteraars of stijlen).

# Frameworks to the rescue!

daar is een oplossing voor!

JavaScript frameworks zoals Angular, React (oh, dat is een bibliotheek eigenlijk – vergeef me reageren mensen) of Vue bijvoorbeeld.

al deze frameworks hebben een fundamenteel verschil ten opzichte van jQuery (en vanilla JavaScript): je schrijft geen code om handmatig door de DOM te navigeren.

u gebruikt in plaats daarvan een declaratieve benadering.

wat betekent dit?

wel, hier is hoe u veilig de HTML – inhoud van eerder in dit artikel kunt selecteren en manipuleren-deze keer met behulp van 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', },})

zoals u kunt zien volgt Vue duidelijk een andere filosofie dan jQuery. Hetzelfde geldt trouwens voor React en Angular.

voor de rest van dit artikel zal ik Vue gebruiken voor de voorbeelden – simpelweg omdat het een zeer mooie syntaxis heeft en het gemakkelijk is om mee te beginnen. Importeer Vue in uw webpagina en je bent klaar om te gaan.

maar ook hoekig en React volgen vergelijkbare benaderingen. Als u meer wilt weten over deze, heb ik nuttige bronnen voor u:

  • hoek – de complete gids
  • React-de Complete gids
  • hoek vs reageren vs Vue

en natuurlijk, in het geval dat u dieper in het Vue wilt duiken, heb ik ook bronnen hierover: Vue – de Complete gids.

ze richten zich er allemaal op dat u eenvoudig plaatsen in de DOM kunt markeren waar inhoud moet worden weergegeven. Je hoeft het pad naar die plek niet te beschrijven – het raamwerk zal het voor je uitzoeken!

# maar de Vue-oplossing is langer!

als je de jquery-oplossing vergelijkt met de Vue-oplossing, zie je duidelijk dat de vue-aanpak iets langer is (in termen van code regels geschreven).

maar dit was een heel eenvoudig voorbeeld! Meer complexe voorbeelden snel groeien in omvang en, nog erger, complexiteit als het gaat om jQuery code vereist. Maar niet voor Hog (of de andere frameworks).

dat komt omdat de algemene aanpak zo verschillend is. Als u alleen uw gegevensstructuur beschrijft, uw logica en hoe u uw gegevens verbindt met de DOM (uw template zogezegd), hoeft u niet zoveel extra code te schrijven wanneer uw HTML-code of bedrijfslogica complexer wordt.

voor jQuery is dat echter iets anders. Als je elementen moet bereiken die diep genest zijn of als je complexe dingen moet doen zoals door looping door te creëren elementen, eindig je snel met de meer complexe (en ook foutgevoelige) code die je eerder zag.

Dit levert:

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

de geneste <div> elementen zijn aanklikbaar en de highlighted CSS-klasse zal aan elk element worden toegevoegd na het klikken.

beschouw het Vue (en HTML) fragment dat hetzelfde zou bereiken:

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

Het is nog steeds een aantal regels met codes die je hier nodig hebt, maar het is zo veel gemakkelijker te begrijpen, te onderhouden en te bewerken! U geeft aan hoe uw HTML-code er uiteindelijk uit moet zien, u beschrijft uw gegevens en beheert uwselected staat in uw JS-code.

De magie gebeurt met behulp van zogenaamde richtlijnen – v-for (voor looping), v-on (Voor het luisteren van gebeurtenissen) en v-bind (voor het veranderen van het HTML-element) doen hier al het werk. React en Angular hebben over het algemeen vergelijkbare oplossingen, hoewel React geen richtlijnen gebruikt. Het zal je nog steeds niet dwingen om handmatig alle code te schrijven voor het selecteren en maken van elementen.

naarmate uw (frontend) web-app groeit en u nog complexere UI ‘ s bouwt, zult u van een dergelijke declaratieve aanpak houden die u niet dwingt tot eindeloze, niet te onderhouden ketens van css()$(...) en appendTo() aanroepen.

# Is jQuery minstens kleiner?

Vue biedt een duidelijk andere syntaxis – het doet veel van het zware werk met betrekking tot DOM toegang en manipulatie voor u.

dat moet duidelijk een prijs hebben, nietwaar? jQuery is zeker kleiner, toch?

Well … Nee. Dat is niet het geval.

vanaf maart 2018 jQuery weegt 29kb minified en gzipped terwijl Vue komt op 30kb minified en gzipped.hoe zit het met React en Angular?

React bestaat eigenlijk uit twee pakketten: ReactDOM en React zelf. Gecombineerd, je moet ongeveer downloaden 34kb minified + gzipped om het up and running.

hoek is veel groter dan dat omdat hoek een veel groter framework is dat vooral geschikt is voor toepassingen met grote ondernemingen. Voor dergelijke soorten apps, het zal winnen tegen jQuery niet vanwege het pakket grootte, maar vanwege alle pijn die het bespaart u.

# dus … nooit meer jQuery gebruiken?

de vraag is nu natuurlijk of je altijd Vue, hoekig of reageren moet gebruiken. Of zijn er use-cases waar het gebruik van jQuery nog steeds zinvol is?

in het algemeen geloof ik dat de tijd van jQuery tot een einde komt. Tenminste in zijn huidige vorm.

je kunt het nog steeds kiezen voor triviale gevallen, maar waarom zou je niet gewoon vanilla JavaScript gebruiken voor dat en opslaan van de extra 30kbs + de extra syntaxis die je moet krijgen in? Je zult een betere web developer als je weet vanilla JS anyways.

jQuery ziet natuurlijk nog steeds veel gebruik in veel oudere web apps en het zal er blijven voor een tijdje.

Als u aan dergelijke web apps moet werken, zult u waarschijnlijk geen manier vinden om jQuery te omzeilen voor nu en het leren van het kan dus nog steeds iets waard zijn.

veel populaire pakketten van derden vertrouwen ook nog steeds op jQuery-Bootstrap, het CSS framework, doet dit bijvoorbeeld (helaas doet het zelfs in zijn nieuwste versie-4.x). Het toevoegen van de extra afhankelijkheid als gevolg van een dergelijk pakket is vervelend, vandaar dat ik persoonlijk altijd proberen om uit te vinden wat precies jQuery doet voor dat gegeven pakket. Zodra je dat stukje informatie, kunt u de functionaliteit opnieuw op te bouwen met vanilla JS of een ander kader en met succes te ontdoen van jQuery daarna.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.