Technická realizace časové osy TV 90. let bez vývojářů | Analýza

Interaktivní časová osa TV 90. let: technická realizace bez rozpočtu a vývojářů

Tým designérů a redaktorů bez jediného interního vývojáře vytvořil rozsáhlý webový projekt o evoluci ruské televize. Interaktivní dům se 108 okny, invertovaný scroll a vlastní CMS byly realizovány za půl roku na vanilla JavaScriptu s nulovým rozpočtem. Rozkládáme technická řešení, která zajistila stabilní fungování i v Safari.

Architektura bez frameworků: proč jsme se vzdali Reactu

Projekt začal vědomým odmítnutím moderních frontendových frameworků. Hlavní argument – absence profesionálních vývojářů v týmu. Vedoucí designu, který se ujal technické realizace, používá neuronové sítě jako hlavní nástroj pro psaní kódu. Vanilla JS se stal jedinou možností kontroly kvality generovaného AI kódu.

Klíčová architektonická řešení:

• Invertovaný scroll přes flex-direction: column-reverse
• Dynamická časová osa s fish-eye efektem
• ES6 moduly místo bundleů
• Vlastní videopřehrávač bez externích závislostí

Tento přístup poskytl klíčovou výhodu: přímé načítání modulů prohlížečem bez hydratace a runtime overheadu. Při prvním renderu balíčky váží 47 kB místo typických 200+ kB u React aplikací. Pro projekt s vysokou grafickou zátěží to bylo nezbytné pro výkon.

Optimalizace mediálního obsahu: z 35 sekund na 2,5

Původní načítání webu trvalo 35 sekund kvůli 108 vysoce kvalitním obrázkům interiérů. Řešení vycházelo z víceúrovňového zpracování:

• Automatická konverze PNG do WebP/AVIF při nahrání přes admin panel
• Generování blur-up náhledů (50px šířka) pro okamžitou vizuální zpětnou vazbu
• Streamové zpracování obrázků místo buferizace v paměti
• Omezení paralelních konverzí na dva procesy

// Fish-eye efekt pro časovou osu
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})`;
}

Kritickým bodem byl OOM Killer v Kubernetes: Sharp při paralelním zpracování AVIF vyčerpal paměťové limity. Oprava zahrnovala snížení parametru effort na 2 a přechod na streamové zpracování. Výsledek – komprese PNG 4,7 MB na WebP 152 kB (31x) bez ztráty vizuální kvality.

Preloader jako součást konceptu

Tematický preloader s TV rušením byl realizován přes Canvas místo video souborů. Toto řešení dalo tři klíčové výhody:

• Absence viditelné smyčky (generování šumu přes Math.random())
• Menší velikost (310 řádků JS oproti 5+ MB pro WebM)
• Možnost opakovaného použití logiky

// Generování rušení pro titulek
function generateHeadlineNoise() {
    const frames = [];
    for (let i = 0; i < 4; i++) {
        frames.push(generateNoiseFrame());
    }
    document.documentElement.style.setProperty('--noise-frames', frames.join(','));
}

Preloader zároveň řeší technickou úlohu – umožňuje shromáždit všechny těžké assety před zobrazením rozhraní. Dům se objeví okamžitě, bez „rozplývání“ textur. Stejný algoritmus generování šumu slouží i pro velikonoční vejce při najetí na titulek.

Backend: od JSON souboru k Kubernetes

Původní realizace ukládala data do data.json na VPS za 5 $. Přechod na korporátní infrastrukturu vyžadoval:

• Nahrazení JSON za MariaDB
• Integraci s MinIO místo lokálního úložiště
• Nastavení Nginx jako reverse proxy
• Adaptaci na CI/CD pipeline GitLab

Vizuální editor v admince umožňuje designérům upravovat obsah přímo v mřížce – klikneš na okno, změníš parametry. Toto řešení je klíčové pro netechnické členy týmu. Všechny mediální soubory se zpracovávají automaticky: Sharp generuje WebP, AVIF a blur-up náhledy bez lidského zásahu.

Co je důležité

• Invertovaný scroll přes column-reverse je levnější na realizaci než JS animace a funguje ve všech prohlížečích
• Streamové zpracování obrázků zabraňuje OOM pádům i na slabých serverech
• Canvas místo videa pro dynamické efekty šetří traffic a zvyšuje kvalitu vnímání
• Vlastní videopřehrávač bez knihoven snižuje velikost bundle o 120 kB
• Blur-up náhledy vytvářejí iluzi okamžitého načítání při reálné úspoře trafficu

Technický dluh projektu je minimální: 92 % kódu napsaly neuronové sítě na první pokus, zbylých 8 % tvoří manuální úpravy pro Safari. Přechod na moderní nástroje (Kubernetes, AVIF) proběhl bez navyšování rozpočtu díky využití korporátní infrastruktury. Hlavní závěr: i netechnický tým dokáže vytvořit složitý webový projekt při správném výběru stacku a zaměření na optimalizaci zdrojů.

— Editorial Team