VRFX Realtime Studio Website
Die Kombination aus AWS, React Router und einem selbst entwickelten CMS macht die VRFX Realtime Studio Homepage zu einem Beispiel für die Vorteile von JavaScript-Frameworks in Verbindung mit Cloud-Diensten.
VRFX Realtime Studio ist ein Schweizer Unternehmen, das Interaktive Erlebnisse, VR & Visual Effects entwickelt.
Deployment auf AWS
AWS-Cloud-Services werden für Hosting, Datenbanken und andere Teile der technischen Infrastruktur genutzt. Diese bieten ein gutes Preis-Leistungs-Verhältnis für kleine bis mittelgrosse Webprojekte wie dieses und gelten als zuverlässig.
Die Dienste und das Zusammenspiel der einzelnen Komponenten werden mit SST, einem Infrastructure-as-Code (IaC)-Framework, konfiguriert. Dies reduziert die Entwicklungszeit und minimiert das Risiko fehlerhafter Konfigurationen, die häufig die Ursache für Sicherheitslücken in Cloud-Umgebungen sind.
Weiterführende Links zum Backend
Fullstack-Framework
Die Website wurde mit React Router v7 im Framework-Modus erstellt.
Für die On-Page-SEO wurden grosse Teile des Inhalts mit schema.org-Markup strukturiert, um die Indizierung in Suchmaschinen und LLMs zu erleichtern. Eine besondere Aufgabe war die Integration von WebGL-Apps, die als Showcases dienen.
Mehr zu React Router v7
React Router v7 verbessert die Entwicklung von Webanwendungen, die Cloud-Dienste nutzen, erheblich, indem es einen „Framework-Modus“ bereitstellt, der Server-Side-Rendering (SSR) und Datenladefunktionen direkt in den Router integriert.
Dadurch entfällt die Notwendigkeit separater, externer Libraries für das Abrufen von Daten und State-Management, was die Komplexität und den Boilerplate-Code reduziert. Der Ansatz, kombiniert mit automatischer Code-Splitting, verbessert die Leistung und SEO erheblich und macht ihn zu einer ausgezeichneten Wahl für moderne Full-Stack-Anwendungen, die auf serverless Plattformen wie AWS deployed werden.
React Router v7 wurde mit dem Remix Framework zusammengeführt und ist dessen Nachfolger geworden. Im Gegensatz zu Next.js, einem alternativen React-Full-Stack-Framework, verwendet React Router wo möglich native Funktionen in Browsern und Node-Runtimes. Dies führt tendenziel zu höheren Seitengeschwindigkeiten und einer geringeren Wahrscheinlichkeit unbeabsichtigter Sideeffects. Ausserdem ist es flexibler bezüglich Deployment in verschiedenen Umgebungen.
Weiterführende Links zu React und React Router
- React Frontend Library
- React Router Fullstack Framework für serverseitiges Rendering, Routing und Tooling
Integriertes Headless CMS
Das verwendete Headless CMS ist ein selbst entwickelter Prototyp. Der für die VRFX-Website gewählte Ansatz ist insofern speziell, als das CMS und die öffentliche Webseite teilweise auf denselben Komponenten basieren. Insofern stellt der gewählte Ansatz ein integriertes Headless CMS dar.
Durch Code-Splitting werden die Programmkomponenten des CMS von denen der öffentlichen Website getrennt. Dies sorgt für zusätzliche Sicherheit und hält den Code, der die öffentliche Website generiert, klein, wodurch ihre Leistung nicht beeinträchtigt wird.
Vorteile dieses Ansatzes sind:
- Skalierbarkeit ohne zusätzliche Kosten welche die bei einem Dienst wie Contentful oder Sanity anfallen würden.
- Hohe Leistung, da Hosting, Datenbank und Recheneinheit bei AWS angesiedelt sind und die zur Beantwortung einer Anfrage erforderlichen Prozesse schneller und effizienter ablaufen.
- Flexibilität in der Organisation und Struktur der Daten.
- Das Projekt ist portabel, da es von einem anderen Anbieter als AWS gehostet werden kann, wenn die mit der Datenbank und dem Dateiserver verbundenen Komponenten angepasst werden.
Zusammenarbeit bei der Entwicklung und Anpassung
Ich hatte den CMS-Prototyp noch nie für die Website eines Kunden verwendet und konnte VRFX als Beta-Tester gewinnen. Die Zusammenarbeit verlief reibungslos, kreativ und produktiv, da das VRFX-Team technisch versiert ist und Pascal als ehemaliger Webentwickler wertvolle Unterstützung leistete.
Das Ergebnis ist ein CMS, das auf ihre Bedürfnisse zugeschnitten ist, sowie eine Website mit ausgezeichneter technischer Leistung. Dies zeigen Benchmark-Tests in Bezug auf Best Practices und Seitenladegeschwindigkeit.
