Wie man Dateien organisiert, kann beim Einstieg in die Programmierung ziemlich verwirrend sein – besonders wenn die Code-Basis wächst und die bestehende Struktur nicht mehr mit dem Inhalt zurechtkommt.

Der Wert einer Struktur

Warum ist uns das überhaupt wichtig? Moderne Editoren haben eine Dateisuche integriert, und wir können damit einfach unsere Dateien finden, oder?

Stellen wir uns vor, wir bräuchten keine Ordnerstrukturen. In diesem Fall befinden sich mehrere Tausend Dateien im Stammordner. Die Scrollleiste ist sehr klein geworden. Wir haben die Aufgabe bekommen, eine neue Funktion zu dieser Software hinzuzufügen. Wie würden wir das angehen? Wir können unsere Dateien hier erstellen – sie landen irgendwo in der gesamten Dateiliste, je nach Sortierung. Herauszufinden, welche Dateien zu unserem Feature gehören? Das wird eine ziemliche Herausforderung. Ach, wir haben ein kleines Hilfsprogramm geschrieben, das auch an anderen Stellen im Code nützlich sein könnte? Schön. Zeit, die Kollegen darüber zu informieren – und wo ist diese Datei noch einmal? Moment, sind wir sicher, dass nicht irgendwo bereits ein ähnliches Hilfsprogramm existiert?

Das Konzept eines Ordners

Ein Ordner ist nichts weiter als eine Abstraktion, um Informationen zu verbergen, die uns gerade nicht interessieren. Die Konvention, Dateien in Ordner zu legen, besteht darin, sie nach bestimmten Eigenschaften des Dateiinhalts zu gruppieren. Mit einer ordentlichen Ordnerstruktur können wir in der Code-Basis anhand bestimmter bekannter Eigenschaften der gesuchten Datei navigieren. Der Dateiname ist nicht immer bekannt, und die Suche nach Dateinamen ist auch nicht die einzige Suche, die wir benötigen.

Horizontale und vertikale Aufteilung

Bei einem Softwareprojekt kann die Ordnerstruktur horizontal oder vertikal aufgeteilt werden.

Horizontale Aufteilung ist eine flache Struktur, bei der jede Datei entsprechend ihrer Art in einem Ordner abgelegt wird. Dieser Ansatz ist unkompliziert, skaliert jedoch schlecht. Warum skaliert er schlecht? Weil Dateien aus mehreren Domänen, die nicht direkt miteinander zusammenhängen, im selben Ordner zu Unübersichtlichkeit führen.

src/
|- component/
|- model/
|- pages/
|- util/

Vertikale Aufteilung ist domänenbasiert, d. h. die Dateien werden nach Feature bzw. Geschäftsanforderung gruppiert. Der Vorteil ist eine klare Trennung von Code-Teilen, die ohnehin wenig miteinander zu tun haben. Stellen wir uns vor, wir bauen einen eigenen Mini-Photoshop-Klon – wir könnten dann auf eine Ordnerstruktur wie die folgende kommen:

src/
|- color/
|- crop/
|- image/
|- text/
|- ...

Diese beiden Techniken schließen sich nicht gegenseitig aus. Da die horizontale Aufteilung allein nicht skaliert, können wir die Code-Basis zunächst vertikal aufteilen und dann die Dateien darin horizontal, um das Beste aus beiden Welten herauszuholen. Für häufig verwendeten Code genügt es, einen Ordner namens common zu erstellen.

src/
|- color/
  |- component/
  |- model/
  |- page/
  |- util/
|- common/
  |- component/
  |- model/
  |- page/
  |- util/
|- crop/
  |- component/
  |- model/
  |- page/
  |- util/
|- image/
  |- component/
  |- model/
  |- page/
  |- util/
|- text/
  |- component/
  |- model/
  |- page/
  |- util/

Skalierung

Bei noch größeren Projekten reicht eine vertikale Ebene möglicherweise nicht aus. Dem kann man durch das Hinzufügen weiterer vertikaler Ebenen begegnen. Es gibt jedoch einen potenziellen Stolperstein. Schauen wir uns folgende Struktur an:

src/
|- color/
  |- rgb/
  |- hsl/
|- common/
|- crop/
|- image/
  |- editor/
  |- filter/
    |- blackwhite/
    |- sepia/
    |- contrast/
|- text/
  |- bitmap/
  |- parser/
  |- renderer/
  |- svg/

Welches Problem seht ihr hier?

Es gibt zu viel Verschachtelung. Zu viele Informationen wurden vor uns verborgen. Jeder Ordner hat nur wenige Unterordner, und diese wiederum nur wenige. Der Mehrwert, sie zu öffnen, ist recht gering. Um dem entgegenzuwirken, können wir die Verschachtelung einiger davon reduzieren und stattdessen ein Präfix verwenden.

src/
|- color-rgb/
|- color-hsl/
|- common/
|- crop/
|- image-editor/
|- image-filter/
  |- blackwhite/
  |- sepia/
  |- contrast/
|- text-bitmap/
|- text-parser/
|- text-renderer/
|- text-svg/