comSysto bei XING

08
.
11
.
2016

JHipster

Eine Lowlevel-Entwicklerin entdeckt die Webwelt

JHipster ist ein Generator für super hippe Web-Apps. Zählt man alle im JHipster Technologiestack vorhandenen Komponenten auf, hat man ganz schnell beim Java Buzzword Bingo gewonnen. Was genau dahinter steckt, hat sich Constanze mal aus der Perspektive einer Lowlevel Entwicklerin angeschaut.

Constanze

Lean Java Expert

Disclaimer:

Die letzten zwei Jahre habe ich mich hauptsächlich mit dem Linux Kernel und wie Android auf Betriebssystemebene funktioniert beschäftigt. Entwickelt habe ich zum Großteil mit C und einer Prise Python als Skriptsprache. Daher ist meine Sicht auf JHipster vermutlich eine andere, als die einer Java Expertin.

Was ist JHipster überhaupt?

JHipster ist ein Yeoman Generator, der eine Basis-Web-App mit Bootstrap und AngularJS als Frontend und Spring Boot als Backend generiert.

Alles klar, oder?

Hier eine kleine Erklärung der Bestandteile:

  • Yeoman ist ein Tool um Applikationen oder Teile davon zu generieren, was dann konkret generiert wird, hängt vom tatsächlichen Generator ab, in unserem Fall (JHipster) eine Web-App mit Angular und Spring Boot
  • Bootstrap ist ein HTML/CSS/JavaScript Framework und bietet zum Beispiel Templates für hübsche HTML Seiten
  • AngularJS ist ein JavaScript Framework für den Frontend-Teil von Web-Apps
  • Spring Boot ist eine vorkonfigurierte Spring Applikation die auch schon einen Web-Server integriert hat

Was brauche ich alles für JHipster?

Als erstes brauche ich natürlich Java8 und git, soweit so gut, die kennt ja wahrscheinlich jede, die bis hierher gelesen hat.

Dazu benötige ich allerdings noch einiges andere:

  • gradle oder maven, beide sind Buildtools, ähnlich zu make, wobei maven eher nur im Java Umfeld verwendet wird, während gradle auch durchaus bei anderen Sprachen eingesetzt wird (zum Beispiel bei Android)
  • npm einen Package-Manager für JavaScript, über dem man jede Menge Module installieren kann
  • bower, ein weiterer JavaScript Package-Manager (bower kann bereits mit npm installiert werden: npm install -g bower)
  • gulp ein Buildtool, ich nenne es jetzt mal make für JavaScript (npm install -g gulp-cli)
  • Yeoman der über das Kommando yo aufgerufen wird (npm install -g yo)
  • JHipster selbst natürlich (npm install -g generator-jhipster)

JHipster bietet auf seiner Seite auch eine ausführliche Anleitung die beschreibt wie man alles installieren muss.

Wie generiere ich eine Web-App?

Erstmal eine wichtige Sache vorab: JHipster generiert die Web-App in dem Verzeichnis in dem man steht. Also erst einen Ordner für die App anlegen und sich da hinein begeben, bevor man die App generiert.

Befindet man sich in dem Ordner, hat alles installiert und ist bereit ein paar Fragen zu beantworten, kann man auch schon mit dem Generieren beginnen. Mit dem Befehl

yo jhipster

startet man das Ganze, was dann so oder so ähnlich aussieht:

Ich habe eine Beispiel-App gebaut, die ich Boardgame Heaven genannt habe. Bei der Konfiguration habe ich mich meistens für die Default-Option entschieden.

Nachdem man alle Fragen beantwortet hat, laden npm und bower die nötigen Pakete aus dem Internet und etwa 3 Minuten später hat man eine fertige Applikation.

Ein Vorteil von Spring Boot ist, dass man gleich einen eingebetteten Webserver dabei hat, der gestartet wird, wenn man die App startet. Wenn man dann also folgendes auf der Kommandozeile sieht, kann man sich die App schon im Browser ankucken:

Man hat auch die Möglichkeit in einem zweiten Terminal Fenster gulp zu starten. gulp verwendet Browser-Sync, ein Tool, das den Browser automatisch refreshed wenn man etwas an der App geändert hat. Startet man nun gulp öffnet sich automatisch ein Tab im Browser und zeigt die generierte App an.

