© Excellent backgrounds/Shutterstock.com
Frontend-Modularisierung mit JSPs

Fragmente, Komponenten, Module


Wenn es um die Modularisierung einer Webanwendung geht, treffen wir in der Praxis häufig auf ein zweigeteiltes Bild. Die Backend-Services und -Ressourcen sind nach allen Regeln der Kunst in Schichten, Module und sonstige Strukturen aufgeteilt. Im Frontend jedoch, das in unserem Beispielfall aus JSPs zusammengesetzt ist, sucht man eine solche Modularisierung oftmals vergeblich.

Überlegen wir zunächst, wie eine richtige Modulstruktur aussehen könnte und sollte. Logisch wollen wir ein JSP-Template in zwei Arten von Elementen zerlegen: Fragmente und Komponenten.

Eine Komponente repräsentiert den kleinsten Teil, aus dem die Seite aufgebaut sein kann. Beispiele hierfür wären Eingabefelder, Auswahlboxen oder ein einfaches Label. Intern können Komponenten wiederum andere Komponenten nutzen. Für den Nutzer (also den Autor einer JSP-Seite) sind sie jedoch die letzte Strukturierungsebene, die er verwendet.

Ein Fragment auf der anderen Seite repräsentiert eine Reihe von logisch zusammengehörigen Komponenten. Eine typische Webseite lässt sich in der Regel in (mindestens) drei Fragmente unterteilen: die Kopfzeile (oder Header), den eigentlichen Inhaltsbereich und die Fußzeile (oder Footer). Jedes Fragment wiederum kann aus weiteren Fragmenten zusammengesetzt sein. Die Kopfzeile beispielsweise könnte ihrerseits aus einem Infofragment bestehen (in dem ein Logo und ein Titel angezeigt wird), einem Log-in-Fragment (in dem der Benutzer auf jeder Seite eine Anmeldung durchführen kann) sowie einem Menüfragment, in dem die Navigation durch die Seite dargestellt wird. Das Menüfragment wiederum könnte aus dem Hauptmenü, dem Profilmenü und dem Hilfemenü bestehen. Und so weiter.

Jedes dieser Fragmente besteht aus einer Reihe von Komponenten: Das Log-in-Fragment beispielsweise besteht aus einer Eingabefeldkomponente für den Benutzernamen, einer weiteren Eingabefeldkomponente für das Passwort und einer Schaltflächenkomponente für den Button, der den Log-in tatsächlich durchführt. Sehen wir uns also unsere Startseite aus, so könnte diese die Struktur in Listing 1 aufweisen.

Listing 1: Startseite

<!DOCTYPE html> <html> <head> </head> <body> <jsp:include page="header.jsp" /> <section id="content"> Hello World! </section> <jsp:include page="footer.jsp" /> </body> </html>

Wie oben beschrieben, können wir die Fragmente erkennen: Die Kopfzeile findet sich in der enthaltenen Datei header.jsp, die Fußzeile in der ebenfalls enthaltenen Datei footer.jsp. Der eigentliche Inhalt der Seite bef...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang