We have just published on the AppStore a new version of our Culturebox app that was (briefly) featured in the last Apple Keynote. Although it looks very similar to the previous version we published back in October, and provides access to the same catalog of live and replay videos, it contains some major changes under the hood. Let's review them.

Culturebox V1: TVML and TVJS

For the first version of Culturebox on Apple TV we decided to use the new language provided by Apple for tvOS: TVML. We chose it for several reasons:

• faster project startup: the example code provided by Apple made it easier for us to build a new app "from scratch"
• closeness to technologies used in our other Smart TV apps (which are usually Javascript-heavy)
• availability of customizable UI templates to simplify the design of the different screens (which also introduce some limitations in the design).

What is TVML ? A TV specific Markup Language designed by Apple to build apps in a language close-to-but-not-really like HTML. Apple chose to remove WebKit (the HTML rendering engine) from tvOS altogether, so it was no longer possible for developers like us to port existing Smart TV apps written in HTML5, like we did on Android TV with Webviews for example. TVML is a replacement for HTML/CSS in the presentation layer, and is associated with a JavaScript-based framework named TVJS to handle the business logic (yes even if there is no HTML support on Apple TV, you can still use JavaScript). The global architecture of TVML apps is described below:

The TVML files (the presentation layer) and JS files (the business logic) need to be hosted on a server, and link to external resources like videos and pictures. On the Apple TV itself a "container" written in native code (Swift or Objective-C) will launch the JS app (defined by its URL), optionally passing some initialization data. The JS app will then load static TVML pages (or build them dynamically) and handle user interactions. Apple provided several ready-made TVML templates that can be used and follow all the visual guidelines. For our first Culturebox app we decided to build a very simple app using mostly the Stack Template to present the Culturebox contents in different screens.

Initially we tried to inject the data dynamically into the TVML templates using JavaScript; however we faced several issues, mostly related to the number of XHR calls needed to retrieve all the data, as well as some difficulties in linking all the screens. So to gain time - and performance - we decided to pre-render all the TVML screens server-side, using a NodeJS server. That way the code base on the client remained quite light, all the heavy lifting (calling the different APIs and building the screens) was done on the server. In our setup the screens were generated every 30 minutes by the NodeJS server and then cached by our CDN.

The app was launched on time for the Apple TV commercial launch, and was rapidly featured on the App Store. Success!

Culturebox V2: going native

However we were not completely satisfied by this first version. To meet the deadlines we took several shortcuts when building the app; for example, analytics were poorly implemented, resulting in app usage statistics that could not really be trusted. We also chose to use the native video player and did not implement any error or video session management, which prevented us from having visibility on the video playback experience. Finally building static screens, even if they are updated every 30 minutes, meant the tvOS app missed one of the key features available on other Culturebox applications: being able to watch a cultural event live.

So in early 2016 we decided that we should build a new version of the app with at least the following improvements:

1. Integrate the France Television standard iOS Player, which includes video analytics, QoS and various API endpoint integrations;
2. Properly implement application analytics to track application usage;
3. Generate all screens dynamically on the client side;
4. Customize the look & feel of the application to align it on the website and iPad application.

The last 3 changes could have been implemented using TVML/TVJS, but integrating a new video player required native development. Since we did not plan to reuse any code from the V1, and to simplify the project, we decided to rewrite the application entirely in native/Objective-C code.

So in early March we started working on the new version. Development was quite smooth on the UI side, as UIKit is actually used by TVML we were able to maintain the general look & feel of the application (with a few tweaks) as well as the neat features like the 3D "parallax" effect applied to thumbnails in all carousels. By generating all the screens on the client we can now show users when an event is currently broadcasted live ("en direct"), and allow them to "tune-in".

The main issues with encountered were related to the integration of a new video Player. As we chose to reuse our existing iOS player, we had to remove several functions which used APIs not available in tvOS. We also had to build an UI that allowed navigation using the Apple TV remote (and its trackpad). We could customize the appearance of the video information panel that appeared on top of the video when you slide down, but we had to develop our own "scrubbing" mechanism to allow the user to rewind and fast-forward in a video by swiping left and right; unfortunately Apple does not provide example code for this, and to have a behavior similar to the "native" video player you are on our own. There is still room for improvement in our implementation, especially as Apple has changed the behavior of the default video player in tvOS version 9.2: it is no longer possible to scrub a video during playback, the user must first pause the video, then scrub, then restart the video.

