Clean Code GUIDE 2: Beispiele + simple Erklärungen

Clean Code Guide 2 Coding Lab Steffen Lippke Tutorials und Guides

Clean Code sind doch nur „gut“-benannte Funktionen und Variablen.

Nein!

In dem zweiten Teil des Clean Code Guides gehe ich auf die Nutzung von Parametern, Kommentare, Formatierung und dem Refactoring ein.

Starten wir!

Parameter im Clean Code

Funktionen und Parameter ein Dream-Team – oder nicht?

Zur Übersichtlichkeit sollte keine Funktion mehr als 3 Parameter haben!

Übergebe keine Werte mit den Funktionen, splitte den Code, sodass maximal 3 Parameter mit wendigen globalen Variablen notwendig sind.

💣Coding Horror – So nicht!

Parameter verbessern nicht die Lesbarkeit.


main(){
    console.log(getOrders(1,”Hans Hase”,”Fetter PC”));
}

getOrders(id, name, item){
	…
    return selectedOrder;
}

👌 Clean Code – So sollte Dein Code aussehen

Splitte Funktionen! Globale Variablen sind eine Möglichkeit.


id =-1;
name = ”Default_Name”;
item = ”Default_Item”;

main(){
    this.id = 23;
    this.name = ”Hans Hase”;
    this.item= ”Fetter PC”;
    
    console.log(getOrders());
}

getOrders(id, name, item){
	…
    return selectedOrder;
}

Kommentare in Clean Code

Ein perfekter Clean Code braucht keine Kommentare!

Ein Clean Code ist gut lesbar und einfach verständlich, egal wie komplex der Algorithmus ist.

Komplexere Algorithmen erklärt Clean Code mit vielen Funktionen, guten Benennungen und einer durchdachten Struktur.

Mit Clean Code kann ein guter Programmierer komplexe Algorithmen einfach verständlich machen.

Wenn Du ein Kommentar schreiben solltest, dann beantworte nicht das „Was“ oder „Wie“, sondern Kommentare erklären das „Warum“ oder „Wieso“.

// parst die HTTP-Antwort in XML zu einem neunen JSON Format

parseXMLtoJSON(){…}

Beantworte das „Warum“ und „Wieso“:

// Die Webdav API gibt XML aus und JSON ist benötigt

parseXMLtoJSON(){…}

Ein guter Kommentar soll so knapp wie möglich das Problem erklären und dem Leser weiterhelfen.

Kommentiere bitte nicht Code aus, sondern nutze Git, um auf alten Code zugreifen zu können.

Vermeide Deine Aufgaben in die den Code zu schreiben. To-dos gehören in ein Ticketsystem oder eine Todo-App.

💣Coding Horror – So nicht!

Vermeide oberflächliche Kommentare, die nur ein „Was“ beschreiben.


// Variable zum Speichern des Kundengeburtstages
Date g = new Date();

👌 Clean Code – So sollte Dein Code aussehen

Weniger ist mehr. Ein Kommentar soll nur das „Wie“ beschreiben… oder nicht existieren.


Date dateOfCustomer = new Date();

Struktur eines Clean Code

Ordner Struktur

Bevor Du Dein Projekt startest, überlege Dir vorher, was in Deinem Projekt vorhanden sein soll. Z.B.

  • Bilder
  • Schriftarten
  • Build-Skripte
  • Grafiken
  • Hilfsklassen

Erstelle Dir dann neben dem normalen Code in dem Root Ordner Deines Projektes diese Ordner.

Nutze eine gut überlegte Ordner- und Dateistruktur in Deinem Projekt

Die meisten Frameworks stellten eine Struktur mit dem Initialisieren des Projekts zur Verfügung. Lese die Dokumentation und verwende alle Best Practices, damit Du Dich nicht verhaspelst.

Länge der Dateien

Ich empfehle nicht mehr als maximal 500 Zielen Code in eine Datei zu schreiben, da…

  1. … Du schneller Funktionen findest.
  2. … Du keine wunden Finger vom vielen Scrollen bekommst.

In VSCodium kannst Du mit Strg + P zwischen den Dateien navigieren / suchen.

Ich empfehle  Dir, die Outline Deiner Entwicklungsumgebung(IDE) zu nutzen. Die Outline stellt das Inhaltsverzeichnis Deiner Datei dar und listet die Variable und Funktionen-Namen auf.

Um Code auszulagern, kannst Du das Refactoring nutzen oder neue Klassen erstellen.

Ein guter Programmierer überlegt sich vor dem Coden, welche Klassen für das Projekt relevant sind. Dieser erstellt ein Entity-Relationship-Diagramm und versucht alle Klassen aus der Realität zu bestimmen und logisch zu benennen.

Wenn Deine Datei auf  500 Zeilen anwächst, kannst Du bestimmt ein Muster erkennen, aus dem Du eine neue Klasse extrahieren kannst. Erstelle eine neue Datei oder schreibe eine neue Klasse.

