Suche
Wartbare Frontends von Web-Anwendungen

Das Knorxx Framework

Jan Scheible
© shutterstock.com/Lev Kropotov

Das Knorxx Framework ist ein leichtgewichtiges Java-Framework für die Frontend-Entwicklung von Web-Anwendungen. Es erlaubt die Generierung von HTML, CSS und JavaScript aus einer zentralen Java-Codebasis. Trotz der Verwendung von Java, welches im Gegensatz zu JavaScript zuerst kompiliert werden muss, sind Änderungen an den Frontend-Klassen sofort nach einem Neuladen der Web-Seite im Browser sichtbar.

In den letzten Jahren wurde der Umfang der Frontend-Entwicklung von Web-Anwendungen immer größer. Wo früher die fertigen HTML-Seiten vom Server generiert und ausgeliefert wurden, bestehen heutzutage Web-Anwendungen teilweise nur noch aus einer einzelnen HTML-Datei (Single-page Web-Anwendung). Dabei wird die Benutzeroberfläche mittels JavaScript erstellt, und dynamische Inhalte werden per AJAX nachgeladen. Durch diesen Wandel wurde JavaScript zum Dreh- und Angelpunkt der Frontend-Entwicklung.

Motivation und Zielsetzung

Die Verwendung des Frameworks wird motiviert durch eine unzureichende Wartbarkeit von Frontends bei der direkten Verwendung von HTML, CSS und JavaScript. Dabei liegt der Fokus auf einer Verbesserung der Modifizierbarkeit, Testbarkeit und Analysierbarkeit (vergleiche Qualitätsmodell der ISO 25000). Die Modifizierbarkeit soll durch die Verwendung einer zentralen Java-Codebasis verbessert werden, da sie für eine konsistente Verwendung der Bezeichner in allen Notationen sorgt. Auch die Testbarkeit soll von der zentralen Codebasis profitieren, da so z. B. sichergestellt wird, dass die Bezeichner im JavaScript-Code mit den Bezeichnern in den GUI-Tests übereinstimmen. Eine erhöhte Analysierbarkeit kommt durch die Verwendung von Java zustande, da dann IDE-Features zur Code-Navigation im Frontend-Code verwendet werden können.

Technische Umsetzung

Abbildung 1 zeigt einen Überblick über die Architektur des Knorxx Frameworks. Im Falle von JavaScript wird für die Generierung der Client-seitigen Klassen ein Transpiler verwendet, also ein Quellcode-zu-Quellcode Compiler. Hierzu wird st-js verwendet, aber im Prinzip ist der verwendete Transpiler austauschbar. Für HTML und CSS wird jeweils eine DSL (Domain Specific Language) verwendet. Bei HTML ist es renderSnake und für die Generierung von CSS wird Genesis verwendet. Zur Generierung der Datenbank-Metamodelle kann ein Generator wie z. B. Hibernate JPA 2 Metamodel Generator zum Einsatz kommen.

Abb. 1: Überblick über die Architektur des Knorxx Frameworks

Damit Änderungen an den Frontend-Klassen sofort nach einem Neuladen der Web-Seite im Browser sichtbar werden, wird ein spezieller ClassLoader verwendet, der Klassen zur Laufzeit nachladen kann. Das Neuladen ist möglich, da die neu geladenen Java-Klassen nach der Generierung des JavaScript-Codes nicht mehr benötigt werden. Dadurch kann es zu keinen Inkompatibilitäten zwischen verschiedenen Versionen der gleichen Klasse kommen. Außerdem kann der ClassLoader einige st-js-Annotationen, wie z. B. @Namespace zur Definition des JavaScript-Namensraums, automatisch zu den Klassen hinzufügen. Dies ist ein Beispiel dafür, dass das Knorxx Framework auf Konvention vor Konfiguration setzt und somit unnötiger Code vermieden wird.

Beispiel-Code

Listing 1 zeigt eine einfache Implementierung einer Web-Seite mit dem Knorxx Framework. Es wird mit jQuery darauf gewartet, dass die Seite vollständig geladen ist und dann eine Meldung ausgegeben. Dank der kürzlich hinzugekommenen Unterstützung von Java 8 ist die Verwendung vom Java 8 Lambda-Ausdrücken möglich.

