Braucht man jQuery denn wirklich?

Datum

19.08.2016

Dieser Beitrag wurde verfasst von:

Keine Frage, jQuery erleichtert uns Entwicklern das Leben ungemein. Doch trotzdem stellt sich immer wieder die Frage, ob jQuery wirklich immer benötigt wird oder man nicht doch mit nativem JavaScript besser beraten ist. Denn in den meisten Fällen geht es doch um Klassenhandling bzw. DOM-Manipulationen. Außerdem dürfen in der heutigen Zeit auf keinen Fall die mobilen Endgeräte außer Acht gelassen werden! Und besonders dort ist es wichtig, jedes Kilobyte zu sparen, damit die Seite auch bei schlechter Verbindung schnell geladen werden kann.

Klar kann man jetzt sagen, dass jQuery sämtliche Browser unterstützt und man keine aufwendigen Workarounds entwickeln muss, um zum Beispiel eine bestimmte Version des Internet Explorers nutzen zu können. Doch wir befinden uns mittlerweile im Jahre 2016, wo nicht mehr Browser wie IE 7 oder IE 8 unterstützt werden müssen. Moderne Browser bieten alle Funktionen, die gewöhnlich benötigt werden.

Mit Hilfe dieser Funktionen lassen sich auch sehr einfach die gewünschten Methoden von jQuery nachbauen. Einziger Nachteil ist, dass diese Funktionen zuerst implementiert werden müssen, doch beim Aufruf an sich sind die beiden Methoden identisch. Außerdem müssen die Methoden nur einmal entwickelt werden und lassen sich dann beliebig oft in weiteren Projekten verwenden.

Wie man in den folgenden Beispielen sieht, ist es nicht wirklich mehr zu schreiben, da die Methoden aus bestehen Projekten genommen werden können und die Methoden ähnlich aufgefunden werden. Dafür konnte man sich eine fast 100kB große Library sparen, die eine ganze Reihe an Methoden mit sich bringt, die in den meisten Fällen nicht von Nöten sind.

Beispiele

(function(win, doc) {

// getElem function

var getElem = function(selector){

return doc.querySelectorAll(selector);

};

// has class function

var hasClass = function (el, val) {

return el !== null && el.classList.contains(val);

};

// add class function

var addClass = function (el, val) {

if (el === null) {

return null;

}

return el.classList.add(val);

};

// remove class function

var removeClass = function (el, val) {

if (el === null) {

return null;

}

return el.classList.remove(val);

};

// javascript

var elem = getElem('CSS-Selector');

addClass(elem, 'css-klasse');

// jquery

var elem = $('CSS-Selector');

elem.addClass('css-klasse');

elem.removeClass('css-klasse');

} (window, document));

Performance

Im folgenden Beispiel wird der Unterschied zwischen JavaScript und jQuery sichtbar.

