Die Geschichte und das Erbe von jQuery

Die Geschichte und das Erbe von jQuery
jQuery — die beliebteste JavaScript-Bibliothek der Welt. Eine Gemeinschaft von Webentwicklern schuf sie Ende der 2000er Jahre, was zur Entstehung eines reichen Ökosystems von Websites, Plugins und Frameworks führte, die jQuery im Hintergrund nutzen.

In den letzten Jahren hat jedoch ihr Status als Hauptwerkzeug für die Webentwicklung nachgelassen. Lassen Sie uns betrachten, warum jQuery populär wurde und warum es aus der Mode gekommen ist, sowie in welchen Fällen es noch sinnvoll sein kann, es zur Erstellung moderner Websites zu verwenden.

Kurze Geschichte von jQuery

John Resig (John Resig) stellte die erste Version der Bibliothek 2005 vor und veröffentlichte sie 2006- auf einer Veranstaltung namens BarCampNYC. Auf der offiziellen jQuery-Website schrieb der Autor:

jQuery ist eine JavaScript-Bibliothek, die auf dem Motto basiert: Programmieren mit JavaScript sollte Spaß machen. jQuery nimmt häufige, wiederkehrende Aufgaben, entfernt überflüssigen Markup und macht sie kurz, elegant und verständlich.

jQuery bietet zwei wesentliche Vorteile. Der erste ist eine benutzerfreundliche API zur Manipulation von Webseiten. Insbesondere bietet sie leistungsstarke Methoden zur Auswahl von Elementen. Man kann nicht nur nach ID oder Klassen auswählen, jQuery ermöglicht es, komplexe Ausdrücke zu schreiben, um beispielsweise Elemente basierend auf ihren Beziehungen zu anderen Elementen auszuwählen.

// Select every item within the list of people within the contacts element
$('#contacts ul.people li');

Im Laufe der Zeit entwickelte sich der Auswahlmechanismus zu einer eigenständigen Bibliothek Sizzle.

Ein weiterer Vorteil der Bibliothek war, dass sie die Unterschiede zwischen den Browsern abstrahierte. In jener Zeit war es eine Herausforderung, Code zu schreiben, der in allen Browsern zuverlässig funktionierte.

Die fehlende Standardisierung bedeutete, dass Entwickler zahlreiche Unterschiede zwischen den Browsern und Randfälle berücksichtigen mussten. Schauen Sie sich diesen frühen jQuery-Code an und suchen Sie nach jQuery.browser. Hier ist ein Beispiel:

// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
        // Use the handy event callback
        jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );

// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {

        // Only works if you document.write() it
        document.write("<scr" + "ipt id=__ie_init defer=true " + 
                "src=javascript:void(0)></script>");

        // Use the defer script hack
        var script = document.getElementById("__ie_init");
        script.onreadystatechange = function() {
                if ( this.readyState == "complete" )
                        jQuery.ready();
        };

        // Clear from memory
        script = null;

// If Safari  is used
} else if ( jQuery.browser == "safari" ) {
        // Continually check to see if the document.readyState is valid
        jQuery.safariTimer = setInterval(function(){
                // loaded and complete are both valid states
                if ( document.readyState == "loaded" || 
                        document.readyState == "complete" ) {

                        // If either one are found, remove the timer
                        clearInterval( jQuery.safariTimer );
                        jQuery.safariTimer = null;

                        // and execute any waiting functions
                        jQuery.ready();
                }
        }, 10);
}

Dank jQuery konnten Entwickler die Verantwortung für all diese Fallstricke auf das Team übertragen, das die Bibliothek weiterentwickelt.

Später erleichterte jQuery die Implementierung komplexerer Technologien wie Animationen und Ajax. Die Bibliothek wurde praktisch zum Standard für die Abhängigkeiten von Websites. Heute sorgt sie dafür, dass ein großer Teil des Internets funktioniert. Laut W3Techs nutzen 74 % der Webseiten heute jQuery..

Die Kontrolle über die Entwicklung von jQuery wurde ebenfalls formalisierter. Im Jahr 2011 gründete das Team das jQuery Board.2012 verwandelte sich das jQuery Board in die jQuery Foundation..

Im Jahr 2015 fusionierte die jQuery Foundation mit der Dojo Foundation, um die JS Foundation zu gründen,die sich später mit der Node.js Foundation zur 2019OpenJS Foundation zusammenschloss, innerhalb derer jQuery eines der "bahnbrechenden Projektewar. Die Umstände haben sich geändert.

In den letzten Jahren hat jQuery jedoch

an Popularität eingebüßt. GitHubhat die Bibliothek aus dem Frontend seiner Website entfernt. Bootstrap v5wird jQuery loswerden, da es die "größte Client-Abhängigkeit für gewöhnliches JavaScript" ist (derzeit 30 KB groß, minifiziert und gepackt). Mehrere Trends in der Webentwicklung haben die Stellung von jQuery als notwendiges Werkzeug geschwächt.» (derzeit 30 KB groß, minifiziert und gepackt). Mehrere Trends in der Webentwicklung haben die Stellung von jQuery als unverzichtbares Werkzeug verringert.

