Ist der frühere Hype um die JavaScript-Library überhaupt noch gerechtfertigt?

Ein Jahr ohne jQuery
Kommentare

Jede zweite Webseite hat jQuery im Hintergrund, die meistbesuchten sowieso. Joomla!, WordPress und Drupal haben die JS-Bibliothek automatisch eingebunden, doch ist der Hype heutzutage noch gerechtfertigt? Patrick Kunka, Lead Front-end Developer der Video-Streaming Plattorm „We are Colony“, zieht nach einem experimentellen Jahr ohne jQuery sein Fazit.

Eine schiere Unmenge an Funktionen und Möglichkeiten bringt die bekannte und beliebte Open-Source Bibliothek jQuery mit sich und ist somit für jegliche Projektarten tauglich. Für Neueinsteigende wie Expert_innen wird gleichermaßen ein einfacher und günstiger Umgang mit JavaScript ermöglicht, doch geht Varianz mit Größe Hand in Hand. Fragen nach UI-Performanz, Änderbarkeit, Ladezeiten und „Overhead“ sind damit generell, doch besonders bei langsameren Geräten oder schlechter Verbindung, ein wichtiges Thema.

Ein Jahr ohne jQuery

Die Vorteile von eigenen Bibliotheken lassen sich leicht heranzählen:

  • besseres Code-Recycling
  • problemspezifische Lösungen
  • ausschließlich benötigte Features
  • komplette Übersicht über den Code
  • uvm.

Doch auch die Nutzung von jQuery hat einiges für sich, u.a.:

  • einfache und schnelle Nutzbarkeit (Plug&Play)
  • keine für uns zu fixenden Bugs
  • Lösungen für allerlei Probleme
  • Einfachheit in unserem Code
  • Etabliert und bekannt (Wartbarkeit)

Nicht jede Firma hat zudem die Möglichkeiten, eben mal mit neuen Herangehensweisen zu experimentieren und damit vergleichsweise mehr Ressourcen aufzuwenden, doch können die Konsequenzen mehr als nur das Projekt betreffen.

The lessons I’ve learned over the last year have made me a better developer.

Das DOM ohne Abstraktion zu nutzen bringt auf Dauer ein besseres Verständnis von JavaScript und Browserintepretationen, so Kunka, während gleichzeitig die Kreativität gefördert würde. Mit direkter, „Quell-naher“ Arbeit sollen die Limitationen der Sprache verinnerlicht und nicht umständlich umgangen werden. Das Ergebnis wäre besserer Code mit den geforderten Funktionen, nicht zu viel und nicht zu wenig.

Write solid JavaScript Code with TypeScript

mit Thomas Claudius Huber (Trivadis Services AG)

Unlock the Power of JavaScript Decorators

mit Nir Kaufman (500Tech)

JavaScript Days 2017

Architektur mit JavaScript

mit Golo Roden (the native web)

JavaScript Testing in der Praxis

mit Dominik Ehrenberg (crosscan) und Sebastian Springer (MaibornWolff)

Schleifen statt Funktionen!

Nachteile muss es jedoch auch geben, so produziert der „vanilla“ JS-Code mehr LoC. Unschön und mühsamer zu lesen, ja, doch bieten die vielen Funktionen-verdrängenden Schleifen große Möglichkeiten zur Performanzoptimierung.

var $items = $container.children('.item');

$items.hide();
var items   = h.children(container, '.item'),
    item    = null,
    i       = -1;

for (i = 0; item = items[i]; i++) {
    item.style.display = 'none';
}

Helper-Funktionen wie .children(), .closestParent() oder .index() fallen ohne die nötige Bibliothek allerdings auch weg, wie man schnell merken wird. Kompliziert sind sie jedoch auch in Vanilla JS nicht:

/**
 * @param   {Element}     el
 * @param   {string}      selector
 * @return  {Element[]}
 */

h.children = function(el, selector) {
    var selectors      = null,
        children       = null,
        childSelectors = [],
        tempId         = '';

    selectors = selector.split(',');

    if (!el.id) {
        tempId = '_temp_';

        el.id = tempId;
    }

    while (selectors.length) {
        childSelectors.push('#' + el.id + '>' + selectors.pop());
    }

    children = document.querySelectorAll(childSelectors.join(', '));

    if (tempId) {
        el.removeAttribute('id');
    }

    return children;
};
/**
 * @param   {Element}       el
 * @param   {string}        selector
 * @param   {boolean}       [includeSelf]
 * @return  {Element|null}
 */

h.closestParent = function(el, selector, includeSelf) {
    var parent = el.parentNode;

    if (includeSelf && el.matches(selector)) {
        return el;
    }

    while (parent && parent !== document.body) {
        if (parent.matches && parent.matches(selector)) {
            return parent;
        } else if (parent.parentNode) {
            parent = parent.parentNode;
        } else {
            return null;
        }
    }

    return null;
};
/**
 * @param   {Element}   el
 * @param   {string}    [selector]
 * @return  {number}
 */

h.index = function(el, selector) {
    var i = 0;

    while ((el = el.previousElementSibling) !== null) {
        if (!selector || el.matches(selector)) {
            ++i;
        }
    }

    return i;
};

Fazit

Auch weiterhin wird jQuery die Bibliothek für „einfacheres“ JavaScript sein, doch bereits jetzt und spätestens mit ES6 kann niemand mehr auf Notwendigkeit pochen. Mit etwas Zeit und Geld steht die deutlich schlankere, performantere Alternative in Gestalt gewöhnlichen JavaScripts da.

The only scenario where I would personally consider using jQuery again would be a project needing IE8 support.

Die Zeiten variierender Browserstandards haben wir glücklicherweise hinter uns gelassen, und obwohl Microsoft anderen Browsern selbst mit Edge in einigen Bereichen hinterher hinkt, sind die nötigen Funktionalitäten vorhanden.
Mehr Informationen und Details sind im offiziellen Blogpost von „We are Colony“ nachzulesen.

Aufmacherbild: Hand of programmer holds puzzle with JavaScript programming language written von Shutterstock / Urheberrecht: vchal

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -