https://tech.tf1.fr/Recent content on Blog technique e-TF1Hugo -- gohugo.iofr-FRMon, 05 May 2025 05:55:55 +0000https://tech.tf1.fr/post/2025/design-system/Mon, 05 May 2025 05:55:55 +0000https://tech.tf1.fr/post/2025/design-system/Mise en place d’un Design System pour TF1+ Contexte Un Design System, à quoi ça sert ? Toute équipe ayant travaillé sur des projets importants connaît ces problèmes : les titres, les sous-titres, les boutons ou encore les espacements, diffèrent d’une page à l’autre. Les développeurs, ne pouvant anticipé ou prévoir toutes les évolutions produits, vont commencer à tordre le composant, le rendant immaintenable, intestable et incompréhensible. Disposer d’un Design System permet de rendre les composants indépendants des spécificités des demandes produits.https://tech.tf1.fr/post/2025/apps/sf-symbols/Sat, 01 Feb 2025 09:00:00 +0000https://tech.tf1.fr/post/2025/apps/sf-symbols/Un choix d’équipe Fin 2023, la refonte de l’application MyTF1 en TF1+ s’accompagne par un changement de design, avec au programme la création d’un design system. Comme c’est un nouveau design system, c’est l’occasion de se repencher sur les choix techniques, afin qu’ils soient à la fois pragmatiques sur le court terme pour garder notre vélocité, et fiables sur le long terme. Dans cet article, nous allons expliquer ces choix techniques qui ont été faits sur iOS pour implémenter les nouvelles icônes.https://tech.tf1.fr/post/2024/iops/cost-optimisation/Mon, 16 Dec 2024 08:00:00 +0000https://tech.tf1.fr/post/2024/iops/cost-optimisation/La plateforme eTF1 Chez TF1, la plateforme eTF1 rassemble les marques clés TF1+, TF1 Info, et TfouMax. Pour répondre aux besoins de scalabilité rapides, notamment lors de grands événements sportifs et de pics d’audience, nous avons entrepris une démarche globale visant à rendre notre infrastructure plus dynamique, plus résiliente, et plus éco-responsable. Une infrastructure moderne hébergée principalement sur le cloud Notre plateforme repose en grande partie sur des clusters Kubernetes sur lesquels tous nos applicatifs sont déployés.https://tech.tf1.fr/post/2024/qa/migration-argo/Mon, 02 Sep 2024 09:00:00 +0000https://tech.tf1.fr/post/2024/qa/migration-argo/La migration de Jenkins vers une solution basée sur Docker avec Argo Workflows et Argo CD est une démarche stratégique pour l’équipe QA visant à moderniser et optimiser les processus de test automatisés avec une possibilité d’intégration continue (CI) et de déploiement continu (CD). Contexte de la migration Historiquement, l’équipe QA de la DT eTF1 utilisait Jenkins comme orchestrateur de lancement pour ses tests automatisés, via des pipelines d’exécution lancés manuellement ou de manière automatique.https://tech.tf1.fr/post/2024/ia/inference-llm-tgi/Wed, 26 Jun 2024 09:00:00 +0000https://tech.tf1.fr/post/2024/ia/inference-llm-tgi/L’inférence d’un Large Language Model Les LLMs (Large Language Model) sont de plus en plus adoptés en entreprise, leur coût, leur mise à l’échelle en production ou la confidentialité des données peuvent être de véritables défis. La solution la plus simple pour réaliser l’inférence d’un modèle consiste à payer une solution clé en main, telle que : openAI (chatGPT) Google (Gemini) Anthropic (Claude) Certains services, comme AWS Bedrock permettent de déployer différents modèles.https://tech.tf1.fr/post/2023/pub/streaming-fast-ssai/Mon, 06 Nov 2023 09:00:00 +0000https://tech.tf1.fr/post/2023/pub/streaming-fast-ssai/Chaînes FAST FAST est l’acronyme pour Free Ad-supported Streaming Television. Il s’agit de chaînes en streaming gratuites avec de la publicité. Le principe est de reprendre des contenus du catalogue TF1, typiquement en AVOD (Advertising Video on Demand) et de l’assembler pour constituer une grille de programmation qui alimentera une chaîne live. C’est le principe de Stream sur MYTF1. On parle alors de re-linéarisation des contenus. Mise en oeuvre des flux origin eTF1 assure le delivery des contenus VOD en HLS (HTTP Live Streaming) et DASH (Dynamic Adaptive Streaming over HTTP).https://tech.tf1.fr/post/2023/architecture/workflow-video-avec-temporal/Sun, 23 Jul 2023 09:00:00 +0000https://tech.tf1.fr/post/2023/architecture/workflow-video-avec-temporal/Contexte du nouveau workflow Dans un objectif de faire évoluer et de rendre plus flexible notre workflow d’encodage et de mise à disposition de nos flux vidéo (ce que nous appelons le delivery, principalement aux formats Dash et HLS), nous avons souhaités effectuer une refonte applicative de cette partie de notre stack applicative. Nous avons commencés par réfléchir à la façon dont nous pourrions découper les différentes tâches que nous effectuons pour l’encodage et la mise à disposition de nos vidéos.https://tech.tf1.fr/post/2023/cdm/Fri, 17 Mar 2023 09:00:00 +0000https://tech.tf1.fr/post/2023/cdm/De l’architecture applicative aux CDN en passant par la sécurité, la Coupe du Monde a mis à l’épreuve tous les pans de l’infrastructure de MYTF1. Et a requis une mobilisation de tous, partenaires compris. Retour sur un événement exceptionnel. Jusqu’à 29,4 millions de téléspectateurs durant la séquence de tirs au but de la finale France-Argentine. Un record historique pour un programme TV qui s’est également accompagné d’un autre record pour MYTF1 : 3 millions de visites cumulées durant la finale.https://tech.tf1.fr/post/2022/architecture/abonnement-multi-plateforme/Mon, 14 Mar 2022 08:00:00 +0000https://tech.tf1.fr/post/2022/architecture/abonnement-multi-plateforme/Présentation de l’architecture Vous l’avez peut-être remarqué si vous êtes un utilisateur MYTF1, nous avons récemment sorti l’offre MYTF1 MAX : une offre payante vous permettant de bénéficier de plus de contenu et de fonctionnalités étendues. Afin de mettre en place cette nouvelle fonctionnalité sur le site web mais aussi sur les applications mobiles MYTF1, nous avons mis en place une stack technique permettant de prendre des abonnements depuis plusieurs platformes :https://tech.tf1.fr/post/2021/pub/tv-segmentee/Tue, 30 Nov 2021 06:00:00 +0000https://tech.tf1.fr/post/2021/pub/tv-segmentee/TV Segmentée Saviez-vous qu’une loi contraignant les chaines de télévision à diffuser très exactement les mêmes publicités sur tout le territoire avait été récemment modifiée pour rendre possible ce que l’on appelle la Télévision Adressée, ou Segmentée ? Le terme TV Adressable est probablement le plus explicite pour décrire le concept : il est maintenant possible d’adresser une publicité donnée à un public en particulier. Dans cet article nous allons faire le tour de ce qu’est le flux linéaire, le broadcast, l’Ad Switching et surtout, comment nous pouvons faire de la télévision segmentée.https://tech.tf1.fr/post/2021/architecture/eks/Wed, 29 Sep 2021 08:30:00 +0000https://tech.tf1.fr/post/2021/architecture/eks/Avant propos Cet article présente le cluster EKS qui héberge les applications d’e-TF1: Le site de streaming de TF1 Le site d’info LCI Le site jeunesse TFOUMAX Et plus précisément notre gestion de droit au sein du cluster eks ainsi que le modèle de déploiement blue/green du cluster kubernetes managé par AWS (EKS) que nous utilisons. Brève description de kubernetes à la sauce EKS Kubernetes est un orchestrateur de container.https://tech.tf1.fr/post/2021/architecture/backend-graphql-ui/Fri, 23 Apr 2021 09:00:00 +0000https://tech.tf1.fr/post/2021/architecture/backend-graphql-ui/Avant propos Nous avons déjà eu l’occasion de montrer que les échanges de données entre les fronts MYTF1 et les API back, s’effectuent au travers d’une gateway GraphQL (voir: GraphQL et les persisted queries). Plus encore, le langage GraphQL est également majoritairement utilisé dans nos applications internes (CMS MYTF1, Administration, Configurations, Gestion des droits). Nous proposons ici, de vous présenter nos différentes manières d’ajouter GraphQL à nos applications internes. (Cet article n’est pas tout à fait une introduction au langage GraphQL, une connaissance rudimentaire de ce langage serait un plus.https://tech.tf1.fr/post/2021/architecture/migration-vers-kafka/Fri, 19 Feb 2021 08:30:00 +0000https://tech.tf1.fr/post/2021/architecture/migration-vers-kafka/Historique Comme vous avez pu le découvrir sur notre article Tour d’horizon technique, notre stack backend est chargée d’exposer les données aux différents fronts. Chez MYTF1, la partie contenu vidéo est gérée par une équipe dédiée. Son rôle est de faire le lien entre l’antenne (les chaines de télévision) et la plateforme de diffusion de MYTF1. Pour ce faire, l’équipe vidéo récupère différentes données en provenance de l’antenne (les fichiers vidéos, les sous-titres, les méta-données, etc.https://tech.tf1.fr/post/2020/team/backend/Thu, 17 Dec 2020 09:00:00 +0000https://tech.tf1.fr/post/2020/team/backend/Avant propos Cet article a pour objectif de présenter l’équipe Backend et n’est en aucun cas une présentation technique détaillée des entrailles de MYTF1. Les aspects techniques seront abordés en détail dans des articles dédiés. Ici, nous nous concentrerons sur la composition de l’équipe, son histoire et partagerons avec vous quelques unes des décisions que nous avons prises ces dernières années. Bonne lecture. Qui sommes nous ? Intégrée au sein de e-TF1 (antenne digitale du groupe TF1) l’équipe Backend a pour objectif de répondre aux problématiques suivantes :https://tech.tf1.fr/post/2020/architecture/graphql-and-persisted-queries/Wed, 25 Nov 2020 07:45:00 +0000https://tech.tf1.fr/post/2020/architecture/graphql-and-persisted-queries/Avant propos La performance est un sujet critique pour MYTF1. Lors de grands évènements tels que la coupe du monde de football ou de la diffusion de programmes fédérateurs comme The Voice ou Koh-Lanta, le service doit tenir la charge face à plusieurs centaines de milliers d’utilisateurs simultanés qui peuvent se connecter à seulement quelques minutes d’intervalle pour, par exemple, suivre un live. Il nous faut alors trouver des solutions techniques pour absorber ces pics de trafic.https://tech.tf1.fr/post/2020/architecture/video/Thu, 22 Oct 2020 16:00:00 +0000https://tech.tf1.fr/post/2020/architecture/video/La vidéo est un domaine assez large, avec pas mal d’acronymes et de formats exotiques. Nous allons y aller progressivement 😉 Types de vidéos Nous distinguons 2 types de vidéos: les flux live, c’est à dire le direct des chaines TF1, TMC, TFX, TF1 Séries Films, LCI et lives évenementiels. Ils proviennent d’un encodage en temps réel d’un flux vidéo “broadcast” (télévision) vers un format de diffusion vidéo “informatique”. Nous appelerons cette partie “live”.https://tech.tf1.fr/post/2020/architecture/presentation/Thu, 22 Oct 2020 15:00:00 +0000https://tech.tf1.fr/post/2020/architecture/presentation/Avant propos Cet article a pour objectif de présenter la stack technique et les technos utilisées dans les coulisses de MYTF1. Il s’agit d’un tour d’horizon sur l’ensemble du périmètre des fronts au backend et qui répond en partie a la question: on fait quoi chez e-TF1 ? MYTF1 quésaco ? MYTF1 est le service de replay du groupe TF1. Il permet à nos utilisateurs de voir ou revoir en streaming les programmes des chaînes suivantes : TF1, TMC, TFX, TF1 Séries Films et LCI.https://tech.tf1.fr/post/2020/global/launch/Thu, 22 Oct 2020 14:00:00 +0000https://tech.tf1.fr/post/2020/global/launch/Voilà ! Il est enfin là ! Le blog de la direction technique de e-TF1. Après plusieurs mois de réflexion, nous lançons enfin notre blog (il était temps 😅). L’occasion de partager avec vous notre quotidien au sein de la direction technique de e-TF1. Une plateforme de streaming vidéo c’est quoi exactement ? Et comment ça marche ? Nous allons essayer de répondre à ces questions en abordant le plus d’aspects possibles comme : l’encodage et la lecture des vidéos, la créations des fronts (web, applications mobiles et box opérateurs), la publicité, la data, les services backend, l’infrastucture, etc.