The new web app is a step into a progressive web application.
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.
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.
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.
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.
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.
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.
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.
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.
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