Über unsMediaKontaktImpressum
Frank Pientka 11. April 2017

JHipster: Moderne Web-Anwendungen mit Spring Boot und Angular

Bei JHipster handelt es sich um eine Produktivitäts-Toolsuite, die auf bewährte Werkzeuge und Frameworks aufsetzt. © Fxquadro / Fotolia.com
© Fxquadro / Fotolia.com

Die Entwicklung und vor allem die Aktualisierung von größeren Webanwendungen ist eine große Herausforderung, da man es mit einen bunten Strauß von Programmiersprachen, Werkzeugen und Technologien zu tun hat. Dabei ist gerade die Webentwicklung vielen Moden unterworfen. Gerade sehr populär sind hier Single-Page-Anwendungen und Microservices. Als Generator hilft das Full-Stack-Framework JHipster [1], ein stabiles Gerüst für moderne Webanwendungen zu erstellen und frisch zu halten. Wir stellen die neueste JHipster Version 4.1 vor.

JHipster

Wer heute eine größere, modernere Webanwendung bauen möchte, benötigt nicht nur ein umfangreiches Wissen und Können, sondern auch eine Menge an Werkzeugen und Technologien. Wenn man JHipster mit yo jhipster startet, bekommt man 15 Fragen zu der Art und den wichtigsten Bestandteilen eines neuen Projektes gestellt. Daraus erzeugt JHipster ein Anwendungsgerüst mit einer einheitlichen Architektur und Build-Umgebung. Das erleichtert nicht nur den Start, sondern später auch eine Aktualisierung. Alles Tätigkeiten, die sonst unnötig viel wertvolle Zeit in Anspruch nehmen.

Abb.1: Der JHipster-Projekt-Wizard. © Frank Pientka
Abb.1: Der JHipster-Projekt-Wizard. © Frank Pientka
Abb.2: JHipster, Hauptbestandteile. © Frank Pientka
Abb.2: JHipster, Hauptbestandteile. © Frank Pientka

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.

Abb.3: JHipster Projektstatistiken. © Frank Pientka
Abb.3: JHipster Projektstatistiken. © Frank Pientka

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.

IT-Tage 2017 - Web, App, JavaScript
Abb.4: JHipster, Willkommensseite. © Frank Pientka
Abb.4: JHipster, Willkommensseite. © Frank Pientka

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 yarn start 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.

Abb.5: Entity-Model im JDL-Studio. © Frank Pientka
Abb.5: Entity-Model im JDL-Studio. © Frank Pientka

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.

Fazit: Cloud-native mit JHipster

Die Anforderungen an dynamische und flexible Webanwendungen mit einer modernen und responsiven Oberfläche haben zugenommen. JHipster erleichtert nicht nur den Start, sondern auch eine folgenden Aktualisierungen. Der Generator erstellt ein einheitliches Anwendungsgerüst, das man zu einer größeren Anwendung ausbauen kann. Alles Tätigkeiten, die sonst unnötig viel wertvolle Zeit in Anspruch nehmen.

Mit JHipster werden die Einstiegshürden gesenkt und die Wahlmöglichkeiten erhöht. So bietet sich JHipster nicht nur als Alternative zum MEAN-Stack für Java-Entwickler an, sondern erschließt gleichzeitig die Vorteile von Spring Boot. Mit der Docker-Unterstützung und AWS Elastic Beanstalk ist es einfach geworden, Cloud-native Anwendungen zu entwickeln. Wer nicht Angular als Oberflächenframework einsetzen möchte, kann JHipster zum Erstellen von Microservices ohne Oberfläche einsetzen. Im Gleichschritt mit Spring Boot hat das Gespann JHipster und Angular schon einige größere Versionen herausgebracht und sich kontinuierlich weiterentwickelt. Trotz seines jugendlichen Alters kann JHipster eine große Reife bescheinigt werden. Damit kann man die Stärken von Java und JavaScript bei der Entwicklung von Webanwendungen optimal kombinieren, so dass der Weg zu Cloud-nativen Anwendungen weniger steinig ist.

nach Oben
Autor

Frank Pientka

Frank Pientka ist Softwarearchitekt und Mitgründer der iSAQB-Vereinigung. Ihm liegt vorallem die Qualität in der Software am Herzen.
>> Weiterlesen
Buch des Autors:

botMessage_toctoc_comments_929