S/4HANA Architektur

Entwicklung von Webseiten: Statisches HTML & SSR vs. Moderne JavaScript-Webseiten mit OData

(C) Brandeis Consulting📁

Webseiten damals: Statisches HTML & Server Side Rendering (SSR)

  • Statisches HTML: Völlig unveränderliche Seiten, Auslieferung kompletter Dokumente
  • SSR: Server erzeugt komplette HTML-Seiten bei jeder Anfrage
  • Beispiele: CGI-Skripte, PHP, JSP, ASP klassische Webseiten
  • Vorteile: Einfachheit, SEO-freundlich, gut unterstützt von Browsern
  • Nachteile: Wenig Interaktivität, komplette Neuladung bei jeder Aktion

Quellen:

(C) Brandeis Consulting📁

Moderne Webseiten mit JavaScript

  • Clientseitige Logik durch JavaScript: Interaktive UI, dynamische Inhalte
  • Single Page Applications (SPA): Nachladen von Daten ohne Seitenreload
  • Nutzung von Frameworks wie React, Angular, Vue.js, SAP UI5
  • Kommunikation über APIs (REST, OData) mit Backend-Servern
  • Vorteile: Bessere Nutzererfahrung, schnellere Reaktion, UI/UX-Optimierung

Quellen:

(C) Brandeis Consulting📁

OData – Das Protokoll für moderne SAP-Webanwendungen

  • Offenes Protokoll für Datenzugriff über REST APIs
  • Standardisiert CRUD Operationen (Create, Read, Update, Delete) auf Ressourcen
  • Verwendet URL-basierte Queries für Filterung, Sortierung, Paging
  • Unterstützt JSON/XML Datenaustauschformat
  • Nahtlose Integration mit SAP Systemdaten, ideal für UI5 und Fiori

Quellen:

(C) Brandeis Consulting📁

Vergleich Statische/SSR vs. Moderne JS & OData

Kriterien Statisch / SSR Moderne JS + OData
Seitenladezeit Lang bei Vollreload Schnell, Daten nachladen
Interaktivität Eingeschränkt Hoch, dynamische UI
Entwicklungskomplexität Einfach Komplexer (Frameworks, API)
Nutzererlebnis Basis Fortschrittlich, anpassbar
Datenbindung Serverseitig komplett Live via OData Abfragen
Skalierbarkeit Mittel Hoch
(C) Brandeis Consulting📁

Beispiel: OData in modernen Web-Apps

  • UI5 App lädt Verkaufsaufträge via OData Service (URL mit Filter-Parametern)
  • Benutzer kann Daten sortieren und filtern, ohne Reload der Seite
  • Server liefert JSON-Daten mit genau angefragten Informationen
  • Lokale UI-Komponenten reagieren auf Datenänderungen automatisch
  • Verbesserte Performance und User Experience gegenüber klassischem Web
(C) Brandeis Consulting📁

APIs für alle

  • OData ist nicht nur über für Fiori-Anwendung
  • OData ist auch eine direkte Möglichkeit des Datenaustauschs - auch für andere System

Siehe:

(C) Brandeis Consulting📁

Fazit

  • Statisches HTML und SSR legen das Fundament des Webs
  • JavaScript mit OData transformiert Webanwendungen in interaktive Plattformen
  • SAP setzt stark auf moderne UI-Technologien mit OData-Anbindung
  • Die Kombination bietet hohe Flexibilität, Performance und Nutzerfokus
(C) Brandeis Consulting📁

Weiterführende Ressourcen

(C) Brandeis Consulting📁
(C) Brandeis Consulting📁