Mit Single-Page-Applications Benutzererfahrungen optimieren

Heutzutage ist ein ansprechender Webauftritt für eine Marke unverzichtbar. Dazu gehört eine hohe Leistungsfähigkeit, ein intuitiv zu bedienendes User Interface sowie ein flüssiges performantes Benutzererlebnis. Insbesondere wenn Unternehmen ein neues Corporate UI umsetzen möchten, muss der bestehende Webauftritt oftmals von Grund auf technisch auf eine neue Basis gebracht werden – sowohl im Backend als auch im Frontend. Wie ein Headless CMS und eine Single-Page-Architektur zur Stärkung der Unternehmensidentität und des Markenimages beitragen können, erfahren Sie in diesem Blogartikel.

Als Single-Page-Webanwendung (Single-Page-Application, kurz SPA) oder Einzelseiten-Webanwendung wird eine Webanwendung bezeichnet, die aus einem einzigen HTML-Dokument besteht und deren Inhalte dynamisch nachgeladen werden. Im Gegensatz dazu bestehen klassische Webanwendungen aus mehreren, untereinander verlinkten HTML-Dokumenten. Hierdurch wird die Grundlage geschaffen, eine Webanwendung in Form einer Rich Client-Verteilung zu entwickeln. Eine verstärkte client-seitige Ausführung der Webanwendung ermöglicht eine Reduzierung der Serverlast sowie die Umsetzung von selbstständigen Webclients, die beispielsweise eine Offline-Unterstützung anbieten.

Auf Basis dieser Architektur können Webauftritte von Anfang an entwickelt und designed sowie im finalen Webauftritt verwaltet werden. Zwei Schlüsseltechnologien, mit denen sich die Ziele eines neuen Webauftrittes verfolgen und erreichen lassen, sind:

1. Magnolia CMS zur Verwaltung des Inhalts
2. Angular und Angular SSR

Eine Single-Page-Webanwendung verlangt nach einem Werkzeug mit dessen Hilfe sich eine solche professionell umsetzten lässt, wie z.B. das Frontend-Framework Angular.

Was ist Angular?

Angular ist eine Webentwicklungsplattform, die von Google mitentwickelt wurde und den Entwicklern robuste und leistungsfähige Werkzeuge für die Erstellung von Single Page Webanwendungen (SPA’s) bietet.

Die Vorteile von Angular auf einen Blick:

• Benutzerdefinierte und wiederverwendbare Komponenten.
• Hohe Produktivität & Code Konsistenz.
• Einfaches Testing.
• Code Reduktion & gute Wartbarkeit.
• Hohe Kompatibilität.
• Exzellente Werkzeuge durch von Magnolia zur Verfügung gestellte Komponenten
  zur nahtlosen Integration

Der Magnolia Headless Approach

Das Headless CMS von Magnolia lässt sich in Single-Page-Applications (SPAs) integrieren, die mit beliebigen Frontend-Frameworks wie Angular erstellt wurden. Beim Headless-CMS-Ansatz sind Inhalte (Backend) und Ansicht (Frontend) voneinander getrennt. Der Content kann bequem über ein einziges Repository verwaltet und auf unterschiedlichen Kanälen wie Webseiten oder Apps ausgespielt werden. Der Vorteil des Headless Ansatzes: Inhalte müssen einmal gepflegt werden, können dann aber beliebig oft veröffentlicht werden.

Dank Magnolia behalten Content-Autoren die gewohnte visuelle Benutzeroberfläche zur Verwaltung von Inhalten – obwohl sie in einem Headless CMS arbeiten.

A match made in heaven

Im Projekt mit einem unserer Kunden wurde das Beste aus beiden Welten zusammengeführt: Die Flexibilität und die API von Magnolia, um die herausragenden Merkmale des Angular Frameworks in seiner hohen Komplexität verwaltbar zu machen. Das Resultat ist eine hochgradig leistungsfähige Architektur, die höchsten Kundenansprüchen gewachsen ist.

Im vorliegenden Projekt wird mittels des Angular Frameworks via SSR (Server Side Rendering) die Webseite vorgerendert, was die folgenden Vorteile mit sich bringt: 

• Erleichterter Zugang für Webcrawler, was in optimaler Suchmaschinenoptimierung (SEO) resultiert
• Verbesserung der Leistung auf mobilen Geräten und Geräten mit geringer Leistung
• Zeigt die erste Seite schnell mit einem First-Contentful Paint an

Die Anwendung ist so konzipiert, dass das Endbenutzererlebnis bei einem Besuch des Webauftritts über eine langsame oder unzuverlässige Netzwerkverbindung optimiert und gleichzeitig die Risiken der Bereitstellung veralteter Inhalte minimiert werden. Das stärkt den positiven Unternehmensauftritt sowie die Bindung des Kunden an die Marke.

Die Entscheidung für den eingesetzten Technologiestack hat sich insbesondere im Kundenprojekt als richtig erwiesen und die hohen Erwartungen seitens unseres Kunden und von uns selbst erfüllt und teilweise übertroffen.

Einmal mehr zeigten sich die Vorteile des Headless Ansatzes von Magnolia CMS und dessen zukunftsfähigen Technologiestack, sodass die nahtlose Integration der Umsysteme beim Kunden möglich war. Angular erwies sich in der Bewältigung der Komplexität und Logik zudem als sehr effizientes und leistungsfähiges Werkzeug. Eine Verbindung mit Zukunft.