Da ich des Öfteren HTML-Prototypen in Vorbereitung für größere (Typo3) Projekte erstellen muss, sind mir ein paar Sachen aufgefallen: unsere Prototypen sind zu detailliert und Änderungen umzusetzen ist furchtbar aufwendig. Webseiten basieren darauf Teile des Codes am verschiedenen Stellen immer wieder zu verwenden, deswegen ist es sinnvoll schon bei der Erstellung eines Prototypen auf eine modulare Bauweise zu setzen. Wenn man einmal ein Modul gebaut hat, möchte man es möglichst leicht an anderen Stellen einbinden können. Den kompletten Code eines Moduls immer und immer wieder zu kopieren wird spätestens dann ein Problem, wenn man etwas verändern möchte oder muss. Dann geht man durch den gesamten Prototypen auf der Suche nach dem entsprechenden Code und führt mehrfach identische Anpassungen durch. Das ist alles andere als praktikabel.

Vom Problem zur Lösung: Modular Click Dummy

Da eine modulare Bauweise allein mit HTML nicht zu bewerkstelligen ist, habe ich ein System mithilfe von PHP geschrieben, das Modular Click Dummy System. Es besteht in der Basis nur aus zwei PHP-Klassen und zwei weiteren Include-Dateien. Dadurch ist es weit weiger mächtig als ein System wie zum Beispiel Katana aber auch viel leichter aufzusetzen. Die vier Basisdateien und der Wechsel von HTML- zu PHP-Dokumenten genügen, um den Modular Click Dummy zu verwenden. Spätestens bei der ersten Iteration mit dem Kunden beginnt man Zeit und Nerven zu sparen.

Wofür benötigt man das System, wenn man doch einfach die include Funktion von PHP verwenden könnte um Code wiederzuverwenden? Auch wenn man ein Modul an mehreren Stellen verwenden möchte, benötigt man oft eine gewisse Konfigurierbarkeit. Farbschemata, Background-Bilder oder zusätzliche CSS-Klassen variabel zu gestalten ist häufig eine Anforderung an die Module. Man muss also Variablen innerhalb eines Moduls verwenden können und hier stößt man bei einfachen Include-Dateien schnell auf Probleme.

Die Magie des Modular Click Dummy

Man möchte also Variablen innerhalb der Module verwenden und jedes Mal mit der include Funktion zur entsprechenden Datei navigieren ist auch nicht so toll. Hier kommt die PHP-Klasse Module.php ins spiel. Sie erzeugt für jedes Modulelement ein neues Objekt mit der dazugehörigen Include-Datei als Template und stellt bei Bedarf variablen bereit und. Die PHP-Klasse ModuleAutoLoader.php sorgt dafür, dass für jede Include-Datei ein Objekt auf der Grundlage der Klasse Module erzeugt wird und legt diese in entsprechenden Variablen ab. So lassen sich die einzelnen Module über den PHP-Code $moduleName->render(); einbinden.

Modular Click Dummy verwenden oder mitarbeiten

Das Projekt habe ich öffentlich über GitHub gehostet. Dort ist auch eine ausführliche Dokumentation (Englisch) zu finden. Wer Ideen zur Verbesserung hat oder Fehler findet, ist eingeladen Issues bei GitHub zu erstellen oder gar selbst mitzuarbeiten.

Screenshot der Modular Click Dummy GitHub-Seite