Zur Übersicht

Mit diesen 4 Tools sicherst du die Code-Qualität in PHP und JavaScript

Aktualisiert am 17. Aug. 2020
MASSIVE-ART-Blog-Code-Qualitaet-in-PHP-und-JavaScript

In einem kurzen, aber knackigen Beitrag möchte ich ein paar Tools vorstellen, die wir hier bei MASSIVE ART nutzen, um die Code-Qualität hochzuhalten und so dem Fehlerteufel möglichst keine Chance geben. Neben altbekannten Werkzeugen werde ich auch auf das eine oder andere vielleicht noch unbekannte Tool eingehen, welches uns das Leben als Entwickler sehr erleichtern kann.

I. Die richtige Entwicklungsumgebung

Auch wenn man sie bereits als selbstverständlich ansieht, die Entwicklungsumgebung (IDE) ist ein wesentlicher Teil zur Sicherung der Code-Qualität. Man vergleiche nur einmal, wie der Code im vorinstallierten Texteditor aussieht und wie in einer ordentlichen Entwicklungsumgebung: Richtig – die Syntaxhervorhebung sticht sofort ins Auge. Diese ermöglicht es den Code schneller zu lesen, hebt Strukturen hervor und Fehler fallen schneller auf.

Außerdem bieten fortgeschrittene Entwicklungsumgebungen – wie beispielsweise das bei uns sehr oft benutzte IntelliJ IDEA – eine Code-Inspektion an, also eine automatische Fehlersuche im Code und das “on the fly" noch während man den Code schreibt.

Die Autovervollständigung macht es nicht nur möglich schneller zu entwickeln, sondern verhindert auch, dass man sich vertippt. Des Weiteren erspart man sich das eine oder andere Mal nachzusehen (für die Vergesslichen unter uns), wie man gewisse Variablen, Funktionen oder auch Klassen benannt hat - geschweige denn, in welchem Namensraum sich diese befinden. Weitere tolle Vorteile einer guten IDE sind unter anderem die Erkennung unbenutzter Variablen, Debugging Funktionalität, PHPUnit Integration, GitHub Integration oder Erweiterbarkeit durch Plugins.

MASSIVE-ART-Blog-Code_Qualitaet_3
MASSIVE-ART-Blog-Code_Qualitaet_3

IDE vs. Text-Editor: Was ist übersichtlicher?

Besonders hervorzuheben ist auch JSHint. Das Tool analysiert Javascript Code und macht uns auf mögliche Fehler aufmerksam. JSHint ist dabei hoch konfigurierbar und hilft uns, die Code-Analyse an unsere Anforderungen anzupassen. Zudem kann die Konfigurationsdatei im Projekt geteilt werden – außerordentlich praktisch. Auch sehr schön ist, dass es bereits in vielen guten IDEs als fixer Bestandteil integriert ist.

II. Bessere Code-Reviews mit GitHub

GitHub sollte den meisten unter uns ein Begriff sein, gehört es doch zu den populärsten Versionierungssystemen in der Open-Source Szene. Neben der Sicherung des Codes und der Möglichkeit gemeinsam an Projekten zu arbeiten, ist GitHub ein sehr mächtiges Werkzeug zur Qualitätssicherung des Codes: Das Git-Flow Konzept – in welchem vor allem auf das richtige Releasen des Entwicklungsstandes Wert gelegt wird. Besonders der Feature Branch Workflow hilft uns dabei, uns gegenseitig auf die Finger zu schauen.

Wird eine neue Funktion verlangt, macht ein Entwickler dies in einem sogenannten Feature-Branch. Ist diese fertig implementiert, stellt er einen Pull-Request in den derzeitigen Entwicklungsstand an einen anderen Entwickler des Projektes. Dieser überprüft den Code nun auf Qualität und Fehler. Git unterstützt, indem es nur jene Code-Blöcke anzeigt, die sich auch wirklich geändert haben. So bleibt der Aufwand für den Prüfenden minimal. Der Code kann zudem mit Anmerkungen versehen werden – etwa um eine Diskussion anzustoßen. Sollte alles passen, kann der Code nun “gemerged”, also in den Entwicklungsstand integriert werden.

MASSIVE-ART-Blog-Code_Qualitaet_2
MASSIVE-ART-Blog-Code_Qualitaet_2

Code-Vergleich auf GitHub: Neuer Code ist in Grün ersichtlich, alter Code in Rot.

