Was ist eine Single-Page-Anwendung?
Eine Single-Page-Anwendung (SPA) lädt das HTML-Grundgerüst einmalig und übernimmt danach Navigation, Rendering und Datenkommunikation komplett im Browser. Der Server spricht ausschließlich über APIs mit dem Frontend — das Ergebnis sind weiche Übergänge ohne Seitenneuladen, sofortiges Feedback bei Interaktionen und ein App-ähnliches Bedienerlebnis im Webbrowser.
Mit dieser Architektur kommt zwangsläufig mehr Komplexität ins Frontend: Routing, State-Management, Validierung, Caching, Internationalisierung, Sicherheit — Aufgaben, die früher der Server übernahm, müssen jetzt strukturiert im Browser umgesetzt werden. Genau dafür sind Frameworks wie Angular, React und Vue entwickelt worden: Sie bieten Komponenten-Modelle, deklarative Templates und ausgereifte Werkzeuge.
Eine sauber gebaute SPA ist deshalb mehr als ein Layout im Browser — sie ist eine entkoppelte Anwendung mit klaren Verantwortlichkeiten, testbaren Komponenten und einer Deployment-Story, die Skalierung und Auslieferung über CDN unterstützt.
Bedienerlebnis
Weiche Übergänge, sofortige Interaktion, kein Seitenneuladen — das vertraute Gefühl nativer Anwendungen im Webbrowser.
Trennung
Klare Grenze zwischen Frontend und Backend über API-Verträge — beide Seiten lassen sich unabhängig entwickeln, testen und ausliefern.
Komponenten
Wiederverwendbare, getestete Bausteine — vom Datepicker bis zum Dashboard-Widget. Designsysteme werden direkt in Code abbildbar.
Auslieferung
Statische Builds, Cache-freundlich, schnelle initiale Ladezeiten, einfache Skalierung über CDN.
SPA-Frameworks im Vergleich
Im Enterprise-Umfeld setzen wir vorrangig auf Angular — auf ausdrücklichen Wunsch und je nach Architektur entwickeln wir ebenso mit React oder Vue.
Angular
Vollständiges Framework · TypeScript · seit 2016Das Enterprise-Framework von Google. Vollständig in TypeScript, opinionated, mit eingebauter Dependency Injection, RxJS für reaktive Datenströme, einem ausgereiften CLI und einer klaren Best-Practice-Linie. Strukturiert große Anwendungen, in denen mehrere Teams parallel arbeiten.
Wann einsetzen?
Unsere Standardwahl im Enterprise- und Public-Sector-Umfeld — wenn klare Konventionen, langfristige Wartbarkeit und Team-Skalierung Priorität haben.
React
UI-Library · seit 2013Strenggenommen kein Framework, sondern eine Library zur UI-Entwicklung. Sehr flexibel, riesiges Ökosystem (Next.js, Remix, React Query, Redux), JSX als deklarative Syntax. Erfordert mehr Architektur-Entscheidungen als Angular, dafür leichterer Einstieg.
Wann einsetzen?
Wenn ein bestehendes React-Ökosystem genutzt werden soll oder spezielle Bibliotheken (etwa Next.js für Server-Side Rendering) gefragt sind.
Vue
Progressive Framework · seit 2014Mittelweg zwischen Angular und React: voller Framework-Stack (Vue Router, Pinia, Vue Test Utils), aber sanftere Lernkurve. Templates statt JSX, sehr lesbare Single-File-Components, kompakter Footprint.
Wann einsetzen?
Wenn Teams einen pragmatischen Mittelweg suchen oder bestehende Vue-Anwendungen weiterentwickelt werden.
Der Browser als Anwendungsplattform
Neben den Frameworks haben sich zwei Browser-Technologien etabliert, die Frontend-Architekturen erweitern — vor allem dann, wenn Wiederverwendbarkeit über Framework-Grenzen hinweg oder rechenintensive Logik im Browser gefragt sind.
WebAssembly
W3C-Standard · seit 2017Ein binäres Format, das nahezu nativ kompilierten Code direkt im Browser ausführt — mit Performance, die an native Anwendungen heranreicht. Relevant, wenn rechenintensive Logik in den Browser verlagert werden soll oder bestehender Code aus anderen Sprachen wiederverwendet werden muss.
Praxis
Mit Blazor WebAssembly lassen sich .NET-Komponenten und C#-Code direkt im Browser ausführen — ohne JavaScript-Brücke. Für Unternehmen mit umfangreicher .NET-Codebasis ist das eine natürliche Erweiterung ins Frontend, ohne die Sprachen wechseln zu müssen.
Web Components
Browser-Standard · seit 2018Ein Bündel von Webstandards (Custom Elements, Shadow DOM, HTML Templates), mit denen sich wiederverwendbare UI-Bausteine framework-unabhängig bauen lassen. Eine Komponente lässt sich in Angular-, React-, Vue- oder Plain-HTML-Anwendungen gleichermaßen einsetzen.
Praxis
Konzern-weite Designsysteme als Web Components ausliefern, damit verschiedene Teams mit unterschiedlichen Frameworks dieselben UI-Bausteine nutzen — ohne Abhängigkeit zu einem bestimmten Frontend-Stack.
Erfahrung und KI-gestützte Entwicklung
Im Tenvias-Kernteam und bei unseren Entwicklungspartnern arbeiten Softwareingenieure, die den Wandel von jQuery über Backbone und AngularJS bis zu modernem Angular, React und Vue selbst mitgestaltet haben. Diese Tiefe schlägt sich in Architekturentscheidungen nieder, die auch in fünf Jahren noch tragen — und in Migrationen aus Legacy-Stacks (AngularJS, jQuery-Anwendungen, frühe Single-Page-Frameworks), die im Betrieb halten.
Im Enterprise-Kontext bedeutet Frontend-Arbeit mehr als reines UI-Engineering: Barrierefreiheit (WCAG/BITV), Mehrsprachigkeit, Authentifizierung über Identity-Provider, sichere API-Anbindung und Integration in bestehende Designsysteme. Diese Aspekte planen wir von Beginn an mit ein.
Wie in unseren Backend-Projekten setzen wir seit 2024 auch im Frontend KI-gestützte Entwicklungswerkzeuge konsequent ein. Komponenten-Boilerplate, Test-Erzeugung, Storybook-Stories, Migrationsarbeiten zwischen Framework-Versionen — all das beschleunigt sich erheblich, ohne dass die Qualitätskontrolle leidet.
Bei standardisierten Implementierungs- und Migrationsaufgaben sehen wir Geschwindigkeitsgewinne von 30 bis 50 Prozent. Die Verantwortung für Architektur, Barrierefreiheit und API-Verträge bleibt beim Softwareentwickler — KI-generierter Code durchläuft Code-Reviews, Tests und CI-Pipeline wie jeder handgeschriebene Code.
