Developed together with 10,000 users: the new Zattoo Web App

This is it: here comes the new Zattoo Web App. Available for all popular browsers, it offers better design, optimized performance and easier handling compared to the old web player.

Back then we were inspired by the successful migration of our web big-screen application from Backbone + Ruby stack to React and JavaScript. It showed us that we can achieve better performance and maintainability while spending less effort and gaining better development speed. It was also an opportunity to rethink our UI/UX decisions and make a better design. And honestly, it’s much easier to find people eager to work with new technologies and scale the team. The project was kicked off from the first Zattoo hackathon.

What are the major advantages of the Zattoo Web App from a user’s perspective?

Progressive web application

The new web app is a step into a progressive web application.
TV-Ratgeber It’s no longer a website, it’s now a full and reach application, available for all major browsers and platforms. We are fully PWA compatible now, it means that users can store the web app to their home screen on mobile devices or their desktop.

New look and feel

Big change takes place in how the web app looks and feels. It’s more consistent with other Zattoo applications and has a more fluid UI thanks to the integration of our Zattoo design system.

Better performance

And of course everything is coming with better performance, faster loading time, better channel switching and instant responsiveness to user gestures.
Performance profiling for initial page render of the highlights page shows that the new web app is faster in all tasks, loading, scripting, rendering, etc. Network profiling compared loading the highlights page in the old web site and new web app. The results show that the new app outperforms in all aspects: for example the number of network requests to load the page is 7 times less.

New goodies

And of course there are many new features. Our player can work in various modes, support native Picture in Picture and has the latest Chromecast integration. We rebooted and made improvements to personal recordings. The app is customizable to user needs, you can make your own favorite channels playlist, choose between different content discovery view and these choices will be saved to your profile.
Discovering our content was a bit difficult before because we have a huge library of TV shows and on demand content. To address that, the new app is coming with rich search, where you can instantly see results. Our collections have been categorized, they are filtrable and sortable.

What differentiates the Zattoo Web App from competitor solutions?

We stand for better experience and accessibility, especially when it comes to mobile devices. You can compare us to any other competitors, the difference is very noticeable.
While everyone focused on the desktop experience and adjusting products to mobile needs, we took the mobile-first paradigm and benefited from it. You will quickly see how easy it is to access videos on the web from Zattoo on mobile devices and how difficult it is with other providers.

And now for tech-fans: Which technology is behind the new app?

We really enjoy our stack of industry-proven technologies. We use React for our presentation layer and Redux as a state machine. For styles management we use CSS modules, SASS, CSS custom properties and BEM naming convention.

To handle the enormous complexity of the app, we applied a feature-based approach: mastered redux middlewares and a minimized coupling between services and components.

The use of CoffeeScript in our legacy application has some weaknesses from today's point of view, which is why we have now written everything in pure JavaScript, completely without dependencies on other languages.

We have strong test layers, starting from static linting of our scripts (ESLint), styles (Stylelint) and interfaces (TSLint), flowing into type checking of our JavaScript with TypeScript + JSDoc, unit tests handled by Jest. And our proudest achievement is the end to end test coverage with Cypress.

Everything is built by Webpack. We invest a lot in development experience, for example, the environment setup for new engineer takes less than 30 minutes. Thanks to type definitions, our developers have a rich code autocomplete. Code review practice helps the team in knowledge sharing and keeps code quality at a high standard.

How did the development process work?

It’s been a long trip. We started 2 years ago with one developer, who started working on new fundamentals. The collaboration with other web engineers helped us to establish a frontend microservice, so we now reuse components, configuration and business logic around web projects. We built a library of private NPM packages and went through a journey of adopting monorepo approach for our shared components.

During the development, we experimented a lot with new ideas and tools but not all experiments were successful. For example, the popular CSS in JS approach didn't work well for us and we decided to use CSS custom properties to add dynamics for our styles management. At some point, we got excited about improving our CI pipeline with GitHub actions but later due to stability issues migrated back to Travis CI. Last year we became early adopters of React hooks, they are great but we learned that for us classes still have advantages in many use-cases.

Of course, there were also many pain points. We faced autoplay restriction coming from Safari and then other Browsers, then there was a fullscreen API limitation and general decreasing of possibilities for media applications, so we had to find workarounds.

User feedback

To make the app as user-friendly as possible, we had over 10,000 Zattoo users test the web app beta version for 6 months. Meanwhile, they could give us feedback at any time, both positive and negative. We have taken the feedback very seriously and have constantly responded to criticisms and suggestions from users. Already at the beginning of the beta phase there were hundreds of users who wrote us positive feedback. This made us especially happy as generally people often take the time to criticize something rather than to praise what they like.

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

Stream over 100 TV channels in one app

More than 80 in HD

30 days for free. Then 13,99€/ Month. Cancel on a monthly basis.

Test 30 days for free