The new video player

What's next

Overall we found it quite easy to develop an app on Apple TV both using TVML or native Objective-C. Each approach has its pros and cons, depending on your main objective and preferred development language. In our case, we might try in the future to build an "hybrid" app, reusing the native FranceTV video player we have ported on tvOS in an app built mostly in TVML. This way we will be able to better leverage our development resources, as our web developers will be able to work on the UI and business logic (in TVML/TVJS) while our mobile developers will deal with all video related features as well as deeper integrations with tvOS. This would be close to what we do on Android TV, where our Java developers work on the video player and specific Android TV integrations while our web developers work on the HTML interface, displayed in a webview. To be continued!

---

Nous venons de publier sur l'AppStore une nouvelle version de notre application de Culturebox qui a été (brièvement) présentée dans la dernière keynote d'Apple. Bien qu'elle semble très similaire à la version précédente publiée en Octobre, et permet d'accéder au même catalogue de vidéos en direct et en replay, elle intègre des changements majeurs. Passons les en revue.

Culturebox V1: TVML et TVJS

Pour la première version de Culturebox sur Apple TV, nous avions décidé d'utiliser le nouveau langage de développement proposé par Apple pour tvOS : TVML. Nous l'avions choisi pour plusieurs raisons:

• un démarrage plus rapide du projet : avec le code d'exemple fourni par Apple il était plus facile pour nous de construire une nouvelle application à partir de zéro;
• sa proximité avec les technologies utilisées dans nos autres applications de Smart TV (qui sont généralement écrites en Javascript);
• la disponibilité de modèles d'interface utilisateur personnalisables pour simplifier la conception des différents écrans (qui introduisent aussi des limites dans le design).