Browser

Aus verschiedenen Gründen sind die Unterschiede und Einschränkungen von Browsern weniger bedeutend geworden. Erstens hat sich die Standardisierung verbessert. Die Hauptentwickler von Browsern (Apple, Google, Microsoft und Mozilla) arbeiten gemeinsam an Webstandards im Rahmen des Web Hypertext Application Technology Working Group.
Obwohl Browser in vielen wichtigen Punkten immer noch unterschiedlich sind, haben die Anbieter nun zumindest ein Mittel, um eine gemeinsame Basis zu finden und zu schaffen, anstatt einer permanenten Konkurrenz untereinander. Dementsprechend haben Browser-APIs neue Möglichkeiten gewonnen. Zum Beispiel Fetch API kann Ajax-Funktionen aus jQuery ersetzen:

// jQuery
$.getJSON('https://api.com/songs.json')
    .done(function (songs) {
        console.log(songs);
    })

// native
fetch('https://api.com/songs.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (songs) {
        console.log(songs);
    });

Methoden querySelector und querySelectorAll duplizieren die Auswahlwerkzeuge aus jQuery:

// jQuery
const fooDivs = $('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

Das Manipulieren von Elementklassen ist nun mit classList:

// jQuery
$('#warning').toggleClass('visible');

// native
document.querySelector('#warning').classList.toggle('visible');

Auf der Website You Might Not Need jQuery sind mehrere Situationen aufgeführt, in denen jQuery-Code durch nativen Code ersetzt werden kann. Einige Entwickler verwenden weiterhin jQuery, weil sie einfach nicht über die neuen APIs Bescheid wissen, aber wenn sie es tun, nutzen sie diese Bibliothek seltener.

Die Nutzung nativ verfügbarer Funktionen steigert die Leistung von Seiten. Viele Animationseffekte aus jQuery können nun weitaus effektiver mit CSS umgesetzt werden.

Ein weiterer Grund ist, dass Browser viel schneller aktualisiert werden als früher. In den meisten von ihnen wird eine „evergreen“ Aktualisierungsstrategie, mit Ausnahme von Apple Safari, angewendet. Sie können im Hintergrund aktualisiert werden, ohne dass der Benutzer eingreifen muss, und sind nicht an die Betriebssystem-Updates gebunden.

Das bedeutet, dass neue Funktionen der Browser und Fehlerbehebungen viel schneller verteilt werden, und Entwickler nicht warten müssen, bis der Anteil von Can I Use ein akzeptables Niveau erreicht. Sie können neue Features und APIs sicher nutzen, ohne jQuery oder Polyfills laden zu müssen.

Ein dritter Grund ist, dass Internet Explorer kurz vor der vollständigen Obsoleszenz steht. IE war schon lange eine Plage für die Webentwicklung weltweit. Die typischen Bugs waren weit verbreitet, und da IE in den 2000er Jahren dominierte und keine „evergreen“ Aktualisierungsstrategie verwendete, sind seine alten Versionen immer noch häufig anzutreffen.

2016 beschleunigte Microsoft das Ausscheiden von IE aus dem Betrieb, indem es die Unterstützung einstellte. Die Unterstützung für das Internet Explorer 11 und frühere Versionen wurde bereits eingestellt. Immer mehr Webentwickler können es sich leisten, die Kompatibilität mit IE zu ignorieren.

Selbst jQuery hat die Unterstützung für IE 8 und älter mit der Version 2.0 eingestellt, die 2013 veröffentlicht wurde. Obwohl in einigen Fällen noch Unterstützung für IE erforderlich ist, beispielsweise auf alten Webseiten, treten diese Situationen zunehmend seltener auf.Neue Frameworks

Seit der Einführung von jQuery sind viele Frameworks entstanden, darunter die modernen Spitzenreiter.

Sie bieten zwei wesentliche Vorteile gegenüber jQuery. React, Angular und VueErstens ermöglichen sie eine einfache Trennung der Benutzeroberfläche in Komponenten. Die Frameworks sind so konzipiert, dass sie die Darstellung und Aktualisierung der Seite übernehmen, während jQuery in der Regel nur zur Aktualisierung verwendet wird und der Server die Aufgabe hat, die Startseite bereitzustellen.

Andererseits ermöglichen die Komponenten von React, Angular und Vue eine enge Verknüpfung von HTML, Code und sogar CSS. Während wir den Code in viele eigenständige Funktionen und Klassen aufteilen, vereinfacht die Möglichkeit, die Benutzeroberfläche in wiederverwendbare Komponenten zu gliedern, den Aufbau und die Wartung komplexer Webseiten.

Andererseits ermöglichen die Komponenten von React, Angular und Vue eine enge Verbindung von HTML, Code und sogar CSS. Während wir die Codebasis in viele selbstständige Funktionen und Klassen unterteilen, vereinfacht die Möglichkeit, die Benutzeroberfläche in wiederverwendbare Komponenten zu teilen, den Aufbau und die Wartung komplexer Websites.

Ein weiterer Vorteil ist, dass neuere Frameworks eine deklarative Paradigmatik verfolgen, in der der Entwickler beschreibt, wie die Benutzeroberfläche aussehen soll, während das Framework alle notwendigen Änderungen vornimmt, um das gewünschte Ergebnis zu erzielen. Dieser Ansatz steht im Gegensatz zum imperativen Ansatz, der typisch für jQuery-Code ist.

Bei jQuery legen Sie die Schritte explizit fest, um Änderungen vorzunehmen. In einem deklarativen Framework sagen Sie hingegen: „Basierend auf diesen Daten sollte die Benutzeroberfläche so aussehen“. Dies kann das Schreiben von fehlerfreiem Code erheblich erleichtern.

Entwickler haben neue Ansätze für die Webentwicklung übernommen, weshalb die Popularität von jQuery gesunken ist.

Wann sollten Sie jQuery verwenden?

Wann genau folgt sollten Sie jQuery verwenden?

Wenn die Komplexität des Projekts steigt, ist es besser, mit einer anderen Bibliothek oder einem Framework zu beginnen, das eine sinnvolle Handhabung der Komplexität ermöglicht. Zum Beispiel, indem man die Benutzeroberfläche in Komponenten unterteilt. Der Einsatz von jQuery für solche Seiten mag zunächst akzeptabel erscheinen, aber es wird schnell zu Spaghetti-Code führen, bei dem man nicht mehr sicher ist, welcher Teil die jeweilige Seite beeinflusst.

Ich habe in einer solchen Situation erlebt, dass jede Änderungsanfrage sich wie eine große Herausforderung anfühlt. Man kann nicht sicher sein, dass man nichts kaputt macht, da die jQuery-Selektoren von der vom Server generierten HTML-Struktur abhängen.

Am anderen Ende der Skala stehen einfache Websites, die nur ein wenig Interaktivität oder dynamische Inhalte erfordern. In solchen Fällen würde ich jQuery nicht standardmäßig verwenden, da man mit nativen APIs viel mehr erreichen kann.

Selbst wenn ich etwas Leistungsstärkeres benötige, suche ich nach spezialisierten Bibliotheken, zum Beispiel axios für Ajax oder Animate.css für Animationen. Das ist einfacher, als das gesamte jQuery für eine minimale Funktionalität zu laden.

Ich denke, das beste Argument für den Einsatz von jQuery ist, dass es umfassende Funktionalitäten für die Frontend-Arbeit einer Website bietet. Anstatt eine Vielzahl von nativen APIs oder speziellen Bibliotheken zu lernen, können Sie einfach die jQuery-Dokumentation durchlesen und sofort produktiv werden.

Der imperative Ansatz skaliert schlecht, lässt sich aber leichter erlernen als der deklarative Ansatz anderer Bibliotheken. Für eine Website mit klar begrenzten Möglichkeiten ist es besser, jQuery zu verwenden und einfach zu arbeiten: Die Bibliothek erfordert keine komplizierte Zusammenstellung oder Kompilierung.

Darüber hinaus ist jQuery in Situationen vorteilhaft, in denen Sie sicher sind, dass die Website sich nicht weiter verkomplizieren wird, und wenn Ihnen die native Funktionalität, die sicherlich mehr Code als jQuery erfordert, nicht wichtig ist.

Sie können diese Bibliothek auch verwenden, wenn Sie alte IE-Versionen unterstützen müssen. Dann wird jQuery für Sie so nützlich sein wie zu der Zeit, als IE der beliebteste Browser war.

Ein Blick in die Zukunft

jQuery wird noch lange nicht verschwinden. Es entwickelt sich aktiv weiter., und viele Entwickler ziehen es vor, die API zu verwenden, auch wenn native Methoden verfügbar sind. Die Bibliothek hat einer ganzen Generation von Entwicklern geholfen, Webseiten zu erstellen, die in allen Browsern funktionieren. Obwohl sie in vielen Aspekten durch neue Bibliotheken, Frameworks und Paradigmen ersetzt wurde, hat jQuery eine enorme positive Rolle bei der Schaffung des modernen Webs gespielt.

Sollte sich die Funktionalität von jQuery nicht wesentlich ändern, ist es durchaus wahrscheinlich, dass die Nutzung der Bibliothek in den nächsten Jahren langsam, aber stetig zurückgehen wird. Neue Webseiten werden in der Regel von Anfang an mit moderneren Frameworks erstellt, und die passenden Anwendungsszenarien für jQuery werden immer seltener.

Einigen gefällt die Geschwindigkeit, mit der Werkzeuge für die Webentwicklung veralten, nicht, aber für mich ist das ein Zeichen schnellen Fortschritts. jQuery hat es uns ermöglicht, vieles besser zu machen. Dasselbe gilt für ihre Nachfolger.

Quelle: habr.com

Kaufen Sie zuverlässiges Hosting für Websites mit DDoS-Schutz, VPS VDS-Server 🔥 Kaufen Sie zuverlässiges Hosting für Websites mit DDoS-Schutz, VPS VDS-Server | ProHoster