Gleich bei zwei grösseren Projekten setzen wir bei Puzzle voll auf responsive Single Page Applications mit AngularJS. Wir wollen unseren Kunden damit moderne und ansprechende Web-Oberflächen bauen, die einfach zu bedienen sind, egal welches Gerät gerade benutzt wird.

Weil damit die fast komplette Anzeigelogik ins Front-End wandert, besteht das Back-End nur noch aus schlanken REST-Endpoints, die sich aufs Wesentliche konzentrieren können: Solide Datenhaltung, zuverlässiger Zugriffsschutz, gute Performance und die Wiederverwendbarkeit der Schnittstelle.

RESTful API

Einigt man sich bei einer Web-Applikation darauf, das Back-End als reine REST-Schnittstelle (RESTful API) anzubieten, dann ergeben sich daraus mehrere Vorteile: Es gibt eine klar definierte (und mit Tools wie Swagger UI eine automatisch dokumentierte) Schnittstelle zwischen GUI und Server. Beide Seiten sind technologisch voneinander unabhängig und können theoretisch beliebig ausgetauscht werden.

In der Web-Oberfläche kann also ein beliebig modernes Javascript-Framework eingesetzt werden, ohne dass dies einen Einfluss auf den Rest der Applikation hätte.

Eine RESTful API ist zudem gut testbar und kann einfach wiederverwendet werden, beispielsweise können die Endpoints direkt durch Drittapplikationen verwendet werden.

Responsive Single Page Applications mit AngularJS

AngularJS 1.x ist zugegebenermassen auch nicht mehr der letzte Schrei, da es doch schon einige Jahre auf dem Buckel hat. Trotzdem kann man damit moderne Web-GUIs bauen, da es sich ja „lediglich“ um ein Javascript-MV*-Framework handelt. Es ist daher grösstenteils unabhängig von Design- bzw. Darstellungsframeworks die auf HTML und CSS basieren.

Richtig konzipiert und umgesetzt kann eine Angular-Web-Applikation zu 100% responsive sein, sich also auf beinahe beliebige Bildschirmgrössen verschiedener Geräte anpassen.

Ein grosser Vorteil von AngularJS ist, dass man damit Single Page Applications bauen kann. Das heisst, im Optimalfall wird nur ein Mal eine komplette HTML-Seite mit Stylesheets und Scripts geladen und danach werden nur noch Nutzdaten über eine REST-Schnittstelle ausgetauscht. Damit eliminiert man die Notwendigkeit, dass das Back-End bei jeder Anfrage in HTML antwortet, beziehungsweise überhaupt etwas über die Darstellung wissen muss.

Darum kann man die beiden Applikationsteile sehr gut getrennt entwickeln und laufen lassen, wenn nötig auch auf unterschiedlichen Serven.

Ein weiterer Vorteil ergibt sich aus dem längeren Bestehen und der Beliebtheit von AngularJS: Es gibt eine riesige Menge von bereits vorhandenen Modulen, die frei zur Verfügung stehen und einem sehr viel Arbeit abnehmen können. Einige Beispiele, die wir bei uns einsetzen: UI Router, angular translate, Restangular, Angular Material.

Unser Stack für den Build- und Entwicklungsprozess sieht momentan so aus: Wir benutzen NPM und Bower für die Dependency-Verwaltung, Gulp für den Build, Karma/Jasmine für die Unit Tests und Gulp/Browsersync für die lokale Entwicklung. Für die Integration in den Maven-Buildprozess benutzen wir das maven-frontend-plugin.

Java EE 7 Back-End

Mit Java EE 7 wurden sehr viele Technologien in den JEE-Standard aufgenommen, für die vorher ausgewachsene Frameworks wie Spring notwendig waren. Wir setzen voll auf diese Standards und ergänzen sie nur dort wo notwendig mit Drittframeworks. Beispielsweise benötigen wir für die Datenbank die Möglichkeit der automatischen Auditierung oder eine indizierte Volltextsuche. Darum setzen wir dort Hibernate ein, was den JPA Standard mit den Frameworks Hibernate Envers und Hibernate Search um diese Funktionalität erweitert.

Als Applikationsserver, der den EE7-Standard vollumfänglich unterstützt, setzen wir Wildfly 10 (bzw. für die Produktion dann JBoss EAP 7) ein. Für die Datenbank setzen wir PostgreSQL ein. Beide genannten Server sind Open Source, werden aktiv weiter entwickelt und haben eine lebendige Community.

Wiederverwendbare Komponenten

Wir haben einen Applikations-Stack gewählt, der möglichst zukunftssicher ist. Im Front-End behalten wir die Veröffentlichung von AngularJS 2 im Auge, die im Sommer 2016 erwartet wird. Wir bauen unsere Angular-Module so, dass sie möglichst einfach wiederverwendet und migriert werden können. Auch bezüglich Know-How schauen wir, dass wir möglichst Angular-2-ready sind, die nächsten Schulungen zu ES6 und Angular 2 sind bereits geplant.

Im Back-End sind wir dank Java EE 7 top aktuell unterwegs. Die Komponenten, die wir gebaut haben können wir direkt in anderen Projekten wiederverwenden. Jedenfalls konnten wir bei den zwei momentan auf diesem Stack laufenden Projekte viele Synergien nutzen und einiges an Programmcode teilen.