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.

novaCapta

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)

Wer benötigt ein Intranet?

ESG-Tagebuch | Wissenstransfer & Kommunikation | Teil 2

Webcast: IASP – Nie wieder IBM Audit

Webinar: Looker Business Intelligence

Globale Performance, lokale Stärke: OVHcloud macht’s möglich

NIS2 kommt: So bereiten Sie sich optimal vor

ChatGPT & Co: Oktober-Benchmarks für Sprachmodelle

ChatGPT & Co: November-Benchmarks für Sprachmodelle

ChatGPT & Co: September-Benchmarks für Sprachmodelle

Web Analytics

Neues Datenschutzgesetz – Schutz vor Sanktionen dank IAM

ChatGPT & Co: Dezember-Benchmarks für Sprachmodelle

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

Mit End-to-End Testing zur einwandfreien Webanwendung

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

Migration von HOST-Anwendungen zu AWS: Modernisierung

Atlassian passt Preise für Lizenzen an

Application Development für Individualsoftware

Tipps und Tricks mit Entity Framework

Siemens AG: SharePoint statt Excel bei komplexen Formularen

IBM Cloud Pak for Data Accelerator

Wieso braucht es Change Management?

Graphentechnologie

Geschäftstransformation dank App Modernization

NIS2 Compliance Navigator

Dresscode und eBagTag - Schutzkleidung maßgeschneidert

Expert Consultant für IAM/ Cyber Security (w/m/d)

Projektleiter im Bereich Cyber Security/ IAM (w/m/d)

Power App für das hybride Büro

Microsoft Teams: mehr als Videotelefonie und Chat

Was Sie beim nächsten IT-Projekt beachten sollten

Ohne Programmierkenntnisse zum Entwickler werden

Die Awareness kommt mit dem ersten Cyberangriff

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

Zentralisiertes Logging – Simpler Logging-Stack mit Graylog

Angular Route-Guards

Die Bedeutung einer Governance

Hat Ihr Unternehmen einen Informations-Lebenszyklus?

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

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

Nutzung der SharePoint REST API mit Microsoft Flow

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

Change Management in IT-Projekten

Farben zur Optimierung des SharePoint-Kalender

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

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

Grundlagen der Gestaltung

GraphQL – Die Alternative zu REST

Anhänge nach Datentyp in PowerApps einschränken

Testen von Angular Anwendungen mit Cypress

PDF-Konverter in Power Automate

Beispiele