JHipster: Moderne Web-Anwendungen mit Spring Boot und Angular

Auf Basis von Spring Boot [2], Angular [3] und Bootstrap [4] kann JHipster (s. Abb.2) eine komplette Webanwendung inklusive Anmeldung und Datenverwaltung generieren. 

Bei JHipster handelt es sich um eine Produktivitäts-Toolsuite, die auf bewährte Werkzeuge und Frameworks aufsetzt. JHipster setzt sich aus einem Werkzeug für die Anwendungsprojektstruktur (Yeoman), zwei Build-Werkzeugen (Gulp für JavaScript, Maven bzw. Gradle für Java) und einem Package-Manager (Bower bzw. Yarn) zusammen. JHipster wurde als Produkt 2013 von Julien Dubois gestartet, also kurz nach Spring Boot, auf dem der Java-Code des Backends basiert.

Inzwischen ist jedes Jahr eine Hauptversion erschienen, die das Produkt erweitert und verbessert hat. Die wachsende Community (s. Abb.3) und Projektbeispiele zeigen, dass es sich um ein lebendiges Projekt handelt. So nimmt die Zahl der Erweiterungen zu und es erscheinen monatlich mehrere Bugfixversionen.

Als Generator wird Yeoman und seit der neuesten Version der zu NPM kompatible, aber effizientere Paketmanager Yarn [5] eingesetzt.

JHipster-Einführung: Los geht's!

Wenn die benötigten Basiswerkzeuge bereits installiert und konfiguriert sind, ist der Start einfach. Zunächst muss man Node.js, Yarn, Git, Java 8 und entweder Maven oder Gradle installieren. Die weiteren benötigten Werkzeuge installiert und konfiguriert JHipster bei der initialen Projekterstellung mit yarn install. Denn man möchte sich ja nicht zu sehr mit Werkzeugen sondern mit der Umsetzung der fachlichen Anforderungen beschäftigen. Für unser erstes Projekt haben wir uns für eine monolithische Anwendung mit einer Angular-Oberfläche, einer H2-Datenbank und einer http-Authentifizierung entschieden.

Wenn Sie bereits ein bestehendes JHipster-Projekt mit einer älteren JHipster-Version haben, reicht es, yo jhipster:upgrade im Projektverzeichnis aufzurufen. Dabei wird neben der neuesten JHipster-Version auch der Code neu generiert. Der alte Code wird vorher mit Git lokal versioniert, um Änderungen, die durch den automatischen Merge passieren, nachvollziehen oder einfacher rückgängig machen zu können.

Um Ihre Java-Anwendung zu kompilieren und Spring Boot zu starten, rufen Sie entweder mvn oder gradle auf. Dann sollten Sie mit http:// localhost:8080 die Willkommensseite (s. Abb.3) von JHipster sehen. Alternativ können Sie mit yarnstart den Webpack2-Server (http:// localhost:9000) für das Frontend auch separat starten. Dort können Sie sich als Administrator (login="admin" mit password="admin") oder normaler Benutzer (login="user" mit password="user") anmelden.

JHipster und das Entity-Model: Das Fachmodell zuerst

Doch außer den Standardtabellen für die Verwaltung der Anwendung fehlt noch das eigene Domänenmodell. Immerhin enthält die Verwaltungsoberfläche einen Browser, für die mit Swagger dokumentierten REST-APIs http:// 127.0.0.1:8080/#/docs, Eine Anzeige über den Gesundheitszustand der Anwendung http:// 127.0.0.1:8080/#/jhi-metrics, eine Anzeige der Konfigurationseinstellungen http:// 127.0.0.1:8080/#/jhi-configuration und auch die Fehlerprotokolle unter http:// 127.0.0.1:8080/#/logs.

