Technische Schulden: jQuery entfernen
jQuery war besonders zu seiner Anfangszeit ein hilfreiches und fast unumgängliches Tool für die Frontend-Entwicklung. Dadurch hat es auch den Weg tief in unseren Code gefunden. Doch wie wird man es wieder los?
jQuery war besonders zu seiner Anfangszeit ein hilfreiches und fast unumgängliches Tool für die Frontend-Entwicklung. Dadurch hat es auch den Weg tief in unseren Code gefunden. Doch wie wird man es wieder los?
jQuery wurde 2006 vorgestellt und ist seit etwa zehn Jahren bei heise online im Einsatz. Zur damaligen Zeit, als die Browser sich noch in der Bereitstellung von APIs teils massiv unterschieden, bot jQuery die Möglichkeit, verständlichen, übersichtlichen Code zu schreiben und kümmerte sich unter der Haube um die Browserkompatibilität. Kurz: jQuery war ein Segen! Es ermöglichte, sich auf den eigentlichen Ablauf des Codes zu konzentrieren, statt sich mit Browser-Sperenzchen auseinandersetzen zu müssen.
Da heise online aus vielen verschiedenen (eigenständigen) Bereichen, wie dem Forum, besteht, ergab sich mit den Jahren auch, dass wir ein buntes Sammelsurium an jQuery-Versionen hatten – teils in Bundles, teils als direkt eingebundene Bibliothek. Mit Aufkommen von Build-Tools wie Grunt und Gulp zogen einige unserer Skripte in diese Strukturen um und brachten dank ordentlichem Dependency Management auch noch jQuery mit. Ziel war natürlich, alles JavaScript auf diesem Weg auszuliefern, aber wie so häufig sind die letzten 20 Prozent mindestens genauso schwierig wie die ersten 80 Prozent. Es zieht sich.
Doch wir hatten definitiv den Entschluss gefasst, jQuery los zu werden, denn die einstige Rechtfertigung für das Framework war nicht mehr gegeben: Die Browser-APIs haben sich weitgehend vereinheitlicht, es gibt brauchbare Möglichkeiten zur Feature-Detection und Komfort-Funktionen, wie die CSS-inspirierten Selektoren aus jQuery, haben mittlerweile Einzug in "Vanilla"-JavaScript gehalten.
Der ruppige Ansatz
Im ersten Schritt haben wir eine separate JavaScript-Datei exklusiv für die Startseite erstellt und dabei jQuery außen vor gelassen. In diesem Zuge schalteten wir jQuery auch mal kurzzeitig komplett ab und schauten, wo Code umgefallen war.
Wenn nicht simpel Abhilfe geschaffen werden konnte, bauten wir jQuery erst mal wieder ein. Im Großen und Ganzen war das eine Ein-Tages-Aktion. Zu einem späteren Zeitpunkt konnten wir mit git grep herausfinden, wo überhaupt noch überall jQuery im Einsatz war und mehr Arbeit nötig sein würde, um es zu ersetzen. Aus diesen Erkenntnissen erstellten wir eine umfangreiche Aufgaben-Liste, die alle restlichen Vorkommnisse von jQuery erfasste und Abhängigkeiten deutlich machte. So hatten einige Channel – unser internes Wording für Bereiche wie heise Security oder Developer – gar keine eigenen Abhängigkeiten zu jQuery, aber sie banden unser heise-weites JavaScript-Bundle (ho.js bzw. heise.js) ein, in dem wir noch ein paar Scripte jQuery benötigten. Letztlich sind circa 30 Code-Stellen aufgetaucht, die teils nur wenige, teils über hundert Zeilen jQuery-Referenzen enthielten.
Fleißarbeit
Mit der Liste schloss die Vorarbeit ab. Immer wenn mal Zeit war, haben sich verschiedene Personen unserer Abteilung eines der Skripte vorgenommen und umgeschrieben, sodass es ohne jQuery funktioniert. Man kann sich vorstellen, dass wir dabei auch immer wieder auf sehr alte Code-Abschnitte gestoßen sind, die wir heutzutage nicht mehr so schreiben würden (kein async/await, arrow functions etc.). Da das Ziel aber primär war, jQuery los zu werden, mussten wir an uns halten, um nicht ins Yak Shaving zu verfallen und auch noch gleich das JavaScript komplett zu refaktorieren.
Für unsere eigene Motivation, aber natürlich auch um immer mal wieder Zwischenergebnisse zu haben, versuchten wir dabei einzelne Bereiche (z. B. Make) von jQuery zu befreien, um dann einen Teilbereich von heise online abgeschlossen zu haben. Bei so lang laufenden Maintenance-Projekten sind Erfolgserlebnisse nicht zu unterschätzen!
Fazit
Es lohnt sich definitiv! Für uns, aber selbstverständlich auch für unsere User! Im April konnten wir bereits aus unserem Bundle ho.js die letzte Abhängigkeit entfernen und so mit einem Schlag 88 kB einsparen. Ende Mai konnten wir dann eine jQuery-Referenz (jQuery 2.1.1, 34 kB) aus heise Developer, Security, iX und Mac & i ausbauen, eine weitere (jQuery 1.7.1, 38 kB) aus dem Newsticker und Make sowie noch ein jQuery-UI (31 kB) aus Make. Insgesamt liefern wir seit diesem Tag 103 kB weniger Daten aus und geben den Browsern natürlich auch weniger JavaScript zum Interpretieren. Alles in allem sind so bisher 192 kB jQuery von unseren Seiten verschwunden.
Das Ganze kann aktuell nur als motivierender Zwischenstand angesehen werden, denn einige Bereiche sind in der Liste leider noch nicht aufgetaucht – da sind wir aber natürlich weiterhin dran. Der Weg ist lang und steinig, aber er lohnt sich! (hih)
