Unsere Bibliotheken

TypeScript-Generator

Zur Reduktion des Frontend Code-Umfangs als auch zur Beschleunigung und Vereinfachung der Testdurchführung im Frontend, nach den Änderungen durchgeführt im Backend, hat das blue veery Team einen TypeScript Generator gebaut.

Problembeschreibung

Die von uns entwickelten Webapplikationen benötigen zum Teil manuelle Tests, wo nach Änderungen – durchgeführt im Backend – die Frontendseite erneut getestet werden muss.
Die Identifizierung von Fehlern und deren Korrektur ist für den Frontenddeveloper sehr zeitaufwendig, da die Suche nach einer möglichen Veränderung meistens das Durchklicken der kompletten Applikationsmodule erfordert.

Architektonisch gesehen, kommunizieren die zwei Applikationswelten – Backend und Frontend – mittels HTTP, was ein textbasierter Protokoll ist, d.h. alle Attribute, die mittels dieses Protokolls übermittelt werden, verlieren nach dem Transfer den zugehörigen Datentyp (z.B. number, string). Da der Frontenddeveloper nicht den vollen Umfang an Funktionen und die Logik der aufgerufenen REST APIs kennt, nutzt er Hilfswerkzeuge, die ihm diese abstrahieren, z.B. Swagger. Leider ist auch Swagger nicht gut genug, um Testzeit zu verkürzen und die Frontendcodereduktion zu unterstützen, da er bei Erstellung des Modells in JSON und nach anschließender TypeScript Codegenerierung auch alle Datentypen verliert.

Lösung

Das Team hat also 2 Typen von Java Objekten generiert:

  • Controller, die die REST Endpoints exponieren – hier werden Klassen generiert, die dieselben Signaturen besitzen, wie die Java-Controller; Controller in TypeScript rufen mittels HTTP die REST Endpoints auf, also die Java Controllers
  • Modellklassen, die vom Endpoint die Entitäen liefern, die unser System beschreiben – hier werden in den Entitäten Interfaces generiert, die in TypeScript die gleichen Felder haben, wie die Entitäten in Java

Der Vorteil, der sich daraus ergibt, ist sofort sichtbar. Aus dem Backend-Code wird der TypeScript Code für die Controller und die Modelle generiert und der Frontend-Developer muss keine weiteren Calls durchführen, da er bereits
vorausgenerierte Funktionen verwendet hat. Diese sind in TypeScript geschrieben, also sollte er zuvor einen Controller oder ein Feld im gegebenen Modell verwendet haben, so wird der TypeScript Compiler bei jeglicher Änderung dieser Controller oder Felder einen Fehler melden – somit kann die Differenz sofort identifiziert werden.

Durch Einsatz unseres TypeScript Generators kann der Umfang des Frontend-Codes um 15% reduziert werden.

Eigenschaften

  • Java-Modell für TypeScript-Schnittstellen
  • Java-REST-Controller für TypeScript-Dienste
  • Jackson-Annotations
  • Spring MVC-Annotations
  • Benutzerdefinierte Typzuordnung
  • Paket pro Modulstrategie
  • Generiert die Importe
  • Unterstützung für Angular
  • Unterstützung für React

JSON Scopes

Dank unserer „JSON-Scopes“-Bibliothek erreichen wir Code-Ersparnis beim Serialisieren der Baumstruktur auf der Backend-Seite.

Eigenschaften in Überblick:

Weil JSON über Baumstruktur verfügt, gibt es keine Möglichkeit Objekte zu serialisieren die über zyklische (rekursive) Referenzen verfügen. Die Zyklen werden durch Java Persistent API gefordert. Weil das DTO Objekt keine vollständige Rekursion enthält, kann nur ein Teil des Baumes beschrieben werden, welches serialisiert werden soll.

Um den ganzen Baum abzubilden, muss der Code entsprechend dupliziert werden. Unsere Lösung, um den Baum zu serialisieren, sieht wie folgt aus: auf dem REST-Endpoint geben wir an, welches Teil des Baumes serialisiert werden sollte (wo die Rekursion enden soll). Das erfolgt durch die Serialisierung der Referenzen, wo wir das Objekt mit seinem ID und Typ serialisieren. Dadurch sind wir imstande sehr schnell das beliebige Teil des Baumes zu serialisieren und damit auch überprüfen welches Objekt bereits serialisiert worden ist. Reduktion des Codes auf der Server-Seite beträgt unserer Meinung nach, ca. 70%.