public class DemoPage extends WebPage {
    public void render() {
        $(window).load((Event evt, Element el) -> {
            alert(“This is actually Java... ;-)“);
        });
    }
}

Ende

Um das Debuggen der generierten JavaScript-Dateien zu erleichtern, werden Source Maps generiert, welche die originalen Java-Quellcodepositionen mit den Quellcodepositionen in den generierten JavaScript-Dateien verknüpfen.

Listing 2 zeigt eine CSS-Definition. Zur Definition der CSS-Klassen wird eine DSL verwendet. Dadurch, dass die CSS-Definitionen Java-Code sind, kann in ihnen auch gerechnet und zentrale Konstanten (wie z.B. DEFAULT_COLOR in Listing 2) referenziert werden. Dies ist in CSS ohne Erweiterungen wie z.B. LESS nicht möglich.

public class Appearance extends CssDefinition {
    String HEADING_STYLE = build(Properties.builder()
            .setBackground(convertColor(DEFAULT_COLOR))
            .setColor(convertColor(Color.WHITE)));
}

Das Knorxx Framework generiert zur Laufzeit das HTML-Gerüst für die Web-Seite. Die verwendeten Bibliotheken werden eingebunden, alle benötigten Klassen werden generiert und die render()-Methode der Web-Seite wird aufgerufen. Dadurch entfällt z. B. ein manuelles Abhängigkeitsmanagement, da durch eine Analyse der Java-Klassen alle Abhängigkeiten gefunden werden können.

Serverseitige Integration

Das Knorxx Framework ist kein serverseitiges Framework. Vielmehr stellt es Adapter für bereits existierende Frameworks bereit. Der am weitesten entwickelte Adapter ist momentan der Spring-Adapter. So wird z. B. ein Spring-Controller zum Verknüpfen der URLs mit den entsprechenden WebPage-Instanzen verwendet. 

Des Weiteren enthält das Knorxx Framework Unterstützung für RPC-Services, Message Queues und eine zentrale Fehlerbehandlung. Im Gegensatz zu Frameworks wie z. B. GWT ist das Knorxx Framework jedoch sehr flexibel und die Verwendung der einzelnen Features ist optional.

Fazit

Die anfangs erwähnten Ziele können als erfüllt angesehen werden. Auf der einen Seite verbessert sich die Modifizierbarkeit, Testbarkeit und Analysierbarkeit der Frontends durch die Verwendung der zentralen Java-Codebais. Auf der anderen Seite ermöglicht der spezielle ClassLoader, dass Änderungen an den Frontend-Klassen sofort nach einem Neuladen der Web-Seite im Browser sichtbar sind.

Trotzdem ist das Knorxx Framework sehr leichtgewichtig und sehr nah am Browser. So wird beispielsweise kein clientseitiges GUI-Framework fest vorgegeben und neue Browser-APIs können mit wenig Aufwand hinzugefügt werden. Außerdem verwendet es weder eine Abstraktionsschicht für den Browser als Laufzeitumgebung noch eine Ausführbarkeit der Java-Klassen, aus denen der Frontend-Code generiert wird. Dadurch verringert sich die Komplexität des Frameworks im Vergleich zu beispielsweise GWT signifikant.

Allerdings befindet sich das Knorxx Framework in einem frühen Stadium (verfügbar über GitHub). Bisher wurden nur kleinere Demo-Anwendungen damit umgesetzt. Dennoch kann davon ausgegangen werden, dass die Generierung des JavaScript-Codes stabil ist, da das Knorxx Framework für die Generierung st-js verwendet. 

Aufmacherbild: new home currently under construction against blue sky von shutterstock.com/Urheberrecht: Lev Kropotov

Geschrieben von
Jan Scheible
Jan Scheible
Dr. Jan Scheible arbeitet als Senior Developer bei der TRANSPOREON Gruppe in Ulm an der MERCAREON Plattform. Er beschäftigt sich bereits seit dem Jahr 2000 mit Java. Seine aktuellen Schwerpunkte sind die Wartbarkeit und Sicherheit bei der Entwicklung von Web-Anwendungen.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.