• 2 years ago / Marius Büscher

Qualitätssicherung in der Web-Entwicklung: Frontend

Schneller, höher, weiter! Das gilt vor allem im Bereich Web-Entwicklung. In den letzten Jahren hat dieser Bereich ein extrem hohes Tempo in seiner Entwicklung erreicht. Angesagte Technologien wechseln beinahe wöchentlich. Projekte haben immer mehr Funktionen und immer gewagtere Designs. Allen voran stehen auch straffere Zeitpläne im Fokus. Dabei bleibt oft genug die Qualität der Arbeit auf der Strecke.

Bei denkwerk setzen wir unter anderem auf automatisierte Verfahren, die es ermöglichen, eine gleichbleibende Qualität bei gesteigerter Produktivität und höherer Entwicklungsgeschwindigkeit zu gewährleisten. Diese Tests werden regelmäßig durchgeführt, diese werden Regressionstests genannt. Damit jeder Mitarbeiter in einem Projekt dazu angehalten wird qualitativ hochwertige Software zu implementieren, stehen zentrale Services bereit, die die Qualität überwachen. Dabei handelt es sich um CI (Continuous Integration)-Server. Bei denkwerk kommt dabei Jenkins zum Einsatz. Wir haben mehrere solcher Server-Instanzen, sowohl für das Frontend als auch das Backend, im Einsatz. Auf jedem der Server werden mehrere Projekte gebaut und getestet.

Unser Anspruch besteht darin, kontinuierlich Projekte in gleichbleibender Qualität liefern zu können. Die Projekte werden von den Servern nicht nur getestet und gebaut, sie werden auch dieser Regelmäßigkeit entsprechend auf die Preview-Server verteilt. So wird ein sehr agiles Vorgehen möglich, das es erlaubt, neu entstandene Features und Anforderungen des Kunden schon während der Entwicklungsphase abnehmen zu lassen. Der Ablauf der Projekte wird somit beschleunigt und gewinnt für die Kunden an Transparenz. Kunden bekommen mehr Einblicke in den aktuellen Projektstand. Und: die Kommunikation vereinfacht sich erheblich.

Frontend-Testing

Im Frontend werden eine ganze Reihe von Tools zur Qualitätssicherung genutzt. Diverse Code-Analysetools sorgen für sauberen und übersichtlichen Code.

Wir setzen (SCSS-Lint) ein, um unsere Stylesheets auf potentielle Fehler hin zu prüfen. Diese betreffen Performance, Syntax sowie Formatierung. Dadurch bleibt der Code übersichtlich und fehlerfrei.

Unser HTML wird automatisch mittels des W3C-Validators geprüft. Der Validator ist unter einer Open-Source-Lizenz verfügbar. Dies ermöglicht es uns, eine eigene Instanz in unserem internen Netzwerk zu betreiben, so dass auch Domains, die nicht nach außen hin sichtbar sind, von uns geprüft werden können. Dieser Service wird auch automatisch in unseren Build- und Testingprozessen aufgerufen.

Websites werden immer komplexer und immer mehr Logik wird in das Frontend ausgelagert. Daher ist es besonders wichtig, das JavaScript zu testen, aus dem der dynamische Part des Frontends meist besteht. Hierfür werden gleich mehrere Tests durchgeführt: Zum einen wird die Formatierung geprüft. Diese Prüfung nehmen wir mithilfe des JavaScript Code Style Checkers, kurz JSCS vor. Zum anderen überprüft das Tool JS Hint unser JavaScript auf den sogenannten Strict-Mode. Dieser verlangt vom Entwickler aber ein wenig Disziplin, so muss z. B. jede Variable im Code explizit deklariert werden. JS Hint prüft hier auf Verstöße hinsichtlich Komplexität, Verschachtelung und Best Practice.

Komplex, langlebig und gleichbleibende Qualität

Um gleichbleibende Qualität auch in besonders langlebigen und komplexen Projekten sicherzustellen, setzen wir auch immer mehr Unit-Tests im Frontend ein. Solche Tests prüfen, ob einzelne Teile der Software nach bestimmten, vorher erstellten Spezifikationen funktionieren. Vorhandene Unit-Tests helfen uns dabei, unsere Software wartbar und veränderbar zu halten, und geben uns das sichere Gefühl, dass die Software das im wahrsten Sinne des Wortes tut, was sie soll. Treten später Bugs auf, werden sie gefixt und durch einen Test abgesichert.

Unit-Tests sind leider sehr aufwändig und beanspruchen viel Zeit bei der Erstellung. Wir setzen daher als Minimalanforderung die geschäftskritischen Prozesse, z. B. eine Buchungsstrecke einer Airline oder ein Bestellprozess in einem Online-Shop, an. Diese sind automatisiert abzutesten, da solche Prozesse, sollten sie nicht funktionsfähig sein, den Kunden Geld kosten.

Im zweiten Teil unserer Serie geht es dann um das Backend-Testing.
Wenn ihr euch für die Arbeit bei denkwerk interessiert und uns in einer lockeren Atmosphäre kennenlernen möchtet, dann kommt zu unserem Event Level up am 27.02.2016 in Köln-Ehrenfeld.