Alle Beiträge, jStage Platform, Technologien & Entwicklung

Agile Webentwicklung mit Spring Boot und AngularJS

Technologie-Vorträge über aktuelle Kundenprojekte oder rund um die Software-Entwicklung im Allgemeinen sind in der iSYS Software GmbH schon seit langem eine gern gesehene Tradition. In der diesmaligen Veranstaltung von Fabian Trampusch und Najum Ali ging es um Webentwicklung und dabei konkret über den in drei Projekten erfolgreich eingesetzten Technologiestack. Dabei spielen besonders die beiden Frameworks Spring Boot und AngularJS eine große Rolle. Der Fokus dieses Beitrags liegt auf der Erfahrung, die mit diesen beiden Technologien im Zusammenspiel gemacht wurden.

Projektanforderung

Sowohl für interne als auch für externe Kundenprojekte sind aktuell Webanwendungen der Standard, um fachspezifische Datenpflege zu ermöglichen. Dabei müssen Daten vom Server angefordert werden, welche von Endbenutzern (je nach Recht) manipuliert und wieder gespeichert werden können. Auch wenn sich die fachlichen Anforderungen teilweise sehr unterscheiden, so ist jedoch die technische Handhabung der Daten sehr ähnlich.

Für die technische Umsetzung wurden moderne Frameworks eingesetzt, welche ausschließlich unter Opensource-Lizenzen stehen. Diese Frameworks übernehmen einen Großteil der Standardimplementierung einer Webanwendung, sodass sich der Entwickler vielmehr auf die tatsächliche Geschäftslogik konzentrieren kann. Demnach kann man erste Ergebnisse der Anwendung schon nach wenigen Stunden sehen und diese mit dem Kunden in agilen Iterationen abstimmen.

Technologiestack mit Spring Boot und AngularJS

Technologiestack mit AngularJS, Bootstrap, Spring Boot, Spring Data REST, Spring Data JPA, Hibernate, Liquibase, MariaDB

Abb.1 Vollständiger Technologiestack der Webanwendung

Der grundlegende Gedanke der Architektur ist eine Anwendung mit einer klassischen relationalen Datenbank und einer auf Spring basierenden Webanwendung, die Daten per REST-Schnittstelle und einer Zugriffskontrolle nach Außen freigibt. Ein authentifizierter Client kann den Server via HTTP-Methoden wie GET, POST oder DELETE ansprechen und die Daten bearbeiten.

Backend

Für die Datenbasis setzen wir MariaDB ein. Bisher haben wir in anderen Projekten, wie zum Beispiel beim jStage eShop, gute Erfahrungen mit MariaDB gemacht. MariaDB ist ein Fork der bekannten relationalen Datenbank MySQL. Die auf Performance optimierte MariaDB wird stetig weiterentwickelt und bietet für den kommerziellen Einsatz auch eine kostenlose Clusterdatenbank, um z. B. eine Multi-Master-Replikation bereitstellen zu können.

Für die Datenbankversionierung wird Liquibase eingesetzt und für das klassische OR-Mapping Hibernate. Über die Themen Liquibase und Hibernate wurden bereits eigene Beiträge veröffentlicht.

Spring Boot

Das Spring Framework hat sich schon von Anfang an die Aufgabe gestellt, die Enterprise Entwicklung unter Java deutlich zu vereinfachen. Mit Spring Boot sind die Entwickler von Pivotal einen Schritt weiter gegangen. Hiermit lässt sich eine Webanwendung mit wenig Konfiguration einrichten, welche in einem eingebetteten Tomcat direkt gestartet werden kann. Die Handhabung von Spring Boot ist so konzipiert, dass die meisten Standardeinstellungen für gängige Webanwendungen verwendbar sind und keine langen XML-Dateien angelegt werden müssen. Dies ist beim “großen Bruder” von Spring Boot, dem Spring Framework, ein häufig kritisierter Punkt. Möchte man spezielle Konfigurationen ändern, zum Beispiel einen CSRF-Filter integrieren, so kann dies in Java im Fluent-API Stil bewerkstelligt werden.

