Xebia TV 2.0 est en ligne! Retour sur ce projet…

La nouvelle version de Xebia TV est désormais accessible ici.

Cette mise à jour a pour objectif d’améliorer l’expérience utilisateur grâce à un meilleur design et un nouveau player Youtube personnalisé.

L’arrivée de cette version est aussi l’occasion de revenir ensemble sur ce projet et les solutions techniques que nous avons retenues pour sa réalisation.

Petit retour en arrière…

Pour ceux qui ont manqué la mise en service de Xebia TV, celle-ci a eu lieu le 29 septembre 2014. L’idée à l’origine de ce projet était de faciliter la vie des Xebians qui ne pouvaient pas assister en personne à toutes les sessions de XKE ou de tech events. Ainsi, Xebia TV leur permettrait de les revoir à la demande et même d’interagir en live avec les animateurs par chat.

Une première version de l’application vit le jour au cours d’un hackathon que nous avions organisé dans le cadre d’un XKE. Suite à ce hackathon, nous avons continué à travailler dessus. Le projet gagnant en maturité, la décision fut prise d’en ouvrir l’accès au public pour arriver à sa première mise en production.

Depuis, nous avons effectué pas mal de refactorings et repensé l’ergonomie et la conception de l’application pour vous présenter cette nouvelle version.

Nos choix techniques

• Organisation des fichiers sources en DDD.
• Coté front-end :
  • Application : AngularJS, Less et l’API de Google pour créer un player Youtube personnalisé que nous avons encapsulé en directive réutilisable ;
  • Build  : Gulp et Bower.
• Coté back-end :
  • Application : NodeJS, Express, Bluebird et SuperAgent ;
  • Stockage : Les vidéos sont actuellement hébergées et indexées sur Youtube.
• Industrialisation :
  • Tests : Karma, Mocha, Sinon et Chai ;
  • Integration continue : Codeship ;
  • Plateforme : Elastic Beanstalk

La mise à jour 2.0

• Ajout d’une page d’accueil :
  • Présentation de Xebia TV
  • Notification et liens vers le live en cours
  • Affichage du programme des lives prévus pour la journée
  • Liens vers les vidéos les plus populaires
• Utilisation d’un player Youtube personnalisé :
  • Look & feel original
  • Compatible HTML5 selon le navigateur utilisé
• Écran Live :
  • Remplacement des images affichées à la place du player si aucun live n’est en cours
  • Correction d’un bug empêchant le chat de fonctionner correctement
• Écran V.O.D. :
  • Les descriptions accompagnant les vidéos sont formatées pour une meilleure lisibilité
  • Amélioration graphique des vignettes des vidéos
  • Il est désormais possible d’accéder à une vidéo spécifique en copiant/collant son url dans la barre d’adresse du navigateur
• Refontes techniques :
  Cela ne vous intéressera que modérément mais nous autres, les développeurs, nous aimons le gain de maintenabilité obtenu par ces refontes.
  En résumé, ces refontes nous ont permis d’adopter un design DDD, d’intégrer des librairies comme Bluebird/SuperAgent et de nettoyer le code source d’origine. Pour rappel, dans le contexte du hackathon, tous les membres de l’équipe n’étaient pas des experts AngularJS/NodeJS. Après tout, l’intérêt de ce hackathon était aussi de découvrir des technologies que l’on n’avait pas forcément l’habitude de manipuler.

Pour finir, merci à Sarah Buisson, Mathieu Breton et Jérémy Vinai pour la réalisation de cette version.