novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien

Braucht man jQuery denn wirklich?

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');
    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: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 23.02.15

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

Warum der Einsatz von Inline-CSS bzw. JavaScript-Code schlecht ist, da Dinge wie Caching, DRY-Prinzip, Wartbarkeit und Media-Queries gänzlich außer Acht gelassen werden.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 07.06.17

Handlebars.js – Semantische Template Library

Handlebars.js ist eine Template-Engine für JavaScript. Sie ermöglicht dem Entwickler, mit Hilfe von semantischen Templates Business-Logik und HTML zu trennen.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Referenz

Siemens AG: SharePoint statt Excel bei komplexen Formularen

Siemens ersetzt komplexe Excel-Tabellen für die Verwaltung und Auswertung der Projekt- und Arbeitsstunden durch intuitive SharePoint-Anwendung – für mehr Übersicht und einfache Bedienung.

Blog 27.05.20

Wieso braucht es Change Management?

Immer häufiger liest man von der Wichtigkeit von Change & Adoption. Doch wieso braucht es das und wie gehe ich das an?

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 30.07.15

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 4

Dieser letzte Teil der Artikelserie befasst sich mit dem Schutz von Dokumenten innerhalb von SharePoint.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 08.07.15

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 2

Dieser Teil der Artikelserie befasst sich mit der Anwendung von den Microsoft RMS in der Praxis.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 30.06.15

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 1

Diese Artikelserie befasst sich mit der Einrichtung und Verwendung der Rights Management Services (RMS) von Microsoft, die eine sichere Verschlüsselung von Dateien bieten.

Close up of female hands while typing on laptop
Blog 24.09.18

Grundlagen der Gestaltung

Die Gestaltgesetze der Wahrnehmungspsychologie

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 13.03.17

Corporate News – Das zentrale Medium interner Kommunikation

Um die Akzeptanz des unternehmenseigenen Intranets zu steigern, sind Corporate News ein erster Schritt, um Neuigkeiten, Strategie und Strukturen gleichmäßig zu kommunizieren.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 17.12.14

Multi Factor Authentication (Azure und SharePoint)

Microsoft führt mit der Multi Faktor Authentisierung (MFA) eine weitere und kostenlose Authentifizierungsebene zu in Office 365 hinzu.

Close up shot of female hands typing on laptop
Blog 15.05.17

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

Hier lesen Sie die sechs wichtigsten Argumente, warum Sie Office 365 mit SharePoint für Ihre Intranetlösung gegenüber TYPO3 bevorzugen sollten.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 15.10.19

GraphQL – Die Alternative zu REST

GraphQL ist eine Abfragesprache für APIs zur Ausführung von Abfragen mit Hilfe eines für die Daten definierten Typensystems. In dieser kleinen Blog-Serie schauen wir uns einfache Queries und Mutations an.

Blue sky and clouds
Blog 09.12.15

Vorgesetzte in Nintex per LDAP-Abfrage ermitteln

"Meine Sekretärin erledigt das für mich." Es ist der Klassiker der Workflows: Die Genehmigung. Neu im novaCapta Blog ► Mit Nintex Vorgesetzte per LDAP-Abfrage ermitteln ✓ So funktioniert's ✓ Jetzt nachlesen!

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 24.08.15

CQRS in ASP.Net MVC mit Entity Framework

Die Entwicklung von Anwendungen in einem mehrschichtigen Aufbau hat sich etabliert. Design Patterns wie MVC schaffen Lösungen.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 20.07.15

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 3

Dieser Teil der Artikelserie befasst sich mit der RMS-Freigabeanwendung, welche Dateien jeglichen Dateityps verschlüsseln kann.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 14.06.16

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

„Office 365 Planner“ ist das neue Tool von Microsoft, mit dem sich Zusammenarbeit und Aufgabenverteilung in Teams organisieren lässt. Was kann der neue Office 365 Planner – und was kann er nicht

Schreibtisch
Blog 15.10.19

Anhänge nach Datentyp in PowerApps einschränken

Eine immer wieder auftauchende Anfrage bei digitalen Prozessen ist die Beschränkbarkeit von Anhangsdokumenten. Glücklicherweise lässt sich diese Funktionalität relativ unkompliziert mit wenigen kleinen Formeln in PowerApps nachbauen.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 14.02.16

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

SharePoint ist eine vielseitige und mächtige technologische Plattform mit vielen Funktionen. Unseren fünf Expertentipps erhöhen die Adoption.

News der novaCapta
Blog 26.10.15

Gefilterte Ansicht über Unterschiede in mehreren Spalten

Tipps & Tricks zu SharePoint ► Begrenzte Filtermöglichkeiten in Ansichten umgehen & gefilterte Ansicht über Unterschiede in mehreren Spalten

Close up of female hands while typing on laptop
Blog 08.11.16

Was ist Application Lifecycle Management (ALM)?

Application Lifecycle Management beschreibt einen ganzheitlichen Ansatz, der eine Anwendung während allen Phasen der Software begleitet.