Formatierung im Clean Code

Ein Clean Code ist ein gut formatierter Code. Versuche die folgenden vier Aufgaben in Deinem Code umzusetzen:

1.   Bündle vergleichbare Funktionen und Variablen

Ähnliche Funktionen gehören direkt untereinander. Du kannst Dich an den Präfixen der Funktionen orientieren (get, load, parse).

Bei Variablen bündelst Du mit einem Absatz.

2.   Lagere Code aus

Eine Datei mit 300 – 500 Zeilen kann schnell unübersichtlich sein.

Deshalb versuche Funktionen und Variablen auszulagern. Versuche eine weitere globale Klasse aus dem bestehenden Code zu extrahieren oder eine Helper-Klasse zu erstellen.

3.   Verwende Leerräume für mehr Struktur

Nutze einen leeren Absatz, um Variablen zu bündeln. Bündele thematisch und inhaltlich ähnliche Variablen.

// thematische Bündelung
int countUser = 0;
int countSuppliers = 0;
int countCustomers = 0;

// trennen von Zählvariablen und Summen
int sumProdcuts = 0;
int sumVolume = 0;

// andere Datentyp - andere Block
String userName = "";
String productName = "";

Nutze zwei leere Absätze, um einzelne Funktionen voneinander zu separieren.

Bitte verwende den Tabulator-Leerschritt nur am Anfang der Zeile und versuche keine „Variablen-Tabellen“ mit dem Tabulator zu bauen.

// BITTE NICHT

int countUser       = 0;
int countSuppliers  = 0;
int countCustomers  = 0;

// sondern:

int countUser = 0;
int countSuppliers = 0;
int countCustomers = 0;

4.   Vermeide Schachtelung mit vielen Stufen

Wenn Du mehrere For-Schleifen, if-Anweisungen und komplexere Funktionsaufrufe nutzt, dann können die Codezeilen relativ weit rechts beginnen.

Wenn Du zu viele Schachtelungen hast, kannst Du den Code nicht mehr lesen bzw. Du musst beim Ändern, die einzelnen Klammern zählen.

Im Kapitel Funktion bin ich darauf eingegangen, dass die Funktionen kaskadieren sollen. Verwende maximal 4 Ebenen.

Refactoring

Wenn Du unausgereiften Code zu einem Clean Code verändern möchtest, dann brauchst Du „Refactoring“-Werkzeuge. Ein Refactoring-Werkzeug ist ein verbessertes Ersetze-Werkzeug, welches jede gute Entwicklungsumgebung bereitstellt.

Wenn Du z. B. einen Funktionsnamen im Projekt änderst, dann musst Du alle Funktionsnamen im Projekt anpassen, sonst spukt der PC die Fehlermeldung „function not found“ aus. Die Refactoring-Tools sind praktisch, arbeiten aber nicht immer wie der Programmierer sich die Funktion vorstellt.

Das Tool kann je nach Konfiguration auch Projekte zerstören. Speichere Deine Ergebnisse ab und nutze Git!

Clean Code mit Visual Studio Code

Um in VSCodium zu refactoren, musst Du die Variable- / Funktionsname selektieren und dann F2 drücken. Dann erscheint darunter ein Eingabefeld. Mit Enter bestätigst Du die Änderung. VSCodium ändert alle Referenzen zeitgleich.

Ich empfehle Dir den Code mit jedem Refactoring-Schritt zu testen, da ungewolltes Refactoring schnell passieren kann.

Denke daran, dass Du die Variablennamen in Deiner Dokumentation anpassen musst.

Eclipse Refactoring ist einfach

ALT + STRG + R ermöglicht den gleichen Effekt wie VSCodum. Bei Eclipse erscheint kein Feld, sondern Du kannst in Realtime alle Werte mit bloßem Editieren ändern.

So macht Refactoring Spaß.

Learnings für dieses Kapitel

  • Der beste Kommentar ist kein Kommentar.
  • Nutze nie mehr als 3 Parameter in einer Funktion.
  • Nutze eine gut überlegte Ordner- und Dateistruktur in Deinem Projekt
  • Ab 500 Zeilen musst Du die Datei teilen
  • Refactoring ist Dein Freund.

Nächste Kapitel

Kapitel 3: Clean Code ist besser: Kürzen und Optimieren
Clean Code ist nicht nur eine Hülle. Richtig guter Code ist Speicher und CPU schonend. Außerdem skaliert diese gut.

Kommentare 3

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


Jeden Monat teile ich mit Mitgliedern
4 neue praxisnahe Tutorials (je 1000+ Wörter).


Trage Deine Mail, damit Du
Deine Coding + Hacking Skills erweitern kannst!

Die Webseite nutzt nur technisch notwendige Cookies.