Gemeinsam mit 10.000 Nutzern entwickelt: die neue Zattoo Web App

Es ist soweit: hier kommt die neue Zattoo Web App. Verfügbar für alle gängigen Browser, bietet sie im Vergleich zum alten Web Player besseres Design, optimierte Performance und eine einfachere Bedienung.

Die Inspiration zur Entwicklung einer neuen Zattoo Web App kam nach einer erfolgreichen Migration einer Web App für Big Screen von Backbone & Ruby Stack zu React und JavaScript. Es zeigt sich schnell: mit dieser Lösung erreichen wir eine bessere Leistung, müssen weniger Aufwand betreiben und erzielen gleichzeitig eine höhere Entwicklungsgeschwindigkeit. Zudem ist es die Gelegenheit gewesen, unser UI/UX Design zu überdenken und anzupassen. Und, ganz unter uns, war es leicht unser Team schnell für eine neue technische Weiterentwicklung zu begeistern. Im Kontext unseres Zattoo Hackathons gab es dann das erste Kick Off und das Projekt der Web App war geboren.
TV-Ratgeber

Was sind die grössten Vorteile der Web App aus Nutzersicht?

Eine Progressive Web App

Die neue Web App ist progressiv im Vergleich zum alten Web Player.
TV-Ratgeber Sie ist eine vollwertige App mit allen Zattoo Funktionen und lässt sich in allen gängigen Browsern und Plattformen nutzen. Sie ist PWA-kompatibel, was bedeutet, dass der Nutzer die Web App einfach auf seinen Home Screen speichern und so auch schnell abrufen kann, egal ob auf dem Desktop oder mobil.

Neues Look & Feel

Eine grosse Veränderung ist der neue Look, der nun zu den nativen Zattoo Apps passt. Dazu zählt natürlich auch eine flüssigere Benutzeroberfläche, die wir Dank der Einrichtung und Integration eines neuen Designsystems erstellt haben.

Bessere Performance

Natürlich ging es uns bei der Web App um bessere Leistung, schnellere Ladezeiten, einen besseren Kanalwechsel und schnelle Reaktionszeiten.
Das Performance Profiling zeigt für die Darstellung der ersten Seite, unserer Highlights-Seite, dass die Web App sowohl beim Laden, Skripting als auch Rendering deutlich schneller ist als der alte Web Player. Auch im Network Profiling kommen wir auf gleiche Ergebnisse: die Anzahl der Network-Requests beim initialen Laden beispielsweise ist in der Web App 7 mal geringer als die des bisherigen Web Players.

Neue Features

TV-Ratgeber
Was wäre eine neue Web App ohne neue Features?
Ab sofort können sich Nutzer auf native Bild-in-Bild Darstellungen oder die neueste Chromecast Integration freuen. Zudem ist die gesamte Rubrik der Aufnahmen neu gestaltet worden: persönliche Aufnahmen können nun in Kategorien unterteilt angezeigt werden. Auch die Personalisierung steht im Fokus. Mit neuen Wiedergabelisten der Favoritensender oder einer personalisierbaren Ansicht der Content-Empfehlungen können die Nutzer die App gestalten, wie sie es mögen.
Die Suchfunktion in unserem Web Player ist sehr kompliziert gewesen, da wir eine gigantische Bibliothek von TV-Shows, Sendern und On-Demand-Inhalten haben. Um in der neuen App die Suchfunktion zu verbessern, bei der das Ergebnis nun sofort zu sehen ist, wurden unsere Sammlungen kategorisiert, filterbar und sortierbar gemacht.

Was unterscheidet die Web App von anderen Streaming Diensten?

Wir setzen uns sehr stark für bessere Nutzererfahrungen und Zugänglichkeit ein, insbesondere bei Mobilgeräten.
Während sich viele anderen Dienste auf das Desktop-Erlebnis und die Anpassung dieser Produkte an die mobilen Bedürfnisse konzentrieren, haben wir das Mobile First Paradigma übernommen und profitieren davon. Man wird schnell erkennen, wie einfach es ist, Videos mobil im Web bei Zattoo aufzurufen und wie schwierig sich das bei anderen Anbietern gestaltet.

Und jetzt was für Technik-Fans: Welche Technologie steckt hinter der neuen App?

Da setzen wir voll und ganz auf unseren Erfahrungsschatz mit Branchen erprobten Technologien. Wir verwenden React für unser Interface und Redux als State Machine. Für das Style Management setzen wir auf CSS-Module, SASS, benutzerdefinierte CSS Properties und BEM Namenskonvention.

