Moderne Webanwendungen müssen heute mehr leisten als je zuvor: Sie sollen responsiv, zugänglich, wartbar und erweiterbar sein – und dabei gleichzeitig eine konsistente User Experience bieten. Um diese Anforderungen effizient zu erfüllen, hat PASCADA in den vergangenen Jahren einen eigenen Applikationsrahmen für Angular-basierte Frontends entwickelt. Dieser ist nicht nur technologisch ausgereift, sondern auch in realen Kundenprojekten bewährt.

In diesem Blogbeitrag geben wir einen Einblick in die Entstehung, Architektur und Vorteile dieser Bibliothek – und zeigen, wie sie sowohl unseren Kunden als auch unseren Entwicklerteams hilft, komplexe Anforderungen effizient umzusetzen.

Der Grundstein unseres Frameworks wurde in einem großen Kundenprojekt gelegt. Dort entstanden wiederverwendbare Komponenten, Services und Muster, die sich im produktiven Einsatz bewährt haben.

Aus diesen Bausteinen entstand nach und nach eine interne Bibliothek – kontinuierlich weiterentwickelt, verfeinert und um zusätzliche Funktionen ergänzt. Unser Ziel:
Ein leistungsfähiger und erprobter Applikationsrahmen, der die Entwicklung moderner Angular-Anwendungen beschleunigt und standardisiert.

Besonders wertvoll ist dabei, dass das Framework:

• in realen Projekten getestet wurde,
• von Experten konzipiert ist und
• ständig weiterentwickelt wird – sowohl in Kundenprojekten als auch bei internen Anwendungen wie dem Testcenter-Portal.

Für die Basis des UI-Designs setzen wir auf Bootstrap, eines der etabliertesten und zuverlässigsten CSS-Frameworks. Bootstrap ermöglicht nicht nur ein responsives Layout, sondern liefert auch robuste und standardisierte UI-Elemente, die wir gezielt in Angular-Komponenten kapseln.

Einsatz von Bootstrap

Beispiele hierfür sind:

• wiederverwendbare Navigationsleisten
• standardisierte Buttons
• anpassbare Formular-Layouts
• modularisierte Grid-Strukturen

Dadurch entsteht eine einheitliche, moderne Optik, die sich dennoch flexibel an Kundenanforderungen anpassen lässt.

Alternativen im Blick

Auch alternative CSS-Technologien wie Pure CSS oder CSS Grid werden je nach Projektbedarf in Betracht gezogen – denn entscheidend ist stets die optimale Lösung für das spezifische Produkt.

Herzstück des Angular-Applikationsrahmens ist unsere Sammlung an UI-Komponenten, die im Laufe vieler Projekte gereift ist. Sie helfen, komplexe Anforderungen mit minimalem Aufwand und maximaler Konsistenz umzusetzen.

Beispiel: Busy Indicator

Ein kleines, aber essentielles Element:
Unser Busy Indicator zeigt Nutzern an, dass im Hintergrund eine Aktion stattfindet, und verhindert parallel unzulässige Eingaben. Dieses Muster steigert sowohl die Usability als auch die Robustheit einer Anwendung.

Formularerstellung über Annotationen

Ein besonders starkes Feature ist die automatisierte Formularerzeugung aus Annotationen in den Geschäftsobjekten.

Statt Formulare manuell zu definieren, werden sie über deklarative Annotationen in den Modellklassen beschrieben – inklusive:

• Validierungen
• Optionen für Dropdowns
• Pflichtfelder
• Datentyp-Erkennung

Dieses Konzept haben wir bereits in einem separaten Blogbeitrag vorgestellt:
„Angular-Formulare aus Annotationen in Geschäftsobjekten“
https://pascada.de/angular-formulare-aus-annotationen-in-geschaeftsobjekten/

Für Demozwecke steht eine umfangreiche Beispielanwendung bereit, die regelmäßig aktualisiert wird und folgende Bereiche zeigt:

• Data Tables
• Formulare
• Popups & Dialoge
• Toasts & Systemmeldungen

Demo-Anwendung:
https://marlene.demo.testcenter.pascada.net

Natürlich ist unser Ansatz nicht der einzige – Angular bietet eine Vielzahl externer UI-Bibliotheken wie PrimeNG.

PrimeNG stellt mehr als 80 barrierefreie UI-Komponenten bereit und kommt bei einigen unserer Kunden zum Einsatz. Dennoch entscheiden wir uns häufig für den eigenen Applikationsrahmen, da dieser:

• exakt auf unsere Architekturprinzipien abgestimmt ist,
• aus Kundenprojekten heraus optimiert wurde,
• maximale Flexibilität erlaubt
• und eine konsistente User Experience garantiert.

Für interessierte Kunden, Partner und Entwickler bieten wir umfangreiche interne und externe Ressourcen:

• Marlene-Wiki (intern)
• GitLab – Angular Bibliothèque „Marlene“ (intern)
• Demo-Anwendung:
  https://marlene.demo.testcenter.pascada.net
• Online-Dokumentation:
  https://marlene.doku.testcenter.pascada.net
• Blogreihe zu Angular-Themen, u. a.:
  https://pascada.de/angular-formulare-aus-annotationen-in-geschaeftsobjekten/

Mit unserem Angular-Applikationsrahmen stellen wir ein erprobtes, flexibles und leistungsfähiges Fundament für moderne Webanwendungen bereit. Er unterstützt uns dabei, Kundenprojekte schneller, sicherer und mit hoher Qualität umzusetzen – und sorgt gleichzeitig dafür, dass unsere Entwicklerteams effizient arbeiten können.