Jörgs Webnotizen

(Teilweise) Abkehr von jQuery

Vor allem in Zeiten, in denen der Internet Explorer 8 oder gar noch der Internet Explorer 6 bei der Erstellung von Webseiten berücksichtigt werden musste, war die JavaScript-Bibliothek jQuery ein Segen. Man musste den JavaScript-Code nicht mehr für verschiedene Browser-Versionen schreiben und testen und die vereinfachte Syntax erspart einem zudem viel Tipparbeit. Bei größeren Projekten möchte ich auf diese Erleichterung auch heute sicher nicht verzichten, insbesondere, wenn jQuery-Plugins einem zusätzliche Programmierarbeit abnehmen. Bei kleineren Projekten, wie z.B. bei diesem Blog, wo ich nur wenig JavaScript einsetze, habe ich mir allerdings zwischenzeitlich die Frage nach der Verhältnismässigkeit gestellt.

Bei der Erstellung eines WordPress-Templates empfiehlt es sich, die jQuery Library, sofern benötigt, in der functions.php als Abhängigkeit des eigenen Scripts einzubinden:

wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), 42);

Dann werden im Head-Bereich die jquery.js sowie die jquery-migrate.min.js geladen, welche WordPress mitbringt und bei Updates mitaktualisiert. Die jquery-migrate.js soll Scripte lauffähig halten, welche eine ältere jQuery-Version voraussetzen. Falls nicht benötigt, kann man jQuery Migrate auch entfernen, z.B. mit diesem Plugin.

Die jQuery-Bibliothek selbst bringt dann aber immer noch über 90 kb auf die Waage, die durch den Browser bei jedem Seitenaufruf verarbeitet werden müssen. Bei kleineren Projekten, die nur 30 bis 40 Zeilen jQuery-Code enthalten, ist das vielleicht etwas überdimensioniert. Ich habe deswegen jetzt auf ein paar meiner Webseiten den jQuery-Code durch sogenannten Vanilla-JS-Code ersetzt. Als Vanilla-JS wird in letzter Zeit häufig das eigentliche JavaScript bezeichnet, in Abgrenzung zu JavaScript-Frameworks wie jQuery, Mootools oder YUI. Eine gute Hilfe bei der Übersetzung ist die Website You might not need jQuery.

Vanilla-JS ist zweifelsohne immer noch etwas aufwendiger zu coden als jQuery, aber bei weitem nicht mehr so aufwendig wie noch vor Jahren, als die Browser in der Auslegung des JavaScript-Codes viel weiter voneinander abwichen als heutzutage. Bei der Gelegenheit habe ich auch gleich noch ein Stück jQuery-Code durch CSS ersetzt (die Korrektur einer Breite lässt sich inzwischen mittels calc() bewerkstelligen) – auch hier machen die Browser glücklicherweise Fortschritte.

Kommentar schreiben

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Kommentare werden erst nach Freischaltung veröffentlicht