Lors du développement sur HbbTV l’un des principaux problèmes que nous rencontrons est les spécificités et bugs liés au device sur lequel se trouve l’utilisateur.

Nous en parlions dans l’article sur les limitations, certains bugs sont spécifiques à une marque voir même à une année de télévisions.
Par exemple les Samsung 2011 ne supportent pas la fonction JSON.parse() ou certaines lisent les flux DASH ou HLS mais pas d’autres.

Nous sommes donc obligés de développer un fix à chacun de ces problèmes. Au final, nous nous retrouvons avec du code commun à tous les devices et des morceaux de code qui ne seront utilisés que sur certains modèles de télévision mélangés dans l’application.

On peut choisir de garder tout le code au même endroit mais cette option augmente la complexité du code. Nous avions choisi de n’inclure que le code ciblant un seul device à la fois en les isolant dans des branches distinctes.

Ancienne structure d’un projet multi device sur Git

Ce branching model améliorait la lisibilité du code mais nous devions rebaser les différentes branches et gérer les différents conflits liés à chaque modification de la branche commune.

La solution qui a été prise est la réalisation d’un framework basé sur le design pattern strategy. Cette base de code va sélectionner au build les morceaux spécifiques à exécuter en fonction de l’environnement. Pour plus de compréhension, les différents blocs de code sont bien identifiables et séparés du code commun de l’application.

Identification de la télévision

Pour réaliser cela, nous devons être en mesure de déterminer le type de device lorsque l’application s’exécute.

L’information sur laquelle nous nous basons est le user agent du navigateur. Chaque modèle de télévision comporte un user agent regroupant plusieurs informations dont la marque de la télé ou l’OS dans certains cas.

L’année du modèle n’est pas toujours indiquée explicitement. Nous avons dû nous baser sur les différences du contenu du user agent entre les différents modèles pour en déduire l’année.

Listing des user agents utilisés pour la détection des télévisions

L’application va transmettre ce user agent à notre webservice qui va l’analyser puis retourner les informations dont nous avons besoin (Marque, type, année et version HbbTV).

Notre framework ne fait pas que gérer les applications HbbTV. Il permet également de gérer d’autres plateformes comme les SmartTV (Orsay ou Tizen pour Samsung, netCast ou webOS pour LG, …) ou AndroidTV (pour nos applications à base de webviews).

Bloc de code dynamique

Grâce à ces informations, nous avons pu isoler, dans des fichiers séparés, le code spécifique à une gamme de télévisions et même pour une seul année d’une gamme si besoin, Ce procédé apporte plus de clarté dans le code et facilite la tâche lors du développement.

Le framework recherche la stratégie la plus précise en premier, c’est à dire platforme-marque-année (ex : hbbtv-sony-2014). Si elle n’existe pas, il remonte automatiquement de niveau pour une stratégie plus générale : hbbtv-sony puis hbbtv.

Un avantage au découpage de morceau de code est qu’en créant des modules génériques, nous pouvons les réutiliser dans d’autres projets. Nos projets sont donc réalisés dans un canvas défini et identique.

Le chargement des modules se fait grâce à RequireJS qui nous permet de simplifier la gestion des dépendances de notre code.

Actuellement, nous avons créé une trentaine de librairies transverses mutualisées entre les applications qui couvrent nos principaux besoins. Cela va du mapping des touches de la télécommande à la lecture des vidéos en passant par la gestion des requêtes http.