Implémentation technique de la chronologie TV des années 90 sans développeurs | Analyse

Chronologie interactive de la TV des années 90 : Implémentation technique sans budget ni développeurs

Une équipe de designers et d'éditeurs, sans un seul développeur en interne, a réalisé un projet web à grande échelle sur l'évolution de la télévision russe. Une maison interactive comptant 108 fenêtres, un défilement inversé et un CMS sur mesure ont été construits en seulement six mois avec du JavaScript vanilla, sur un budget nul. Nous décortiquons les solutions techniques qui ont assuré des performances stables même dans Safari.

Architecture sans framework : Pourquoi ils ont renoncé à React

Le projet a démarré par un rejet délibéré des frameworks frontend modernes. La raison principale ? L'absence de développeurs professionnels dans l'équipe. Le responsable design, chargé de l'implémentation technique, s'est appuyé sur des réseaux neuronaux comme outil principal de génération de code. Le JavaScript vanilla était le seul moyen de contrôler la qualité du code généré par l'IA.

Décisions architecturales clés :

• Défilement inversé via flex-direction: column-reverse
• Chronologie dynamique avec effet fisheye
• Modules ES6 au lieu de bundles
• Lecteur vidéo personnalisé sans dépendances tierces

Cette approche offrait un avantage décisif : chargement direct des modules par le navigateur, sans hydration ni surcharge d'exécution. Au premier rendu, les paquets ne pèsent que 47 Ko, contre plus de 200 Ko typiquement pour les apps React. Pour un projet aux exigences graphiques élevées, cela était essentiel pour les performances.

Optimisation du contenu média : De 35 secondes à 2,5

Les temps de chargement initiaux du site atteignaient 35 secondes en raison de 108 images intérieures de haute qualité. La solution reposait sur un traitement multi-niveaux :

• Conversion automatique PNG vers WebP/AVIF à l'upload via le panneau d'administration
• Génération d'aperçus flous (largeur 50 px) pour un retour visuel instantané
• Traitement d'images en streaming au lieu de mise en tampon en mémoire
• Limitation des conversions parallèles à deux processus

// Effet fisheye pour la chronologie
const distanceFromCenter = Math.abs(timelineCenterY - elementCenterY);
if (distanceFromCenter < fishEyeRadius) {
    const ratio = 1 - (distanceFromCenter / fishEyeRadius);
    const scale = 1.0 + (maxScale - 1.0) * ratio;
    element.style.transform = `scale(${scale})`;
}

Le point de rupture était l'OOM Killer dans Kubernetes : Sharp épuisait les limites mémoire lors du traitement parallèle AVIF. La correction a consisté à réduire le paramètre effort à 2 et à passer au traitement en streaming. Résultat : compression d'un PNG de 4,7 Mo à 152 Ko en WebP (x31) sans perte de qualité visible.

Préchargeur intégré au concept

Le préchargeur thématique avec neige TV a été implémenté via Canvas plutôt que des fichiers vidéo. Cela apportait trois avantages clés :

• Absence de boucle visible (bruit généré via Math.random())
• Taille réduite (310 lignes de JS contre plus de 5 Mo pour WebM)
• Logique réutilisable

// Génération de neige pour le titre
function generateHeadlineNoise() {
    const frames = [];
    for (let i = 0; i < 4; i++) {
        frames.push(generateNoiseFrame());
    }
    document.documentElement.style.setProperty('--noise-frames', frames.join(','));
}

Le préchargeur résout un défi technique en rassemblant tous les assets lourds avant d'afficher l'interface. La maison apparaît instantanément, sans flou de textures. Le même algorithme de génération de bruit alimente un œuf de Pâques au survol de l'en-tête.

Backend : Du fichier JSON à Kubernetes

La configuration initiale stockait les données dans data.json sur un VPS à 5 $. Pour passer à une infrastructure d'entreprise, il a fallu :

• Remplacer JSON par MariaDB
• Intégrer MinIO au lieu du stockage local
• Configurer Nginx comme proxy inverse
• Adapter à un pipeline GitLab CI/CD

L'éditeur visuel du panneau d'administration permet aux designers de modifier le contenu directement dans la grille — cliquer sur une fenêtre, ajuster les paramètres. C'est crucial pour les membres non techniques de l'équipe. Tous les fichiers média sont traités automatiquement : Sharp génère WebP, AVIF et aperçus flous sans intervention humaine.

Enseignements clés

• Défilement inversé via column-reverse est moins coûteux à implémenter que les animations JS et fonctionne sur tous les navigateurs
• Traitement d'images en streaming évite les plantages OOM même sur des serveurs modestes
• Canvas plutôt que vidéo pour les effets dynamiques économise de la bande passante et améliore la qualité perçue
• Lecteur vidéo personnalisé sans bibliothèques réduit la taille du bundle de 120 Ko
• Aperçus flous créent l'illusion d'un chargement instantané tout en économisant la bande passante réelle

La dette technique est minimale : 92 % du code a été généré correctement du premier coup par les réseaux neuronaux, les 8 % restants étant des correctifs manuels pour Safari. L'adoption d'outils modernes (Kubernetes, AVIF) s'est faite sans augmentation de budget, grâce à l'infrastructure corporate. La grande leçon : même une équipe non technique peut construire un projet web complexe avec la bonne stack et un focus sur l'optimisation des ressources.

— Editorial Team