Qu'est-ce que TVML? Un Langage Markup TV conçu par Apple pour créer des applications dans un langage proche-mais-pas-tout-à-fait-comme le HTML. Apple a choisi de supprimer WebKit (le moteur de rendu HTML) sur tvOS, il n'est plus possible pour les développeurs de porter directement des applications Smart TV écrites en HTML5, comme nous pouvons le faire par exemple sur Android TV avec des "Webviews". TVML est un remplacement pour HTML / CSS pour la couche de présentation, et est associé à un framework basé sur JavaScript nommé TVJS pour gérer la logique métier (et oui, même si HTML n'est pas supporté sur Apple TV, vous pouvez toujours utiliser JavaScript). L'architecture globale des applications TVML est décrite ci-dessous:

Les fichiers TVML (la couche de présentation) et les fichiers JS (la logique métier) doivent être hébergé sur un serveur, et pointent vers des ressources externes comme des vidéos et des images. Sur l'Apple TV elle-même un "conteneur" en code natif (Swift ou Objective-C) va lancer l'application JS (définie par son URL), en passant éventuellement des données d'initialisation. L'application JS va alors charger des pages TVML statiques (ou construites dynamiquement) et gérer les interactions des utilisateurs. Apple a fourni plusieurs modèles TVML prêts à l'emploi qui peuvent être utilisés et respectent toutes les directives graphiques. Pour notre première application nous avons décidé de construire une application très simple en utilisant principalement le modèle Stack pour présenter le contenu Culturebox dans les différents écrans.

Au départ, nous avons essayé d'injecter les données de manière dynamique dans les modèles TVML en utilisant JavaScript. Cependant nous avons été confrontés à plusieurs problèmes, principalement liés au nombre d'appels XHR nécessaires pour récupérer toutes les données, ainsi que des difficultés à lier tous les écrans. Donc, pour gagner du temps - et des performances - nous avons décidé de pré-générer tous les écrans en TVML côté serveur, en utilisant un serveur NodeJS. De cette façon, le code côté client est resté assez léger, tous les traitements lourds (appeler les différentes API et construire les écrans) étant faits côté serveur. Dans notre configuration les écrans étaient générés toutes les 30 minutes par le serveur NodeJS puis mis en cache par notre CDN.

L'application a été lancée à temps pour le lancement commercial d'Apple TV, et a été rapidement mise en avant sur l'App Store. Succès !

Culturebox V2 : vers une approche native

Cependant nous n'étions pas complètement satisfaits de cette première version. Pour respecter les délais, nous avons pris plusieurs raccourcis lors du développement de l'application. Par exemple, les outils de mesure d'audience ont été mal intégrés, ce qui entraîne des statistiques d'utilisation non fiables. Nous avons également choisi d'utiliser le lecteur vidéo natif sans intégrer de gestion d'erreurs ou des sessions vidéos, qui nous a empêché d'avoir une visibilité sur la qualité de l'expérience de lecture. Enfin la pré-génération des écrans de façon statique, même en les mettant à jour toutes les 30 minutes, a fait que l'application tvOS n'intégrait pas l'une des fonctions clés disponible sur d'autres versions de l'application Culturebox : pouvoir assister à un événement culturel en direct.

Donc, début 2016, nous avons décidé de développer une nouvelle version de l'application intégrant à minima les améliorations suivantes :

• Utiliser le lecteur vidéo iOS standard de France Télévisions, qui intègre des outils de mesure d'audience vidéo, de qualité de service et les APIs de notre SI vidéo;
• Intégrer correctement des outils de mesure d'audience de l'application pour contrôler son usage;
• Générer tous les écrans dynamiquement côté client;
• Personnaliser l'interface de l'application pour l'aligner sur le site et l'application iPad.

Les 3 dernières modifications auraient pu être mis en œuvre en utilisant à nouveau TVML / TVJS, mais l'intégration d'un nouveau lecteur vidéo nécessitait un développement natif. Comme nous ne prévoyions pas de réutiliser le code de la V1, et pour simplifier le projet, nous avons décidé de réécrire l'application entièrement en code natif (Objective-C).

Donc, début Mars, nous avons commencé à travailler sur la nouvelle version. Le développement de l'interface utilisateur fut assez simple, UIKit étant en fait utilisé par les modèles TVML nous avons pu maintenir l'apparence générale et la convivialité de l'application (avec quelques modifications). Nous avons aussi pu conserver certaines caractéristiques typiques de l'Apple TV comme l'effet 3D "Parallax" appliqué aux vignettes dans tous les carrousels. En générant tous les écrans côté client, nous pouvons à présent indiquer aux utilisateurs quand un événement est diffusé en direct, et leur permettre de "zapper".

Les principaux problèmes rencontrés furent liés à l'intégration du nouveau lecteur vidéo. Comme nous avons choisi de réutiliser notre lecteur iOS existant, nous avons dû supprimer toutes les fonctions utilisant des APIs non supportées par tvOS. Nous avons également dû construire une interface utilisateur qui permette la navigation avec la télécommande Apple TV (et son pavé tactile). Nous avons pu personnaliser l'apparence du panneau d'information vidéo qui apparaît au-dessus de la vidéo lorsque vous glissez vers le bas, mais nous avons dû développer notre propre mécanisme de "scrubbing" pour permettre à l'utilisateur de revenir en arrière ou de faire avance rapide dans une vidéo en glissant à gauche et droite. Malheureusement Apple ne fournit pas d'exemple de code pour cela, donc pour avoir un comportement similaire au lecteur natif vous devez vous débrouiller. Il y a encore des possibilités d'amélioration dans notre implémentation, d'autant plus que Apple a changé le comportement du lecteur vidéo par défaut dans tvOS version 9.2 : il n'est plus possible de "scrubber' une vidéo en cours de lecture, l'utilisateur doit d'abord mettre en pause la vidéo, "scrubber", puis redémarrer la vidéo.

Prochaines étapes

Dans l'ensemble, nous avons trouvé qu'il est tout aussi facile de développer une application sur Apple TV en utilisant TVML ou en natif Objectif-C. Chaque approche a ses avantages et ses inconvénients, en fonction de votre objectif principal et de votre langage de développement préféré. Dans notre cas, nous allons peut être essayer à l'avenir de construire une application «hybride», en réutilisant le lecteur vidéo natif FranceTV que nous avons porté sur tvOS, dans une application construite principalement en TVML. De cette façon, nous serons en mesure de mieux tirer parti de nos ressources de développement, nos développeurs web pouvant travailler sur l'interface utilisateur et la logique métier (en TVML / TVJS) pendant que nos développeurs mobiles implémenteront les fonctionnalités liées à la vidéo, ainsi que les intégrations plus profondes avec le système d'exploitation tvOS. Cette organisation serait proche de ce que nous faisons sur Android TV, où nos développeurs Java travaillent sur le lecteur vidéo et l'ntégration à Android TV alors que nos développeurs web travaillent sur l'interface HTML, affichée dans une "webview". À suivre!