Um die enorme Komplexität der App zu bewältigen, haben wir den Feature-basierten Ansatz angewendet: mit Redux Middlewares und einer minimierten Kopplung zwischen Services und Komponenten.

Die Verwendung von CoffeeScript in unserer Legacy-Anwendung hat aus heutiger Sicht einige Schwachstellen, weshalb wir nun alles über reines JavaScript geschrieben haben, komplett ohne Abhängigkeiten von anderen Sprachen.

Wir haben starke Teststufen, beginnend mit dem statischen Linting unserer Skripte (ESLint), Styles (Stylelint) und Interfaces (TSLint), über die Typüberprüfung unseres JavaScript mit TypeScript + JSDoc bis hin zu Unit-Tests, die von Jest durchgeführt werden. Schliesslich ist unser grösster Stolz die End-to-End-Testabdeckung mit Cypress.

Alles wird von Webpack erstellt. Wir investieren viel in Entwicklungserfahrung, z.B. dauert die Einrichtung des Setups für neue Ingenieure weniger als 30 Minuten. Dank der Typdefinitionen verfügen unsere Entwickler über einen umfangreichen Code zur automatischen Vervollständigung. Die Praxis der Codeüberprüfung hilft dem Team beim Wissensaustausch und hält die Codequalität auf hohem Niveau.

Wie lief der Entwicklungsprozess ab?

Das war ein langer Weg bis zum Ziel. Wir haben vor 2 Jahren mit einem Entwickler begonnen, der mit der Arbeit an neuen Grundlagen begann. Die folgende Zusammenarbeit mit anderen Web-Ingenieuren hat uns geholfen, einen Frontend-Microservice zu etablieren, so dass wir nun Komponenten, Konfiguration und Business-Logik rund um Web-Projekte wiederverwenden können. Wir haben eine Bibliothek mit privaten NPM-Paketen aufgebaut und uns auf den Weg gemacht, den Monorepo-Ansatz für unsere gemeinsamen Komponenten anzuwenden.

Während der Entwicklung haben wir viel mit neuen Ideen und Tools experimentiert. Nicht alle Experimente, die wir durchgeführt haben, waren erfolgreich. Z.B. das heute beliebte CSS im JS-Ansatz, hat für uns nicht gut funktioniert, weshalb wir uns entschieden haben, benutzerdefinierte CSS-Properties zu verwenden, um Dynamik für unser Styles Management zu schaffen. Irgendwann waren wir begeistert, unsere CI-Pipeline mit GitHub-Aktionen zu verbessern, die aber später aufgrund von Stabilitätsproblemen wieder in Travis CI migriert wurden. Letztes Jahr wurden wir zu Early Adopters von React Hooks. Das ist grossartig, aber wir haben gelernt, dass für uns Klassen in vielen Anwendungsfällen immer noch besser sind.

Natürlich gab es auch viele Schwachpunkte. Wir wurden mit der Autoplay-Beschränkung von Safari und anderen Browsern konfrontiert, dann kam eine Vollbild-API-Beschränkung und eine allgemeine Einschränkung der Möglichkeiten für Medien Apps, so dass wir Workarounds finden mussten.

User Feedback

Um die App so nutzerfreundlich wie möglich zu gestalten, liessen wir über 10.000 Zattoo Nutzer die Web App Beta-Version über 6 Monate hinweg testen. Währenddessen konnten sie uns jederzeit Feedback geben, sowohl Positives als auch Negatives. Wir haben das Feedback sehr ernst genommen und sind konstant auf Kritikpunkte und Vorschläge der User eingegangen. Bereits zu Beginn der Beta-Phase gab es auch Hunderte User, die uns durchweg positive Rückmeldungen geschrieben haben. Was uns besonders gefreut hat, da man sich ja oft eher die Zeit nimmt, etwas zu kritisieren, als das zu loben, was einem gefällt.

Wann gibt es diese App über ITunes zum herunterladen? Bin bis jetzt sehr zufrieden 😀
— iOS Safari user

Finde ich super gemacht. Wann kommt das auf der Android TV App?
— Mac OS Safari user

When will all functions come in the app?
— Android Chrome user

Über 200 TV-Sender in einer App streamen

Mehr als 100 in HD

30 Tage kostenlos. Anschliessend 10 CHF/ Monat. Monatlich kündbar.

Gratismonat starten