Při vývoji jsme u nás nějakou dobu řešili hlavně nové sporty a funkce. Proto přišel čas začít se zase pořádně věnovat frontendu — ke slovu už se dostal redesign webů, responzivita i optimalizace výkonu.

Livesport
Livesport
Sep 17 · 6 min read

Poměrně dlouhou dobu se náš vývoj točil hlavně kolem nových sportů a rostoucího množství funkcí, které uživatelé potřebovali nebo jim měli zlepšit používání celé platformy. Týká se to například živých komentářů u zápasů, zranění hráčů, sestav a dalších detailů.

Tento tlak na funkce znamenal jediné — nevěnovala se taková pozornost vývoji samotného frontendu. Tím postupně vznikl poměrně velký technologický dluh, který bylo potřeba vyřešit. Uvědomili jsme si, že abychom ho smazali, musíme frontend opravdu výrazně modernizovat.

Postupovat jsme museli krok za krokem a vše jsme naplánovali na tři hlavní fáze. První spočívala v úpravách designu, druhá obnášela kroky vedoucí k responzivitě a úkolem třetí je optimalizace výkonu.

Designová modernizace

Po několika letech nezbývalo než faceliftovat design. Používali jsme prvky jako jsou stíny, gradienty, kulaté rohy, příliš mnoho nesourodých barev a další části, které už vypadají staře.

Nahoře naše home page před redesignem, dole po redesignu.

Rozhodně jsme ale nechtěli nějak zásadně měnit rozložení prvků, na jejichž umístění a funkčnost jsou uživatelé zvyklí. Základním cílem redesignu tak byla modernizace grafiky a nikoli kompletní přestavba struktury webu.

Touto částí jsme úspěšně prošli. I když se ozvalo pár uživatelů, kterým se nový design příliš nezamlouval, od ostatních jsme měli pozitivní ohlas, takže jsme nakonec byli s výsledkem spokojeni. Vždy se ale snažíme uživatelům naslouchat, takže pokud jde o nějakou změnu, která nám dává smysl a není náročná na zapracování, snažíme se ji do produktu přidat. Úspěch faceliftu nám dodal odvahu postoupit k další fázi — responzivnímu designu.

Správné rozložení všude

Náš web skvěle fungoval na počítači s monitorem, ale mobily, tablety a další zařízení, která se ovládají dotykem, byla problematická.

Takto (nalevo) vypadala naše původní home page na mobilu, vpravo je výsledek po zavedení responzivu.

Oproti jiným webovým aplikacím jsme specifičtí tím, že pracujeme s obrovským množstvím informací zobrazených najednou na jedné stránce, a zároveň s velkým množstvím variant a stavů, což je velmi náročné jakkoli přizpůsobovat. Příkladem byla nesouvisející banalita —banalita jen na první pohled. Spoustu původně tmavých ploch jsme změnili z černé na čistě bílou. Uživatelé si stěžovali, že jde o razantní změnu a stránka jim najednou “vypaluje” oči.

S designéry jsme to prodiskutovali a našli kompromisní řešení, které nenarušilo koncepci grafiky a lidem pomohlo. Větší plochy pod webem jsme co se týče světlosti utlumili a obsah zůstal takový, jaký jsme chtěli.

Když jsme ve statistikách Google Analytics zjistili, že ve většině zemí už převažují uživatelé s mobilním telefonem (s přístupem z desktopu stále ještě vede Česko nebo třeba Rusko), bylo nám jasné, že máme dvě možnosti — pokračovat ve vývoji naší mobilní verze webu, nebo přejít na responzivní design.

Obě varianty jsme pečlivě analyzovali, ale nakonec zvítězil responzivní web. Hlavně proto, že odpadla nutnost udržovat dvojí kód, což zjednodušuje celý vývoj. S responzivním designem máme jeden zdroj, který funguje všude a už teď pociťujeme, že to bylo správné rozhodnutí. Více času věnujeme vývoji hlavního produktu a nikoli duplicitní práci.

Moderní React místo zastaralého jQuery

S plánem přejít na responzivní design souvisel i další velký krok — náš hlavní obsah jsme museli přepsat ze zastaralých tabulek do novějšího layout modelu. Radikální přepis html struktury vyžadoval i úpravu logiky, která byla v dnes již zastaralém CoffeScriptu a jQuery. Jako nové řešení jsme vybrali TypeScript a React, což jsou moderní technologie s dobrou pověstí. Porovnávali jsme několik řešení, ale React skvěle vyhovoval našim potřebám. Jeho plusem je i to, že ho mají vývojáři obecně rádi, což se hodí při náboru.

Celý projekt přepisování a překlopení do responzivního designu odstartoval v září roku 2018. Jednoduché komponenty, jako je hlavička, meníčka a patička, jsme předesignovali relativně rychle.

S přepisem hlavního obsahu do Reactu, kde se čekalo i na novou logiku, to bylo obtížnější a časově náročnější, ale nakonec jsme si poradili. Nutno dodat, že i když jsme už tak měli spoustu práce, považovali jsme za nezbytné, aby byla nová verze běžící na Reactu stejně rychlá jako ta stará. Ideálně rychlejší. A to se nám také povedlo.