(function(win, doc) {

// performance testing function

var performanceTest = function (func, funcDesc) {

var start = new Date().getTime();

for (i = 0; i < 20000; ++i) {

func.apply();

}

var end = new Date().getTime(),

time = end - start;

console.log(funcDesc + ': ' + time);

};

var demoArray = document.querySelectorAll('div');

// jQuery each

var jqueryEach = function () {

$.each(demoArray, function (index, elem) {

$(this).attr('data-count', i);

});

};

// javascript each

var javaScriptEach = function () {

for (var i = 0, len = demoArray.length; i < len; i++) {

demoArray[i].setAttribute('data-count', i);

}

// Aufruf

performanceTest(javaScriptEach, 'javaScript')

performanceTest(jqueryEach, 'jquery')

} (window, document));

Fazit

Man sollte sich immer die Frage stellen:

„Brauche ich diese Library wirklich oder kann ich es auch mit nativem JavaScript schreiben?“

In vielen Fällen kann man die Frage mit „nein“ beantworten und damit können oft Dateien, Ladezeiten und Versionsprobleme umgangen werden. Ebenso ist der Performance-Gewinn unserer Applikation deutlich höher, was aber nicht heißen soll, dass Libraries wie jQuery, AngularJS, Backbone etc. keine Berechtigung haben, in einigen Fällen machen sie durchaus Sinn und sind eine nützliche Unterstützung.

Andy KurzBlog

Braucht man jQuery denn wirklich?

Beispiele​​

Performance

Fazit

Erfahren Sie mehr

Warum ist Inline-CSS und JavaScript-Code so schlecht?

Handlebars.js – Semantische Template Library

Multi Factor Authentication (Azure und SharePoint)

Mit End-to-End Testing zur einwandfreien Webanwendung

Deno – Das müsst ihr über die Laufzeitumgebung wissen

Tipps und Tricks mit Entity Framework

Siemens AG: SharePoint statt Excel bei komplexen Formularen

Wer benötigt ein Intranet?

Zentralisiertes Logging – Simpler Logging-Stack mit Graylog

Angular Route-Guards

Nutzung der SharePoint REST API mit Microsoft Flow

Was ist Application Lifecycle Management (ALM)?

Fünf Tipps für mehr SharePoint-Adoption in Unternehmen

Produktiver lernen mit SharePoint

Fünf Tipps für eine verbesserte Software-Adoption

Drei Tipps für mehr SharePoint-Begeisterung

Change Management in IT-Projekten

Corporate News – Das zentrale Medium interner Kommunikation

SharePoint vs. TYPO3 – Sechs Gründe für SharePoint-Intranet

Was kann der neue Office 365 Planner – und was kann er nicht

Xamarin – plattformübergreifende App-Entwicklung

Migration IBM Lotus Notes zu Microsoft SharePoint

Vorgesetzte in Nintex per LDAP-Abfrage ermitteln

CQRS in ASP.Net MVC mit Entity Framework

Gefilterte Ansicht über Unterschiede in mehreren Spalten

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 4

Farben zur Optimierung des SharePoint-Kalender

Die Bedeutung einer Governance

Hat Ihr Unternehmen einen Informations-Lebenszyklus?

Struktureller Aufbau eines Angular Modules

Spaltenformatierung in SharePoint: Column formatting vs. JS

Angular 5 Custom Filter in Angular Material Data-Table

Grundlagen der Datenmodellierung

Der wiederholte Bereich in Nintex Forms

SharePoint und Informationsarchitektur – worauf kommt es an?

Teams Extensions – Erstellen von Erweiterungen für Teams

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

SharePoint Framework Client-Side Webparts mit React

Umfragen in Teams mit Microsoft Forms

PDF-Konverter in Power Automate

Grundlagen der Gestaltung

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 3

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 2

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 1

Qualitätsmanagement - Dokumentation verwalten mit SharePoint

Anhänge nach Datentyp in PowerApps einschränken

Testen von Angular Anwendungen mit Cypress

GraphQL – Die Alternative zu REST

Die Awareness kommt mit dem ersten Cyberangriff

Microsoft Teams: mehr als Videotelefonie und Chat

Was Sie beim nächsten IT-Projekt beachten sollten

Ohne Programmierkenntnisse zum Entwickler werden

NIS2 kommt: So bereiten Sie sich optimal vor

Wieso braucht es Change Management?

Dresscode und eBagTag - Schutzkleidung maßgeschneidert

Power App für das hybride Büro

TIMETOACT realisiert integrierte Versicherungs-Software

Application Development für Individualsoftware

TIMETOACT erleichtert die Berichterstellung in IBM Cognos

Webinar: Google Cloud VMware Engine

Webcast: IASP – Nie wieder IBM Audit

Neues Datenschutzgesetz – Schutz vor Sanktionen dank IAM

Webinar: Looker Business Intelligence

Given/When/Then und ATDD - Eine Win-Win-Win-Situation!?

Das Einmaleins zum Aufbau eines Intranets

Wie Viva Learning Lernen im Arbeitsalltag möglich macht

Arbeitsgewohnheiten analysieren mit Viva Insights

Krombacher & novaCapta stoßen weitere Zusammenarbeit an

So gelingt die Reise in die Cloud

IT: Schlüssel zum erfolgreichen Nachhaltigkeitsmanagement?!

10 Must-haves im Change Management

Viva Engage: Unternehmenseigenes Social Network aufbauen

Mit Microsoft Copilot in die Zukunft des Arbeitens

"Ein Intranet ist keine Nebentätigkeit"

Dokumentenmanagement mit GPT optimieren

Beispiele