# Interaktywna oś czasu TV lat 90.: realizacja techniczna bez budżetu i programistów
Zespół projektantów i redaktorów bez żadnego etatowego programisty stworzył masshtabowy projekt webowy o ewolucji rosyjskiej telewizji. Interaktywny dom z 108 oknami, odwrócony scroll i własny CMS zostały zrealizowane w pół roku na czystym JavaScript z zerowym budżetem. Rozkładamy techniczne rozwiązania, które zapewniły stabilną pracę nawet w Safari.
Architektura bez frameworków: dlaczego zrezygnowano z React
Projekt wystartował z świadomej rezygnacji z nowoczesnych frontendowych frameworków. Główny argument — brak profesjonalnych programistów w zespole. Kierownik designu, który wziął na siebie realizację techniczną, używa sieci neuronowych jako głównego narzędzia do pisania kodu. Vanilla JS stało się jedyną możliwością kontrolowania jakości generowanego przez AI kodu.
Kluczowe decyzje architektoniczne:
- Odwrócony scroll za pomocą
flex-direction: column-reverse - Dynamiczna oś czasu z efektem fish-eye
- Moduły ES6 zamiast bundli
- Własny odtwarzacz wideo bez zewnętrznych zależności
Ten podejście dało kluczową przewagę: bezpośrednie ładowanie modułów przez przeglądarkę bez hydratacji i overheadu runtime. Przy pierwszym renderze pakiety ważą 47 KB zamiast typowych 200+ KB w aplikacjach React. Dla projektu z wysokim obciążeniem graficznym stało się to warunkiem koniecznym wydajności.
Optymalizacja mediów: z 35 sekund do 2,5
Początkowe ładowanie strony trwało 35 sekund z powodu 108 wysokiej jakości obrazów wnętrz. Rozwiązanie oparto na wielopoziomowej obróbce:
- Automatyczna konwersja PNG na WebP/AVIF przy wgrywaniu przez panel admina
- Generowanie blur-up podglądów (szerokość 50px) dla natychmiastowej wizualnej informacji zwrotnej
- Strumieniowa obróbka obrazów zamiast buforowania w pamięci
- Ograniczenie równoległych konwersji do dwóch procesów
// Fish-eye efekt dla osi czasu
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})`;
}Krytycznym punktem stał się OOM Killer w Kubernetes: Sharp przy równoległej obróbce AVIF wyczerpywał limity pamięci. Poprawka obejmowała obniżenie parametru effort do 2 i przejście na strumieniową obróbkę. Rezultat — kompresja PNG 4,7 MB do WebP 152 KB (31x) bez utraty jakości wizualnej.
Preloader jako część koncepcji
Tematyczny preloader z zakłóceniami TV zrealizowany przez Canvas zamiast plików wideo. To rozwiązanie dało trzy kluczowe zalety:
- Brak widocznej pętli (generowanie szumu przez Math.random())
- Mniejszy rozmiar (310 linii JS vs 5+ MB dla WebM)
- Możliwość ponownego użycia logiki
// Generowanie zakłóceń dla nagłówka
function generateHeadlineNoise() {
const frames = [];
for (let i = 0; i < 4; i++) {
frames.push(generateNoiseFrame());
}
document.documentElement.style.setProperty('--noise-frames', frames.join(','));
}Preloader jednocześnie rozwiązuje zadanie techniczne — pozwala zebrać wszystkie ciężkie assety przed wyświetleniem interfejsu. Dom pojawia się natychmiast, bez „rozmycia” tekstur. Ten sam algorytm generowania szumu jest używany do easter egga przy najechaniu na nagłówek.
Backend: od pliku JSON do Kubernetes
Początkowa realizacja przechowywała dane w data.json na VPS za 5 USD. Przejście na korporacyjną infrastrukturę wymagało:
- Zamiany JSON na MariaDB
- Integracji z MinIO zamiast lokalnego magazynu
- Konfiguracji Nginx jako reverse-proxy
- Adaptacji pod pipeline CI/CD GitLab
Wizualny edytor w panelu admina pozwala projektantom edytować treści bezpośrednio w siatce — klikasz na okno, zmieniasz parametry. To rozwiązanie jest kluczowe dla nietechnicznych uczestników projektu. Wszystkie pliki medialne są przetwarzane automatycznie: Sharp generuje WebP, AVIF i blur-up podglądy bez udziału człowieka.
Co ważne
- Odwrócony scroll przez column-reverse jest tańszy w realizacji niż animacje JS i działa we wszystkich przeglądarkach
- Strumieniowa obróbka obrazów zapobiega awariom OOM nawet na słabych serwerach
- Canvas zamiast wideo dla dynamicznych efektów oszczędza ruch i poprawia percepcję jakości
- Własny odtwarzacz wideo bez bibliotek zmniejsza rozmiar bundla o 120 KB
- Blur-up podglądy tworzą iluzję natychmiastowego ładowania przy realnej oszczędności ruchu
Techniczny dług projektu jest minimalny: 92% kodu napisano za pierwszym razem przez sieci neuronowe, pozostałe 8% to ręczne poprawki dla Safari. Przejście na nowoczesne narzędzia (Kubernetes, AVIF) nastąpiło bez zwiększenia budżetu dzięki wykorzystaniu korporacyjnej infrastruktury. Główny wniosek: nawet nietechniczny zespół może stworzyć złożony projekt webowy przy właściwym doborze stosu i skupieniu na optymalizacji zasobów.
— Editorial Team
Brak komentarzy.