Wenn das alles funktioniert hat, bietet es sich an diesen Stand als initialen Commit ins git zu packen, damit man im Zweifelsfall wieder zurück kann.

Was kann die App jetzt alles?

In der Web-App gibt es jetzt bereits “Sign in/ Register”. Einloggen kann man sich in der Default-Konfiguration mit dem Klassiker (admin: admin, user: user).

Sign in Drop Down
Sign in Drop Down

Hat man beim Generieren Internationalisierung ausgewählt, kann man auch die Sprache verstellen.

Sprachwahl Drop Down
Sprachwahl Drop Down

Hat man sich als user eingeloggt kann man sein Profil anpassen, sein Passwort ändern und seine Sessions einsehen. Es gibt auch einen zusätzlichen Reiter Entitäten, mehr zu diesen gleich.

Wenn man sich allerdings als Admin einloggt, kann man schon ein bisschen mehr tun. Unter dem Reiter Administration findet sich:

User Verwaltung
User Verwaltung
Status der Applikation
Status der Applikation
Konfiguration der Applikation
Konfiguration der Applikation
Metriken zur Applikation
Metriken zur Applikation
Übersicht über die Login-Versuche (erfolgreich/nicht erfolgreich)
Übersicht über die Login-Versuche (erfolgreich/nicht erfolgreich)
Übersicht über die Logger mit Konfiguration der Log-Level
Übersicht über die Logger mit Konfiguration der Log-Level
Übersicht über die REST-API der App (bereitgestellt von swagger (http://swagger.io/))
Übersicht über die REST-API der App (bereitgestellt von swagger)
Interface zur Datenbank
Interface zur Datenbank

Das ist jetzt zwar schon ganz schön viel, aber so richtig was damit machen kann man noch nicht.

Wie bekomme ich da meine Entitäten rein?

Meistens will man ja mit seiner Web-App Daten anzeigen, eingeben und/oder bearbeiten (klassische CRUD-Anwendung). JHipster kann hier schon einiges generieren und es gibt dafür nicht nur eine Möglichkeit, sondern gleich mehrere.

Entitäten-Generator

Die einfachste ist der Entitäten-Generator, der mit

yo jhipster:entity irgendein_name

aufgerufen wird. Dieser erzeugt eine Entität mit dem gewählten Namen und läßt einen Felder und, bei SQL-Datenbanken, auch Beziehungen hinzufügen. Wie bei den anderen Möglichkeiten auch, kann man beim Generieren bereits Constraints angeben (ob das Feld gesetzt sein muss, minimale/maximale Länge bei Strings oder min/max Werte für Integer).

Beim Erzeugen von Beziehungen muss man beachten, dass zuerst die Entität generiert werden muss, der die Beziehung “gehört”. Was vielleicht auch überrascht: wählt man beim Erzeugen der App eine NoSQL Datenbank (unterstützt werden MongoDB und Cassandra) kann JHipster derzeit keine Beziehungen generieren.

jdl

Eine weitere Möglichkeit Entitäten zu erzeugen ist jdl, der JHipster Domain Language. Hier erstellt man eine .jh Datei und trägt dort die Entitäten ein. JHipster bietet auch einen jdl Editor an, der einem gleich ein Entity-Relationship-Diagramm aus dem jdl erstellt. Die jdl Datei für meine Beispiel-Applikation sieht so aus:

Boardgame jdl
Boardgame jdl

In meinem Beispiel gibt es eine Beziehung von boardgame auf user, obwohl ich user nicht als Entität definiert habe. Das liegt daran, dass die user Entität bereits beim Anlegen der Applikation erzeugt wird. Sie wird für das User-Management benötigt. Beziehungen auf diese spezielle Entität sind nur möglich, wenn die andere Entität der “Besitzer” der Beziehung ist. Hier kann es auch passieren, dass der Code, der in user generiert werden müsste, nicht erstellt wird und von Hand geschrieben werden muss. Bei einer many-to-many Beziehung, wie ich sie definiert habe, muss in user Code eingefügt werden, damit die App korrekt funktioniert.

JHipster-UML

Als weitere Möglichkeit steht auch noch ein Tool zur Verfügung, das aus UML-Diagrammen Entitäten generiert. Das habe ich allerdings nicht ausprobiert.

Was wird zu den Entitäten generiert?

Zu jeder Entität generiert JHipster:

  • Einen List-View mit einer Liste der bisher gespeicherten Instanzen (Pagination ist konfigurierbar), wobei jeder Eintrag drei Buttons hat, “Details”, “Bearbeiten” und “Löschen”
  • Einen Detail-View zur Ansicht einer Instanz

Wie zeige ich meine App der Welt?

Mit ein paar einfachen Befehlen kann man die Applikation für Produktion bauen und bei einer Cloud-Plattform seiner Wahl (HerokuCloud FoundryAWS) deployen. Ich hab das einmal bei Heroku ausprobiert:

  1. Einen Account anlegen und den Heroku Toolbelt installieren
  2. heroku login
  3. yo jhipster:heroku

Das war’s schon. Mit heroku logs –tail kann man sich das Log anschauen. Es kann sein, dass die Applikation nicht korrekt startet, weil sie zu lange braucht und der Timeout bei Heroku ziemlich klein ist (60 Sekunden). Dann einfach noch mal starten, bei mir war sie beim zweiten Mal schneller und hat korrekt gebootet. Man kann auch ein Ticket bei Heroku aufmachen und sie bitten den Timeout zu vergrößern.

Fazit

Mit JHipster hat man ziemlich schnell eine ziemlich ansehnliche CRUD App, die auch noch einiges an Features hat, wie zum Beispiel User-Management und Internationalisierung. Wenn man eine AngularJS und Spring Boot Applikation haben will, lohnt es sich JHipster zu benutzen um den initialen Anfangs-Aufwand zu minimieren. Nach dem Erzeugen macht es aber Sinn die App dann von Hand weiter zu entwickeln. Auch wenn man beispielsweise nachträglich weitere Entitäten generieren kann, muss man doch einiges von Hand anpassen, damit wieder alles zusammen passt.

Stellt sich noch die Frage, ob JHipster ein guter Einstieg in die Java-Web-Welt ist. Mit JHipster anzufangen ist ein bisschen wie von 0 auf 100 in 3,8 Sekunden. Es ist einfach alles drin was im Moment so angesagt ist. Auch wenn man relativ problemlos ein Projekt erzeugen kann, steht man spätestens wenn mal etwas nicht funktioniert vor der Frage, wo man jetzt genau ansetzen muss. Bei mir hat nicht alles auf Anhieb funktioniert und ich musste noch einige Male das Internet und meine Kollegen zu Rate ziehen.

Wenn man als Java-Web Neuling die App generiert hat und sie dann von Hand weiter entwickeln will hat man allerdings auch einiges zu entdecken. Ich musste mir erstmal Zeit nehmen um zu jeder Komponente des Technologie-Stacks, was ja durchaus viele sind, raus zu suchen, was die denn eigentlich genau macht. Das kostet Zeit, bietet aber auch den Vorteil, dass man ziemlich viel zumindest kennen lernt. Jedenfalls von dem, was im Moment in der Java-Web-Welt hip ist.

Was mir gut gefallen hat, ist die klare Strukturierung des generierten Projekts. Dadurch habe ich mich relativ leicht getan, die Stellen zu finden, an denen ich etwas ändern will. Auch die Technologie-Kombination Spring Boot und AngularJS finde ich angenehm. Die klare Trennung von Backend und Frontend, verbunden durch den REST-Service, macht das ganze für Neulinge einfacher zu verstehen als Frameworks, bei denen server-seitig gerendert wird. So zumindest meine Meinung. Zudem ist es durch Spring Boot nicht nötig einen Application-Server aufzusetzen und die App zu deployen. Das macht den Aufsetz-Aufwand gering und man kann sofort ausprobieren, ob die App funktioniert.

Abschließend würde ich sagen, dass JHipster durchaus geeignet ist einen Einstieg in die Java-Web-Welt zu bieten. Man muss allerdings mit einer gewissen Frustrationstoleranz und eventuell ein paar netten Kolleginnen und Kollegen ausgestattet sein, damit der Einstieg auch ein erfolgreicher ist (was bei mir natürlich (beides!) der Fall ist ;)).

Quellen

Themen:

Kommentare?

comSysto Logo