Dunckelfeld

Artikel schließen

08

Universal Music – rein technisch gesehen

Jetzt wird es technisch

Unter der Oberfläche wird’s erst richtig spannend. Unser Head of Development erklärt uns in feinstem Fachvokabular den technischen Anspruch des ProjektsDie Umsetzung der neuen Universal Music Germany Website erforderte auch auf technischer Ebene eine neue Herangehensweise. Der Fokus lag dabei auf einer unterbrechungsfreien User Experience: Die Seite soll sich wie eine native App anfühlen. Unsere neue Architektur vermeidet ein Neuladen bei jeder Interaktion, indem diese im Browser verarbeitet und neue Daten dynamisch im Hintergrund nachgeladen werden. Eine solche Website wird auch als Single Page Application oder kurz SPA bezeichnet. Einzelne Komponenten, wie z.B. der hauseigene Audioplayer, können dank der neuen Frontend-Architektur dynamisch über den Routing-Kontext der Seite gelegt werden. So wird das Musikhören beim Surfen niemals unterbrochen. Ein modularer und komponentenbasierter Aufbau ermöglicht außerdem eine einfache Wartbarkeit und hohe Wiederverwendbarkeit. Das UI-Framework React findet Verwendung, um diese flexiblen und funktionalen Komponenten entwickeln zu können.

Frontend

Das neue Frontend ist eine hundertprozentige JavaScript-Lösung. Herkömmlicherweise ist JavaScript eine nur in Browsern verwendete Sprache. Die Verwendung einer Node.js-Umgebung ermöglicht es aber auch serverseitig JavaScript auszuführen. Node.js und JavaScript haben sich als Paradigma für die serverseitige Entwicklung innerhalb kürzester Zeit etabliert. Serverseitiges JavaScript in Verbindung mit React ermöglicht es, die Website bereits auf dem Server zu rendern. Dadurch werden die Ladezeiten spürbar verkürzt. Passenderweise erhält die Website damit das Attribut „universal“. Alle Nutzdaten und Inhalte wie Künstler, Artikel und Gewinnspiele werden über eine eigens für dieses Projekt entwickelte Universal Music GraphQL API in das Frontend geladen.

Framework

Als Framework hierfür und als Datenlayer verwenden wir Relay. Der JavaScript Code ist in hochmodernem ECMAScript 15, 16 und 17 geschrieben (der aktuellsten Standard-Version von JavaScript) und werden von Babel auf eine ES5 Codebasis transpiliert, damit der Code in allen aktuellen Browsern ausgeführt werden kann. Für CSS verwenden wir PostCSS als Preprocessor und CSS Modules für Modularisierung und Komposition. Die Komponenten, Module und auch der CSS Code werden vom Module-Bundler Webpack als jeweils eine Client und eine Server-Version gebaut. Um zu verhindern, dass jeder Benutzer unabhängig vom Einstiegspunkt in die Seite den kompletten Anwendungscode herunterladen muss, wird der Code vom Module-Bundler in Chunks bzw. Pakete aufgeteilt. Somit werden nur die Daten geladen, die für die Anzeige der aktuellen Seite notwendig sind. Auch dadurch wird die Geschwindigkeit der Website stark optimiert.

Unser bis jetzt anspruchsvollstes Entwicklungs- Projekt hat es uns erlaubt, technisch an vorderster Front zu arbeiten. So konnten wir die Experience der neuen universal-music.de so umsetzen, wie es der gemeinsamen Vision mit Universal Music entspricht.