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?

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

Testen von Angular Anwendungen mit Cypress

Cypress ist ein End-to-End Testing Framework, mit dem man einfache Tests erstellen kann, die in Echtzeit ausgeführt werden. Mit Cypress kann man auch Snapshots von den einzelnen Schritten während der Testausführung sehen. Tests können schnell erstellt werden, ohne dass bestimmte Server oder Driver benötigt 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 01.07.20

PDF-Konverter in Power Automate

Kann ich mittels Microsoft Power Automate und einer SPFx-Anwendung ohne größere Probleme einen PDF-Konverter erstellen? Die einfache Antwort: Ja. Und auch die Ausführliche gibt’s hier.

Programmer Woman Coding On Computer
Blog 30.09.21

Ohne Programmierkenntnisse zum Entwickler werden

Bei der Digitalisierung von Unternehmen erfordern passgenaue Business-Apps und automatisierte Workflows bislang ­erheblichen Entwicklungsaufwand. Microsoft setzt dem die Power Platform entgegen, mit der sich auch ohne Programmierkenntnisse gleichwertige Geschäftsanwendungen erstellen lassen sollen.

Eine Angestellte lädt auf ihrem Handy die Microsoft Teams App für digitale Zusammenarbeit herunter.
Blog 27.05.21

Microsoft Teams: mehr als Videotelefonie und Chat

Corona treibt viele Arbeitnehmer ins Homeoffice – und zu Microsoft Teams. Eine Umfrage der novaCapta zeigt, dass Teams mehr Potenzial bietet als viele wissen. Wie Teams den Alltag wirklich erleichtert, verrät Andy Frei, Mitglied der Geschäftsleitung novaCapta CH, im Interview.

Close up of female hands while typing on laptop
Blog 31.12.14

Qualitätsmanagement - Dokumentation verwalten mit SharePoint

Qualitätsmanagement-Dokumente zu verwalten wird schnell unübersichtlich und kompliziert. Wir haben eine Lösung entwickelt, die das Dokumentenmanagement deutlich vereinfacht.

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 10.02.16

Produktiver lernen mit SharePoint

Bringt die aktuelle Version der SharePoint-Plattform so viele neue Features mit, es zu einem perfekten Learning Management System zu machen? Wir beleuchten es.

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

Spaltenformatierung in SharePoint: Column formatting vs. JS

Eine Gegenüberstellung der Spaltenformatierung von JSLink zu der neueren Methode Column formating in Office 365.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 08.07.15

Change Management in IT-Projekten

Viele IT-Projekte scheitern am Zusammenspiel verschiedener Faktoren, wie unklare Ziele, ungenügende Ressourcen, schlechte Kommunikation und fehlende User-Akzeptanz.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 21.01.16

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

Die Generation Y stellt im Arbeitsumfeld neue Anforderungen an Unternehmens-Software und -Systeme. Unsere fünf Tipps, um die Adoption einer Software erhöhen.

Blue sky and clouds
Blog 12.08.14

Farben zur Optimierung des SharePoint-Kalender

Auch in SharePoint kann man Kategorien für Teamkalender-Einträge farblich abheben und damit die Lesbarkeit erhöhen. Wir zeigen Ihnen, wie das geht.

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 28.05.18

Struktureller Aufbau eines Angular Modules

Dieser Blogbeitrag beschäftigt sich mit dem strukturellen Aufbau eines Angular Modules und der Kommunikation der einzelnen Komponenten.

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

Drei Tipps für mehr SharePoint-Begeisterung

Wir geben Tipps zur der Microsoft Serverplattform für Content Management, (Social)-Collaboration, Portalfunktion, Business Intelligence und Enterprise Search.

Blue sky and clouds
Blog 04.06.14

Hat Ihr Unternehmen einen Informations-Lebenszyklus?

Jede Information hat eine Aktualitätsphase, eine Nachschlag-Phase, eine Archiv-Phase und einen Obsoleszenz-Punkt. Steuern Sie den Lebenszyklus Ihrer Informationen?

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.12.18

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

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

Team of programmers working in office
Blog 26.08.21

Was Sie beim nächsten IT-Projekt beachten sollten

Unternehmen sind in ihrer digitalen Transformation erfolgreicher, wenn sie bei der Umsetzung auf ein wirksames Change Management setzen. Wie der Wandel gelingt, verrät Nora Sommer, Senior Business Consultant bei der novaCapta, im Interview.

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

Nutzung der SharePoint REST API mit Microsoft Flow

Durch Zugriffe über die REST API lassen sich viele Vorgänge mit Microsoft Flow automatisieren.