Spring Data JPA / REST

Hat man eine Webanwendung mit Spring Boot und der nötigen Rechteprüfung erstellt, so möchte man sich zunächst seiner fachlichen Geschäftslogik und dem Datenmodell widmen. Nachdem das Datenmodell mit Liquibase und JPA-Entitäten erstellt wurde, beginnt die Arbeit an der Schnittstelle für die Webapplikation zur Datenschicht. Mit Hilfe der Integration von Spring Data in unsere Spring Boot Anwendung, wird ein großer Teil der Standardimplementierung, wie z. B. eine Entität speichern, per REST freigeben, HTTP-Anfragen  verarbeiten und vieles mehr, bereits automatisch bereitgestellt. Genau gesagt ist Spring Data ein Dachprojekt mit vielen Submodulen, welche Anbindung an Datenbanken und -Adapter, wie beispielsweise MongoDB, Neo4J oder JPA, anbieten.

Um unsere Anforderung abdecken zu können, benötigen wir Spring Data JPA und Spring Data REST. Hiermit wird unsere Datenschicht, als auch die Export-Schnittstelle via REST, weitestgehend automatisch von Spring bereitgestellt.

Frontend

Per se kann die Anwendung von jedem beliebigen Client verwendet werden, welcher das HTTP-Protokoll unterstützt. Dies können z. B. Webbrowser, Desktopapplikationen oder auch und Apps für Smartphone und Tablets sein.

Bei den aktuellen Projekten müssen teilweise große und komplex  zusammenhängende Datenmengen gehandhabt werden. Für Darstellung und Pflege eignen sich deshalb Tabellen sehr gut, welche auf Grund ihrer Tabellenbreite, in einem Webbrowser gut darstellbar sind. Weiterhin waren mobile Geräte in den bisherigen Projekten auch keine zwingende Anforderung, da die Daten von den Endanwendern mit gewöhnlichen Rechnern bearbeitet werden.

Für die clientseitige Realisierung im Browser, haben wir AngularJS verwendet. Da unsere Webanwendung keine klassischen, fertig gerenderten HTML Dokumente and die Clients verschickt, sondern lediglich Entitäten in Form von JSON-Dokumenten über eine RESTful API, eignet sich AngularJS sehr gut. Die Hauptaufgabe dieses JavaScript-Frameworks ist die Konsumierung der REST-Schnittstelle und die dynamische Erzeugung des DOM. Weiterhin werden jegliche Benutzeraktionen auf der Oberfläche von AngularJS verarbeitet und die geänderten Daten an die REST-Schnittstelle übermittelt.

Bootstrap

Natürlich darf hier der benötigte Augenschmaus und eine gewissen User Experience für die (mittlerweile recht verwöhnten) Endbenutzer nicht fehlen. Für ein grundlegendes Styling der Weboberfläche wurde die recht bekannte Bootstrap Bibliothek verwendet. Diese umfasst, neben einem Responsive Design, auch noch mehrere Komponenten wie z. B. eine Navigationsbar oder ein Dropdown-Menü.

Für die bei Bootstrap mit JavaScript realisierten Funktionalitäten existieren mittlerweile auch Implementierungen (z. B. AngularStrap), die diese in Form von AngularJS Direktiven bereitstellen. Dies ist vor Allem aus Architekturgründen vorteilhaft. AngularJS-Anwendungen trennen strikt zwischen Oberfläche und Anwendungslogik. Der größte Teil des Codes in AngularJS-Anwendungen nimmt keine DOM-Manipulation vor. Die einzige Ausnahme stellen die wiederverwendbaren Direktiven dar. Außerdem entfällt so auch ganz nebenbei die Abhängigkeit zu jQuery.

 agile-webentwicklung-mit-spring-boot-und-angularjs-collage

Abb. 2 Impressionen der Veranstaltung

Betreiben Sie auch Projekte mit Webanwendungen und eventuell in einem ähnlichen Technologie-Stil? Für Diskussionen und Fragen zu den einzelnen Technologien freuen wir uns auf Ihre Kommentare und Anregungen!