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

NIS2 kommt: So bereiten Sie sich optimal vor

ChatGPT & Co: Oktober-Benchmarks für Sprachmodelle

ChatGPT & Co: September-Benchmarks für Sprachmodelle

Web Analytics

Neues Datenschutzgesetz – Schutz vor Sanktionen dank IAM

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

Atlassian passt Preise für Lizenzen an

IBM Cloud Pak for Data Accelerator

Tipps und Tricks mit Entity Framework

Mit End-to-End Testing zur einwandfreien Webanwendung

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

Migration von HOST-Anwendungen zu AWS: Modernisierung

Graphentechnologie

Wieso braucht es Change Management?

Application Development für Individualsoftware

NIS2 Compliance Navigator

Siemens AG: SharePoint statt Excel bei komplexen Formularen

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

Dresscode und eBagTag - Schutzkleidung maßgeschneidert

Power App für das hybride Büro

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 1

Qualitätsmanagement - Dokumentation verwalten mit SharePoint

Change Management in IT-Projekten

Farben zur Optimierung des SharePoint-Kalender

Die Bedeutung einer Governance

Hat Ihr Unternehmen einen Informations-Lebenszyklus?

Zentralisiertes Logging – Simpler Logging-Stack mit Graylog

Angular Route-Guards

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

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

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 3

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 2

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

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

Umfragen in Teams mit Microsoft Forms

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

Advanced Admin Trial

Verringerung von Cyberrisiken: Was ist versicherbar?

Teil 5 - Einfluss von Cloud-native auf die Architekturarbeit

alpha trading solutions Kundenveranstaltung

Beispiele