III. Unit-Tests als Fehler-Terminator

Unit-Tests ermöglichen dem Entwickler, den Code auf korrekte Funktionalität zu überprüfen. Es kann also getestet werden, ob der Code auch wirklich das gewünschte Ergebnis zurückliefert. Das hat insbesondere den Vorteil, dass die Funktionalität auch dann noch gewährleistet ist, wenn sich auf den ersten Blick nicht unmittelbar betroffene Codeblöcke ändern – die aber durchaus Einfluss auf das Ergebnis anderer Programmteile haben.

Je höher die Testabdeckung, desto weniger Fehler können sich einschleichen. Darum ist es stets erstrebenswert, möglichst alle Programmteile mit Unit-Tests zu überprüfen. Mit PHP-Unit kannst du diese Unit-Tests in PHP durchführen.

Neben Unit-Tests gibt es aber auch Front-End Test Frameworks, wie etwa Jasmine. Hier wird die Funktionsweise von Javascript auf ein bestimmtes Verhalten hin geprüft. Neben klassischen, funktionalen Tests kann so auch das Verhalten im DOM überprüft werden – zum Beispiel ob nach einem Klick auf Element A, Element B erscheint. Aber auch automatisierte Browsertests, wie Sauce Labs, überprüfen die Interaktion mit der Applikation in unterschiedlichen Browsern.

IV. Teambasierte Qualitätssicherung: Continuous Integration

Und nun sind wir bereits bei der Königsdisziplin angekommen: der Qualitätssicherung. Oblag es bisher jedem Einzelnen sich um die Code-Qualität zu kümmern, so ist es mit Continuous Integration Tools – wie Travis CI – in Verbindung mit GitHub nun möglich, eine automatische Code-Überprüfung anzustoßen. Und zwar wann immer sich der Code ändert. Das hat vor allem den Vorteil, dass sofort ersichtlich ist, wie sich Änderungen im Hinblick auf Qualität und Funktion auswirken.

Ein weiteres, sehr interessantes Tool ist Scrutinizer CI. Im Gegensatz zu Travis CI werden hier keine Unit Tests durchgeführt, sondern der Code auf Qualität überprüft und bewertet. Auf einer intuitiven Skala von 0 (schlecht) bis 10 (sehr gut) wird die Qualität des Codes eingestuft. Zur Bewertung werden einige bekannte und bewährte Code-Analyse Tools genutzt – zum Beispiel PHP Analyzer oder PHP Code Sniffer.

Zudem werden alle Anmerkungen (Fehler, Gefahrenquellen, Hinweise) auf einer Übersichtsseite aufgelistet. Sieht man sich diese im Detail an, so werden nicht nur die betroffenen Codezeilen markiert, sondern auch Hilfeleistungen dargestellt. Das Tolle ist nun, dass nach jedem Commit oder Pull-Request auf GitHub, die Veränderung der Code-Qualität genau dokumentiert wird. Neu entstandene Fehlerquellen sowie Verbesserungen werden angezeigt und das Rating neu berechnet. Häufige Anmerkungen sind beispielsweise:

  • Dokumentation
  • Coding Style
  • Code-Duplizierung
  • Bugs
  • zu hohe Komplexität

Die Schwere wird entweder als kritisch, hoch, gering oder informativ eingestuft.

MASSIVE-ART-Blog-Code_Qualitaet_1
MASSIVE-ART-Blog-Code_Qualitaet_1

Scrutinizer in Aktion: Das intuitive Rating hilft, die Codequalität einzustufen.

Mein Fazit

Wie wir gesehen haben, fängt die Qualitätsicherung des Codes bereits bei der Wahl der richtigen Entwicklungsumgebung an. Durch den Feature-Branch Workflow über GitHub wird der Code nach dem Vier-Augen-Prinzip geprüft. Unit Tests stellen sicher, dass der Code die richtigen Ergebnisse liefert und sich bei Veränderungen keine Fehler einschleichen. Das i-Tüpfelchen bilden Continuous-Integration Tools, die den Code nach dem Einchecken gleich automatisch in der Versionskontrolle überprüfen und Tests ausführen.

Es gibt also viele Werkzeuge, um die Code-Qualität effektiv und effizient zu sichern – und die definitiv einen weiteren Blick wert sind.

Und auf welche Tools setzt du?

(Bildquelle: © SpencerSternberg/iStockphoto)