Sie können jetzt mit yo jhipster:entity <entityName> ihre eigene Entität einzeln mit Attributen und Beziehungen zu anderen Entitäten Schritt für Schritt erstellen. Da das bei einem komplexeren Datenmodell jedoch mühsam und fehlerhaft ist, kann das Entity-Model mit dem JHipster Domain Language (JDL) Studio http:// jhipster.github.io/jdl-studio/ textuell online erstellt werden. Das Entity-Model wird parallel grafisch in UML dargestellt und kann als Bild zusammen mit dem textuellen Entity-Model (jhipster-jdl.jh) heruntergeladen werden. Aus diesem Entity-Model generieren Sie eine Oberfläche mit den dazu gehörigen Datenbanktabellen und Backendcode inkrementell durch den Aufruf yo jhipster:import-jdl jhipster-jdl.jh.

Das heißt, Sie können später Veränderungen an dem Entity-Model vornehmen und JHipster erstellt automatisch die Änderungsskripte, um die Datenbank-Strukturen unter dem Verzeichnis src\main\resources\config\liquibase\changelog anzupassen.

Sobald Sie sich jetzt wieder in der Anwendung http:// 127.0.0.1:8080/ anmelden, können Sie bereits Daten in ihren Entities eingeben und einfache CRUD-Operationen ausführen. Mit JHipster 4 wird endlich Bootstrap 4, Angular 4 und damit Angular CLI unterstützt. Das macht es einfacher, auch eigene Webkomponentengerüste zu erstellen (mit ng generate component my-component).

Wenn dieses Jahr Angular 5 erscheinen wird, wird es nicht lange dauern, bis auch JHipster diese Version unterstützt. Damit unsere Anwendung dann mit Angular 5 funktioniert, muss nur yo jhipster:upgrade –force aufgerufen werden. Die Umstellung erfolgt dann automatisch über eine Neugenerierung aller Teile mit der aktuellen JHipster und Angular-Version.

Das Upgrade kann auch für die einzelnen Schichten separat vorgenommen werden. Soll nur die Oberfläche neu generieren, rufen Sie yo jhipster:client –force auf. Aus dem Entity-Modell können mit yo jhipster --with-entities die Serverteile neu erstellt werden. Sollte es beim Upgraden von Projekten die mit der Vorgängerversion erzeugt wurden, zu Problemen kommen, hilft es manchmal, den alten node_modules-Ordner manuell zu löschen und dann noch mal mit yo jhipster alles neu zu generieren.

Sollten trotzdem noch Änderungen in den Ursprungsdateien nicht richtig gemergt worden sein, so geht durch die automatische Git-Versionierung keine Änderung verloren und kann manuell nachgezogen werden. Damit wird die Pflege nicht nur des ausgelieferten Codes, sondern auch der Werkzeugumgebung weitgehend automatisiert. Das ist eine enorme Erleichterung. So kann man sich ganz auf die Fachlichkeit und die Optimierung der Oberfläche konzentrieren. Dadurch, dass die generierten Strukturen immer gleich aufgebaut sind, finden sich auch neue Teammitglieder schnell im JHipster-Projekt zurecht und können schneller produktiv arbeiten. Mit der 4er-Version von JHipster wurde der generierte Code schlanker und leichter lesbar.

JHipster und Datenbanken: Relational oder NoSQL

JHipster unterstützt eine Vielzahl von bekannten Technologien. Dabei werden sowohl relationale, als auch NoSQL-Datenbanken unterstützt, ohne dass man seinen Code ändern muss. Es werden sowohl für die Entwicklung als auch das Testen verschiedene Frameworks unterstützt, die die Arbeit erleichtern. Für die Produktion ist in Spring Boot ein eigenes Profil bereits konfiguriert. Dabei ist man beim Deployment recht flexibel, ob man eine einzige JAR-Datei mit integriertem Tomcat-Webserver ausliefert oder eine WAR-Datei in die Cloud bei Amazon AWS Elastic Beanstalk (yo jhipster:aws) installiert. Doch auch an die Unterstützung von Continuous Integration (CI) mit Jenkins und die Sicherung der Code-Qualität mit SonarQube ist über eine Docker Compose-Konfiguration durch JHipster ist gedacht.