BFM TV - Outil de Création d'Articles
Contribution à l'outil journalistique de BFM TV permettant la création d'articles structurés et optimisés pour différentes plateformes, avec un accent particulier sur les performances.
BFM TV Article Editor
Création d'articles structurés et optimisés pour multi-plateformes
Le besoin
BFM TV, chaîne d'information en continu du groupe Altice, avait besoin d'un outil de rédaction d'articles performant capable de répondre à plusieurs défis majeurs :
- →Créer des articles structurés adaptables à différents formats de diffusion (web, applications mobiles iOS/Android)
- →Aller au-delà du HTML classique pour permettre un formatage riche et responsive sur toutes les plateformes
- →Assurer des performances exceptionnelles même en cas de pics de trafic lors d'actualités majeures
- →Permettre aux journalistes de créer des contenus riches avec titres, citations, vidéos, photos et articles connexes
- →Minimiser le nombre de requêtes à la base de données pour garantir la vitesse d'affichage
La complexité principale résidait dans la nécessité de concilier richesse éditoriale et performances exceptionnelles, tout en garantissant une expérience utilisateur fluide sur toutes les plateformes, notamment lors de pics d'actualités générant un trafic très important.
La solution
Éditeur d'Articles Structurés avec DraftJS
Dans le cadre d'une équipe de développement, j'ai contribué à l'évolution d'un outil de création d'articles pour BFM TV, en me concentrant sur l'amélioration du backoffice et en optimisant les performances avec DynamoDB.
1Éditeur de contenu avancé avec DraftJS
Au cœur du système se trouvait un éditeur de contenu basé sur DraftJS offrant :
- Une structure de données précise au lieu du HTML classique, cruciale pour l'adaptation multi-plateformes
- Des blocs de contenus spécialisés pour titres, paragraphes, citations, médias, etc.
- Une interface intuitive pour les journalistes, similaire aux éditeurs traditionnels
- Des fonctionnalités avancées comme l'intégration d'articles connexes, de vidéos et de galleries
- Une prévisualisation adaptative pour anticiper le rendu sur différents appareils
2Optimisation des performances avec DynamoDB
L'un des aspects cruciaux du projet concernait l'optimisation des performances :
Structure de données optimisée permettant d'afficher un article complet avec seulement 3 requêtes DynamoDB maximum
Conception d'access patterns efficaces pour minimiser la latence en cas de fort trafic
Dénormalisation stratégique des données pour éviter les jointures coûteuses
Système de mise en cache intelligent pour les articles à fort trafic
Temps de réponse optimisé à quelques centièmes de secondes même pendant les pics d'actualité
3Fonctionnalités éditoriales avancées
Pour offrir aux journalistes des outils complets et efficaces, nous avons implémenté :
Création de contenu riche
- Intégration de médias (photos, vidéos)
- Citations et mises en exergue stylisées
- Structures d'articles personnalisables
- Formatage avancé du texte
Gestion éditoriale
- Articles connexes et recommandations
- Système de brouillons et programmation
- Workflow de validation et publication
- Statistiques de performance des articles
4Architecture technique et stack
L'application a été développée avec des technologies modernes pour garantir performances et évolutivité :
Frontend
- ReactJS : Pour une interface utilisateur réactive et modulaire
- DraftJS : Éditeur de texte riche et structuré
- Redux : Gestion des états de l'application
- Styled Components : Stylisation modulaire des composants
Backend & Infrastructure
- Node.js : APIs et traitement des données
- DynamoDB : Base de données NoSQL haute performance
- AWS Lambda : Fonctions serverless
- AWS CloudFront : CDN pour la distribution rapide des assets
Les résultats
L'outil de création d'articles a permis à BFM TV de moderniser son processus éditorial tout en garantissant une expérience utilisateur optimale sur toutes les plateformes.
Les principaux bénéfices incluent :
- Performances exceptionnelles avec des temps de chargement d'articles en quelques centièmes de secondes
- Réactivité maintenue même lors des pics d'actualité générant un trafic massif
- Contenu adaptatif s'affichant correctement sur le web et les applications mobiles
- Interface intuitive permettant aux journalistes de créer des articles riches et structurés
- Optimisation technique avec seulement 3 requêtes DynamoDB maximum pour afficher un article complet
Impact sur l'audience
Cette solution a contribué à maintenir la position de BFM TV comme source d'information de référence en permettant une publication rapide et fiable des actualités, avec une expérience utilisateur optimale même lors des événements majeurs générant des pics de trafic importants.
Le choix de DraftJS plutôt qu'un éditeur WYSIWYG traditionnel s'est avéré crucial, permettant d'adapter le contenu à différentes plateformes tout en maintenant une structure cohérente et performante.
Informations du projet
Client
BFM TV (NextRadioTV)
Période
2019 - 2020
Rôle
Développeur Fullstack Senior