Modernisierung eines Online-Shops im Mittelstand
Projekt im Überblick
Modernisierung einer historisch gewachsenen Web-Anwendung- Verbesserung der Performance
- Erhöhung der Nutzer-Conversion
Unser Lösungsansatz
Nach eingehender Analyse des bisherigen Prozesses und den gewünschten Anforderungen an die neue Plattform, haben wir folgenden Lösungsansatz erarbeitet:
Entwicklung einer zukunftsfähigen und skalierbaren Frontend-Architektur mithilfe eines deklarativen Implementierungsansatzes
Fokussierung auf die kritischsten Komponenten wie u. a. Warenkorb und Checkout
Step by Step Migration der Webseite
Bereitstellung einer “Fallback-Anwendung”, um bei Problemen den Umsatzverlust zu minimieren
Einblick in das Projekt
Die Ausgangsposition
In der ursprünglichen Architektur des Online-Shops gab es eine übermäßig starke Kopplung zwischen Actions und Reducern. Zahlreiche Actions wurden gleichzeitig in mehreren Reducern verarbeitet, was zu redundanten Zustandsänderungen und einer schwer nachvollziehbaren Logik führte. Diese historisch gewachsene Struktur erschwerte nicht nur die Wartung, sondern verdeutlichte auch die Grenzen des bisherigen reaktiven State-Management-Ansatzes. Zudem führte der unkontrollierte Ausbau von Reducern und Effects langfristig zu einer unübersichtlichen und schwer zu wartenden Applikation. Vor diesem Hintergrund war die Modernisierung und Vereinfachung der Architektur ein zentrales Projektziel, um sowohl die Performance zu steigern als auch nachhaltig höhere Nutzer-Conversions zu erzielen.
¹ NGRX State Management Lifecycle - schwer wartbares, komplexes System
Unsere Lösung
Die technische Komplexität der Anwendung wurde signifikant verringert, indem NgRx entfernt und stattdessen auf lokale State-Verwaltung gesetzt wurde. Zuvor litt das Projekt unter einem Wildwuchs an Reducern und Effects, was zu unübersichtlichem, schwer wartbarem Code führte. Dieser Zustand wurde durch eine Neustrukturierung der Architektur behoben, bei der Angular-Services sowie komponentenbasierte State-Kapselung im Vordergrund stehen. Gemeinsame Zustände wurden in dedizierten Services gekapselt, die über Dependency Injection in die entsprechenden Komponenten eingebunden werden. Dadurch entfällt die Notwendigkeit eines zentralen Stores, und jede Komponente oder Komponentengruppe übernimmt eigenständig die Verantwortung für ihren lokal begrenzten State. Dieser dezentralisierte Ansatz ermöglicht es, Zustandsänderungen und Datenfluss direkt innerhalb der Komponenten deklarativ zu steuern. Mithilfe von RxJS-Observables oder Angular Signals können Komponenten reaktiv auf State-Änderungen reagieren, ohne auf komplexe Reducer-Logik oder globale Effekte angewiesen zu sein. Die Abkehr von einem zentralen State-Management reduziert die Abhängigkeiten zwischen den Komponenten und entfernt die zuvor existierenden, unübersichtlichen Schnittstellen zwischen Reducern und Effects. Stattdessen wird die Datenverarbeitung und der State-Flow durch klar definierte Services und deklarative Komponentenmuster gehandhabt. Diese technische Umstellung führt zu einem saubereren, einfacher wartbaren Code, verbessert die Übersichtlichkeit der Architektur und macht die Anwendung flexibler und effizienter.
² Verschlankte Struktur nach der Modernisierung
Fazit
Die Modernisierung des Online-Shops hat zu einer signifikanten Verbesserung der Systemarchitektur geführt. Die ursprüngliche Komplexität, die durch eine verwickelte Beziehung zwischen Actions und Reducern gekennzeichnet war, führte zu einer schwer wartbaren Anwendung. Diese Herausforderung wurde durch die Implementierung einer neuen, linearen Struktur überwunden. Diese neue Struktur ermöglicht eine verbesserte Trennung von Verantwortlichkeiten, was die Wartung und Erweiterung des Systems erheblich vereinfacht. Durch die Reduzierung der Komplexität wurde nicht nur die Performance verbessert, sondern auch die Skalierbarkeit des Online-Shops erhöht. Insgesamt hat die Modernisierung zu einer effizienteren, besser strukturierten und zukunftsfähigeren Anwendung geführt. Diese Verbesserungen haben das Potenzial, die Nutzer-Conversion nachhaltig zu steigern und bieten eine solide Grundlage für zukünftige Entwicklungen und Erweiterungen des Online-Shops.
Quellen:
1 Schaugrafik in Anlehnung an NGRX, eigene Darstellung
2 Schaugrafik, SkelTech GmbH
Sie haben Fragen?
Sie haben noch Fragen oder möchten Ihre Anforderungen direkt mit einem unserer Experten besprechen? Kontaktieren Sie uns - wir freuen uns darauf, gemeinsam mit Ihnen die passende Lösung für Ihr Projekt zu finden!
Niklas Arft & David Horn Pawar - Gründer und Geschäftsführer
Niklas Arft & David Horn Pawar - Gründer und Geschäftsführer
Weitere spannende Projekte
aus den Bereichen Software-Entwicklung, Data Engineering, Managed Service und UI/UX finden Sie hier!
Plattform für Vertragsmanagement
Digitalisierung des Vertragswesens: Entwicklung einer benutzerfreundlichen Weblösung mit Angular, unterstützt durch maßgeschneiderte Frontend-Architektur und klare Anforderungsdefinition.
Aufbau einer Data-Mesh-Architektur
Erfolgreiche Data-Mesh-Architektur im Handel: Datensilos aufgelöst, zentrale Daten im Databricks Lakehouse als Data Products in Azure Cloud.
Entwicklung einer Self-Service-BI-Lösung
Self-Service-BI für datengetriebene Entscheidungen: Zentrale Datenbasis mit ETL-Prozessen & SAP-Integration in einer Cloud-Portallösung.