Čistý kód v JavaScriptu: praktický průvodce pro každodenní vývoj

Vyvarujte se také hlubokému vnořování. Pokud máte tři úrovně if-else nebo for smyček, je to signál k refaktoringu. Použijte early return: místo if (condition) { … } else { … } napište if (!condition) return; a pokračujte rovnou. Tím se snižuje mentální zátěž a kód je lineárnější. Stejně tak se vyhněte opakování – pokud se nějaká logika vyskytuje na více místech, vytáhněte ji do sdílené funkce.

Poslední rada: nevěřte tomu, že nejlepší IDE je to, které používá váš kolega. Každý má jiné zvyky a jiné požadavky. Dejte si čas a pravidelně přehodnocujte, zda vám nástroj stále vyhovuje. Až budete zkušenější, můžete přejít na minimalistický editor s rozšířeními, který je rychlejší a přehlednější. Důležité je, aby vám prostředí pomáhalo, ne aby vám překáželo. Teprve pak budete psát kód efektivně a s radostí.

Na závěr si uvědomte, že dokumentace API je investice, která se vrací. Kvalitní dokumentace zkracuje dobu integrace, snižuje počet chyb a usnadňuje předávání projektu novým členům týmu. Není to jednorázová práce, ale kontinuální proces. Vyhraďte si čas na její údržbu a zahrňte ji do definice hotové práce. Pokud backend dodá dokumentaci, která je neúplná nebo matoucí, frontend stejně skončí u experimentování s nástroji na testování API – a to je ztráta času pro všechny. Důsledný přístup k dokumentaci se vyplatí.

Základním krokem je správná komprese obrázků. Používejte moderní formáty jako WebP nebo AVIF, které mají výrazně menší objem než běžné JPEG či PNG. Pro fotografie zvolte kompresi s rozumným poměrem kvality a velikosti, u grafiky a ikon zase zvažte SVG. Nezapomínejte na atributy šířky a výšky, abyste předešli posunům rozložení při načítání. Pokud máte na stránce hodně fotek, zaveďte tzv. líné načítání, tedy načítání až ve chvíli, kdy se k obrázku uživatel posune.

Jak na cache a minimalizaci souborů Dalším krokem je nastavení vyrovnávací paměti prohlížeče (cache). Umožníte tím návštěvníkům, aby se jim při opakované návštěvě nemusely stahovat všechny soubory znovu. Pro statické soubory, jako jsou obrázky, CSS nebo JavaScript, nastavte dlouhou dobu platnosti, ale u HTML buďte opatrní, aby se změny na stránce projevily včas. K tomu slouží verzování souborů, kdy do názvu přidáte číslo verze nebo hash, a prohlížeč pak pozná, že je třeba stáhnout novou verzi.

Pomalé načítání stránek odrazuje návštěvníky a zhoršuje pozici ve vyhledávačích. Než začnete přidávat cache nebo komprimovat obrázky, zjistěte si, kde je skutečný problém. Otevřete si vývojářské nástroje prohlížeče, přejděte na záložku síť a podívejte se, které soubory se načítají nejdéle. Často to nejsou obrázky, ale zbytečné skripty třetích stran, které blokují vykreslení stránky. Nejprve odstraňte vše, co nepoužíváte, a teprve poté řešte optimalizaci.

Na závěr si změřte výsledek. Použijte nástroje pro analýzu rychlosti, které najdete přímo v prohlížeči, a porovnejte metriky před a po optimalizaci. Sledujte hlavně dobu načtení klíčových souborů, velikost stránky a počet požadavků. Nezůstávejte jen u jedné změny – optimalizace je opakovaný proces. Pravidelně kontrolujte, jestli se nepřidaly nějaké nové skripty nebo obrázky, které zbytečně zpomalují. Takto udržíte web svižný pro všechny uživatele.

Komentáře používejte střídmě. Dobrý kód se komentuje sám, pokud jsou názvy výstižné a logika přehledná. Komentář by měl vysvětlovat „proč", ne „co". Například „provedeme kontrolu, protože starší prohlížeče nepodporují fetch" je užitečné, ale „přičteme 1" není. Pokud zjistíte, že potřebujete komentář k objasnění složitého výrazu, raději výraz rozdělte do proměnných s názvy, které popisují jednotlivé kroky.

Rozdělte kód na malé, jednoúčelové funkce Funkce by měla mít jednu odpovědnost. Ideální délka je do dvaceti řádků, ale jde spíš o to, aby se dala pochopit na první přečtení. Typická chyba začátečníků je psát dlouhé funkce, které validují vstup, mění stav a renderují UI. Místo toho rozdělte logiku do samostatných funkcí s jasnými vstupy a výstupy. Například funkce pro výpočet ceny by neměla zároveň ukládat data do localStorage.

Verzování a změny: jak dokumentaci udržet živou REST API se vyvíjí, a proto je nutné dokumentaci verzovat. Kořte se vždy k verzi API, kterou používáte, a při změnách jasně označte, co je nové, co je změněné a co je odstraněné. Zavedte pravidlo, že každá změna v kódu backendu, která ovlivní rozhraní, musí mít odpovídající změnu v dokumentaci – jinak dokumentace rychle zastará a stane se nepoužitelnou. Užitečné je uvádět i datum poslední aktualizace a možnost porovnat verze. Typickým problémem je, že dokumentace popisuje staré endpointy, které už nefungují, nebo naopak neobsahuje nově přidané funkce. Proto dokumentaci pravidelně kontrolujte a testujte – ideálně přímo z dokumentace.