Responzivní design jsme jako pilotní test nasadili českým uživatelům. Pozitivní bylo, že tuhle změnu neprovázely žádné výrazně nesouhlasné reakce, lidé ji přijali dobře. To jsme si částečně pojistili možností responzivní design vypnout. V základním nastavení jej ale máme zapnutý, což by naopak noví uživatelé mohli ocenit.

Během září se nám povedlo spustit responzivní design i v dalších zemích a na největších webech jako je FlashScore.com. Úspěšně jsme tak dokončili druhou fázi frontendových modernizací.

Optimalizace výkonu stránky

Třetí fáze frontendových modernizací se soustředí na rychlost webu a vše co s ní souvisí. Optimalizace výkonu stránky je mnohovrstvý problém, se kterým není správný vývojář nikdy zcela spokojen a vždy vidí možnosti zlepšení. Rychlost stránky a načítání dat je přitom klíčová pro spokojenost uživatelů, kteří chtějí mít všechno okamžitě. Naší snahou je, aby se stránky našich webů načítaly co nejrychleji a byly i datově úsporné.

Optimalizaci rychlosti načítání stránek řešíme na několika frontách. Drobíme CSS a JS na menší kusy, javascripty voláme asynchronně, aby neblokovaly vykreslování stránky, lepší kompresi i cachování obrázků a dalších zdrojů řešíme pomocí webpacku.

Náš web je z pohledu obrázků opět velmi specifický, protože nemáme žádné velké, ale obrovské množství malých obrázků — týmová loga, vlajky a podobně. V případě ikonek jsme v drtivé většině přešli na vektorový formát SVG, který je zároveň velmi úsporný a ostrý i na displejích s velmi vysokým rozlišením.

Rychlost počátku prvotního vykreslení před a po nasazení několika optimalizací.

Vzhledem k tomu, že už na webu podporujeme HTTP/2, odpadl nám problém s pomalým načítáním většího množství menších souborů (včetně obrázků). S HTTP/1 bylo omezení na paralelní stahování maximálně pro několik souborů, ale s HTTP/2 už se stahují paralelně všechny.

Pro další optimalizaci slouží například moderní layout modely — FlexBox a Grid, které hodně šetří html a CSS kód. Oblíbili jsme si hlavně CSSGrid, v němž máme naše Live Tabulky a možná do něj postupně přepíšeme celý web.

Hlavní obsah přepsaný do gridu.

Je to jedna z věcí, které nám pomáhají udržovat menší CSS, ale samozřejmě se stává, že některé změny musíme dělat ručně podle citu, abychom v projektu neměli moc overridů a jak interně říkáme také “spam atributů”.

Obecně se snažíme vyhledávat a aplikovat moderní a kvalitní technologie, které nám pomáhají dělat produkt lepší pro uživatele i pro nás vývojáře. Modernizacemi se pokoušíme přehodit výhybku a místo dohánění technologických dluhů se chceme dostat na frontendový top. Někdy to ale znamená, že je potřeba se s něčím rozloučit.

Konec se starými prohlížeči

To byl případ starých prohlížečů, které nás neúměrně zatěžovaly. Trávili jsme příliš mnoho času laděním kódu pro velmi malý počet uživatelů, kteří si z nějakého důvodu nenainstalovali novou verzi browseru. Kvůli tomu váznul vývoj nových funkcí, což nás štvalo, a proto jsme začali ukončovat podporu prohlížečů s podílem pod 1 procento. Nakonec jsme odřízli i IE 11.

Ukončení podpory jsme ale samozřejmě včas komunikovali uživatelům, kterým jsme nabídli alternativu jiných prohlížečů s tím, že některé věci už do budoucna na starších prohlížečích zkrátka nemusí fungovat. Díky tomuto kroku se naopak můžeme více soustředit na nejpoužívanější prohlížeče s cílem, aby se na nich obsah vykresloval co nejlépe.

U nových internetových prohlížečů už se nesetkáváme s většími problémy, spíše se jedná o maličkosti, které je někdy nutné doladit. Tak to ale asi bude kvůli rozdílnosti nastavení prohlížečů a jejich funkcí vždy.

Bez vzdělávání a experimentů to nejde

Snažíme se udržovat stabilní tým kodérů, kteří se starají, aby všechna data měla pěknou formu a aby byl uživatelský komfort na všech zařízeních stejný.

V týmu nás je 9 vývojářů a tempo máme nastavené na dvoutýdenní sprinty. Kromě běžně naplánovaných úkolů si najdeme prostor i pro sebevzdělávání a různé experimenty, do kterých je tu a tam třeba zainvestovat čas, jinak bychom se nemohli výrazně posouvat. Přesto, že se jedná o náročnou práci, umíme si udělat příjemnou atmosféru.

Celý projekt funguje už dlouhých 11 let a skládá se ze spousty technologií. Už to samo o sobě přináší každý den spoustu výzev, na které se snažíme reagovat a nedovolit, aby zastarával.

Kompletní modernizace frontendu tak velkého projektu je pochopitelně velký úkol, výzva a běh na dlouhou trať, ale výsledkem bude produkt s moderními komponenty udržitelný v čase.


Zaujalo tě, co v Livesportu děláme? Přidej se k nám!

Livesport Dev

Od vývojářů pro vývojáře.

Livesport

Written by

Livesport

Livesport Dev

Od vývojářů pro vývojáře.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade