# Warum diskutieren wir überhaupt über die Zukunft von jQuery?

Verpassen Sie nicht das Video über dem Artikel!

Weil jQuery immer noch den Großteil der Frontend-Weblogik ausführt! Es versorgt rund 70% der Top-Webseiten und 20% des gesamten Webs (Quelle). Das ist riesig!

Aber das macht die Frage nach seiner Zukunft noch seltsamer.

jQuery hat Probleme. Es ist überall und es ist nicht wirklich zukunftssicher. Es war ein erstaunliches Tool, als es 2006 veröffentlicht wurde, aber die Kernprobleme, die es damals behoben hat, sind keine Probleme mehr. Stattdessen können Sie jetzt bei der Verwendung von jQuery auf viel mehr Probleme stoßen.

Um dies zu verstehen, betrachten wir die Probleme, die jQuery 2006 behoben hat.

JavaScript war irgendwie kaputt und Browser implementierten es sehr unterschiedlich

Dies war eines der wichtigsten Dinge, bei denen jQuery geholfen hat. Plötzlich hatten Sie eine benutzerfreundliche API, mit der Sie das DOM manipulieren konnten. Und noch besser: Die gleiche API funktionierte in allen gängigen Browsern!

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

JavaScript und das Web als Ganzes waren viel weniger ausgereift

jQuery ermöglichte es Entwicklern, im Web einfach „mehr zu tun“ – genauer gesagt im Frontend. Das Erstellen ansprechender Benutzeroberflächen (für die Sie JavaScript benötigen) war einfacher, da Sie eine gut dokumentierte API verwenden konnten. Das Animieren von Elementen, das Hinzufügen und Entfernen von Inhalten, das Ändern von Stilen und das Neuordnen von Elementen war erheblich einfacher als mit Vanilla JavaScript. jQuery hat auch eine leistungsstarke und dennoch zugängliche Ajax-API hinzugefügt, die das Senden von Hintergrundanforderungen ebenfalls vereinfacht. Dies ist ein Kernbaustein von JavaScript-gesteuerten Benutzeroberflächen, da Sie nicht bei jeder Benutzeraktion eine neue Seite laden müssen und serverseitige Daten hinter den Kulissen laden oder bearbeiten können.

    Lerne Vue.js

    Vue.js macht das Erstellen reaktiver Webseiten einfach. Eine schöne Syntax + leistungsstarke Funktionen – das ist nicht das schlechteste Paket, das Sie bekommen könnten.

    Learn React

    React ist eine großartige Alternative zu Vue.js. Es ist sehr beliebt und Sie sollten es absolut nicht verpassen!

    Lerne Angular

    Angular hat alles angefangen! Lernen Sie das Framework kennen, das die Mutter von React ist.js und Vue!

# Was hat sich geändert?

Die von jQuery behobenen Probleme sind keine Probleme mehr.

JavaScript ist ausgereift, die Browserkompatibilität ist viel besser geworden. Wir haben ein dynamisches Frontend-Entwicklungs-Ökosystem mit Tausenden von Paketen und Tools, wir können viel leistungsfähigere Ajax-Bibliotheken wie Axios verwenden, wenn wir wollen.

Dies bedeutet nicht, dass alles großartig ist, aber die Kernprobleme, die von jQuery behoben wurden, existieren nicht mehr wirklich.Stattdessen ist jQuery jetzt ein Tool, das oft (natürlich nicht immer) von weniger erfahrenen Webentwicklern verwendet wird, die nie zu Vanilla JavaScript oder Frameworks wie Angular oder React gewechselt sind.

Und das ist übrigens wichtig zu verstehen: Wir sprechen nicht nur über jQuery vs Angular. Vanilla JavaScript ist eine echte Alternative!

Während DOM Traversal und Manipulation im Jahr 2006 viel schwieriger war, haben wir jetzt viele Funktionen wie querySelector in Vanilla JavaScript integriert. Diese Dinge funktionieren und sie funktionieren sogar über Browser hinweg.

Wenn Sie die Möglichkeit haben, Vanille-JavaScript zu verwenden, anstatt im Grunde dasselbe mit jQuery zu erreichen, ist es offensichtlich besser, die Vanille-Option zu verwenden. Sie sparen den zusätzlichen Paketdownload und müssen keine zusätzliche Syntax lernen.

# Es ist nicht nur Vanille-JavaScript …

Es ist jedoch nicht nur Vanille-JavaScript. Wir haben heutzutage einfach bessere Alternativen.

Vanilla JavaScript hat eindeutig noch seine Grenzen. Wenn Sie eine komplexe Benutzeroberfläche mit viel Logik erstellen, die über JavaScript implementiert ist, geraten Sie schnell in Situationen, in denen Sie im Wesentlichen eine Art Spaghetti-Code schreiben müssen. Die Verwaltung des DOM-Zustands ist schließlich schwierig.

Und nicht nur das. Sie stoßen regelmäßig auf Situationen, in denen Ihre DOM-Traversal-Logik bricht, wenn Sie sich jemals dazu entschließen, Ihren HTML-Code neu zu ordnen (oder neue Elemente einzuführen).

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

Dieser Code funktioniert nicht mehr, wenn Sie den HTML-Code wie folgt ändern.

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

Und das gleiche gilt für Vanille-JavaScript-Traversaltechniken.

Natürlich können Sie Code schreiben, der im obigen Szenario immer noch funktioniert. Aber es könnte dann unter anderen Umständen brechen. Oder Sie haben eine ziemlich lange Kette von Traversal-Methoden, um sicher auszuwählen, was Sie manipulieren möchten. Dies wird nur schwieriger, wenn Sie DOM-Elemente manuell über jQuery erstellen oder entfernen.

Wenn Sie jemals einen Anwendungsfall hatten, in dem Sie Elemente dynamisch hinzufügen und entfernen mussten – sagen wir basierend auf einem JavaScript-Array, das Daten enthält -, kennen Sie den Schmerz, der damit verbunden ist, wenn Sie jQuery oder Vanilla JavaScript verwenden. Lassen Sie in Ruhe, wenn Sie dann mit diesen Elementen arbeiten möchten (z. B. Klick-Listener oder Stile anhängen).

# Frameworks zur Rettung!

Dafür gibt es eine Lösung!

JavaScript-Frameworks wie Angular, React (oh, das ist eigentlich eine Bibliothek – verzeihen Sie mir React-Leute) oder Vue zum Beispiel.

Alle diese Frameworks haben einen grundlegenden Unterschied zu jQuery (und Vanilla JavaScript): Sie schreiben keinen Code, um manuell durch das DOM zu navigieren.

Sie verwenden stattdessen einen deklarativen Ansatz.

Was bedeutet das?

Nun, so können Sie den HTML-Inhalt von früher in diesem Artikel sicher auswählen und bearbeiten – diesmal mit 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', },})

Wie Sie sehen können, folgt Vue eindeutig einer anderen Philosophie als jQuery. Das gleiche gilt übrigens für React und Angular.

Für den Rest dieses Artikels werde ich Vue für die Beispiele verwenden – einfach weil es eine sehr schöne Syntax hat und es einfach ist, damit zu beginnen. Importieren Sie Vue in Ihre Webseite und Sie können loslegen.

Aber Angular und React folgen auch vergleichbaren Ansätzen. Wenn Sie mehr darüber erfahren möchten, habe ich hilfreiche Ressourcen für Sie:

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

Und natürlich, falls Sie tiefer in Vue eintauchen möchten, habe ich auch Ressourcen dazu: Vue – The Complete Guide.

Sie alle konzentrieren sich darauf, dass Sie einfach Stellen im DOM markieren können, an denen Inhalte angezeigt werden sollen. Sie müssen den Weg zu diesem Ort nicht beschreiben – das Framework wird es für Sie herausfinden!

# Aber die Vue-Lösung ist länger!

Wenn Sie die jQuery-Lösung mit der Vue-Lösung vergleichen, sehen Sie deutlich, dass der Vue-Ansatz etwas länger ist (in Bezug auf die geschriebenen Codezeilen).

Aber das war ein sehr einfaches Beispiel! Komplexere Beispiele wachsen schnell an Größe und, noch schlimmer, Komplexität, wenn es um jQuery-Code geht. Aber nicht für Vue (oder die anderen Frameworks).

Das liegt daran, dass der allgemeine Ansatz so unterschiedlich ist. Wenn Sie nur Ihre Datenstruktur, Ihre Logik und die Verbindung Ihrer Daten mit dem DOM (sozusagen Ihrer Vorlage) beschreiben, müssen Sie nicht so viel zusätzlichen Code schreiben, wenn Ihr HTML-Code oder Ihre Geschäftslogik komplexer wird.

