Die Nutzung von Tools im Frontend

An der Uni Mainz lehre ich Frontendentwicklung von der Pike auf. Wir kümmern uns nicht um Tools oder Frameworks, weil die Studenten erst einmal die Basics lernen sollen. Manch einem, der Frontendentwicklung macht, würde dies auch gut zu Gesicht stehen. Vor allem die Grundkonzepte von CSS (Boxmodell, Kaskade, Spezifität) sowie die Funktionsweise von Positionierung und Floats sind bei sehr vielen Kollegen Schwachpunkte.

Doch sind diese Grundlagen intus, spricht nichts gegen Vereinfachungen und Abkürzungen. Insbesondere bei Profis sollten diese Vereinfachungen m.E. zum Tagesgeschäft gehören.

Wir haben es mit wiederkehrenden Aufgaben zu tun. Selten erstellen wir etwas wirklich Neues (für uns), sondern modifizieren schon existierende Module. Es entsteht die x-te horizontale Navigation, der x-te Teaser. Natürlich können die Teaserinhalte unterschiedlich komplex sein, aber das Grundprinzip ist immer gleich.

Es kann also sinnvoll sein, sich mit einem UI-Framework wie Bootstrap oder Foundation zu beschäftigen. Man kann sich auch ein eigenes aus alten Projekten zusammenbauen. Denn einmal erstellte Module jedesmal wieder von neuem aufzubauen ist ein unnötig zeitraubender Prozess. Diesen sollte man so weit es geht abkürzen. In meinen Augen ist dies ein Zeichen von Professionalität. Denn mit der so gesparten Zeit kann man sich den wahren Problemen der Designs – oder einem neuen Projekt – zuwenden.

Oft werden komplexe UI-Elemente benötigt, die ohne JavaScript nicht realisierbar sind. In diesem Falle ist es einfacher, ein jQuery-Plugin zu nutzen, als das JavaScript selber zu schreiben. Es ist also schon sinnvoll, sich mit jQuery zu beschäftigen.

Frameworks oder fertige Plugins haben im Normalfall eine Dokumentation, was sie normalerweise von Eigenkreationen unterscheidet. Diese Dokumentationen sollte man nicht gering schätzen. Sie sind für sich selber und für nachfolgende Entwickler ein sehr gutes Tool.

Mittlerweile geben uns Tools auf Basis von node.js Möglichkeiten an die Hand, die unsere tägliche Arbeit leichter machen können, auf alle Fälle unsere Qualität steigern können. Entweder nur mit node.js oder mittels Taskrunner wie Grunt oder Gulp können wir unsere Seiten und Module automatisiert validieren lassen. Das ist ein Prozess, der in Sekundenschnelle abläuft. Es muss nicht mehr jede Einzelseite aufgerufen und dann mittels der Webdeveloper-Toolbar in Firefox validiert werden. Wir können unser CSS modularisieren und die Einzelteile von einem Präprozessors (Sass, Less, Stylus, PostCSS) zusammenbauen lassen.

Es lohnt sich, den grundsätzlichen Umgang mit node.js und einem Taskrunner zu erlernen. Wenn man an der Oberfläche bleibt, ist die Komplexität beherrschbar. Der Zeitaufwand ist überschaubar. Die Möglichkeiten von node.js und der Taskrunner erscheinen schier endlos. Das sollte nicht abschrecken. Man sollte sich das für einen Wichtige und Notwendige herauspicken. Es kann am Ende sein, dass man nur zwei oder drei Grunt-Tasks nutzt. Andere nutzen vielleicht ein ganzes Dutzend oder noch mehr. Es gibt da kein Richtig oder Falsch.

All diese Tools sind nicht lebensnotwendig. Natürlich kann man Webseiten auch ohne sie erstellen. Aber sie erleichtern und beschleunigen die eigene Arbeit. Und wenn etwas professionell ist, dann Effizienz.

2 Kommentare

  1. „Oft werden komplexe UI-Elemente benötigt, die ohne JavaScript nicht realisierbar sind. In diesem Falle ist es einfacher, ein jQuery-Plugin zu nutzen…“

    In diesem Falle sollte sich die Frage stellen, warum solche Komponten (die zum Ziel haben, universell einsetzbar zu sein) mit jQuery realisiert sind anstatt mit einfachem JavaScript.

    „Es ist also schon sinnvoll, sich mit jQuery zu beschäftigen.“

    Ja, das kann sinnvoll sein. Aber weil andere es nicht auf die Reihe kriegen, Komponenten in JavaScript zu erstellen, ist nicht der beste Grund dafür.

    • Um den Artikel nicht weiter ausufern zu lassen, habe ich auf die jQuery-Diskussion verzichtet. Insbesondere bei DOM-Manipuationen ist es in meinen Augen sehr sinnvoll, auf jQuery als Abstraktion zu bauen. Die Browserinterpretationen der Standards sind einfach zu kreativ. Aber natürlich kann man auch oft eine fertige Lösung ohne jQuery einsetzen. Be my Guest. Wichtig ist mir, dass nicht jeder das Rad neu erfindet.