Für jQuery ist das jedoch eine andere Sache. Wenn Sie Elemente erreichen müssen, die tief verschachtelt sind, oder wenn Sie komplexe Dinge wie das Durchlaufen von zu erstellenden Elementen ausführen müssen, erhalten Sie schnell den komplexeren (und auch fehleranfälligeren) Code, den Sie zuvor gesehen haben.

Dies ergibt:

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

Die verschachtelten <div> Elemente können angeklickt werden und die highlighted CSS-Klasse wird jedem Element beim Klicken hinzugefügt.

Betrachten Sie das Vue- (und HTML-) Snippet, das dasselbe erreichen würde:

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

Es ist immer noch eine Codezeile, die Sie hier benötigen, aber es ist so viel einfacher zu verstehen, zu pflegen und zu bearbeiten! Sie deklarieren, wie Ihr HTML-Code am Ende aussehen soll, beschreiben Ihre Daten und verwalten Ihren selected -Status in Ihrem JS-Code.

Die Magie geschieht mit Hilfe sogenannter Direktiven – v-for (zum Schleifen), v-on (zum Abhören von Ereignissen) und v-bind (zum Ändern des HTML-Elements) erledigen hier die ganze Arbeit. React und Angular haben im Allgemeinen vergleichbare Lösungen, obwohl React keine Direktiven verwendet. Sie müssen immer noch nicht den gesamten Code zum Auswählen und Erstellen von Elementen manuell schreiben.

Wenn Ihre (Frontend-) Web-App wächst und Sie noch komplexere Benutzeroberflächen erstellen, werden Sie einen solchen deklarativen Ansatz lieben, der Sie nicht in endlose, nicht wartbare Ketten von css()$(...) und appendTo() Aufrufen zwingt.

# Ist jQuery zumindest kleiner?

Vue bietet eine deutlich andere Syntax – es macht viel schweres Heben in Bezug auf DOM-Zugriff und Manipulation für Sie.

Das muss doch seinen Preis haben, oder? jQuery ist sicherlich kleiner, oder?

Nun … nein. Das ist nicht der Fall.

Ab März 2018 wiegt jQuery 29kb minimiert und gzipped, während Vue bei 30kb minimiert und gzipped kommt.Was ist mit React und Angular?

React besteht eigentlich aus zwei Paketen: ReactDOM und React selbst. Kombiniert müssen Sie ungefähr 34kb minified + gzipped herunterladen, um es zum Laufen zu bringen.Angular ist viel größer als das, da Angular ein viel größeres Framework ist, das besonders für große Unternehmensanwendungen geeignet ist. Für solche Arten von Apps wird es gegen jQuery nicht wegen seiner Paketgröße gewinnen, sondern wegen all der Schmerzen, die es Ihnen erspart.

# Also … nie wieder jQuery benutzen?

Die Frage ist nun natürlich, ob man dann immer Vue, Angular oder React verwenden soll. Oder gibt es Anwendungsfälle, in denen die Verwendung von jQuery immer noch sinnvoll ist?

Im Allgemeinen glaube ich, dass die Zeit von jQuery zu Ende geht. Zumindest in seiner jetzigen Form.

Sie könnten es immer noch für triviale Fälle auswählen, aber warum würden Sie nicht einfach Vanilla JavaScript dafür verwenden und die zusätzlichen 30kbs + die zusätzliche Syntax speichern, in die Sie sich einarbeiten müssen? Sie werden ein besserer Webentwickler sein, wenn Sie Vanilla JS sowieso kennen.

jQuery wird offensichtlich immer noch in vielen älteren Web-Apps verwendet und wird dort noch einige Zeit bleiben.

Wenn Sie an solchen Web-Apps arbeiten müssen, werden Sie wahrscheinlich vorerst keinen Weg finden, jQuery zu umgehen, und es könnte daher immer noch etwas wert sein, es zu lernen.

Viele beliebte Pakete von Drittanbietern verlassen sich auch immer noch auf jQuery – Bootstrap, das CSS-Framework, tut dies zum Beispiel (leider sogar in seiner neuesten Version – 4.x). Die zusätzliche Abhängigkeit aufgrund eines solchen Pakets hinzufügen zu müssen, ist ärgerlich, daher versuche ich persönlich immer herauszufinden, was genau jQuery für dieses bestimmte Paket tut. Sobald Sie diese Informationen erhalten haben, können Sie die Funktionalität mit Vanilla JS oder einem anderen Framework neu erstellen und jQuery danach erfolgreich entfernen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.