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.

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.

Nejprve si zmapujte, jak u vás dnes probíhá nasazování kódu. Sedněte si s vývojáři i provozem a zjistěte, kde to skřípe. Překvapí vás, že většina problémů není technických, ale komunikačních. Zaveďte pravidelné schůzky, kde si obě strany řeknou, co potřebují. Důležité je, aby se vývojář nebál zeptat provozu na infrastrukturu a provoz zase rozuměl tomu, co kód dělá. Bez důvěry vám žádná technologie nepomůže.

Typické chyby, které vás stojí čas i výkon Největší výkonnostní pastí je zbytečné kopírování objektů při každé akci. Redux vyžaduje neměnnost, ale to neznamená, že musíte deep-clone celý stav. Pokud měníte pouze jednu vlastnost, použijte spread operátor na úrovni, kterou měníte. Vyhněte se také ukládání celých polí objektů do stavu, pokud je potřebujete jen přečíst. Místo toho si je nechte v paměti a do Reduxu ukládejte pouze identifikátory. Při mapování stavu do props vybírejte jen to, co komponenta potřebuje, a používejte selektory, které se zapojí do memoizace.

Pro nasazení na produkci vždy vyžadujte ruční schválení, pokud nejde o kritický projekt. To zařídíte pomocí environment s ochranou – GitHub nabízí možnost přidat schvalovatele, kteří musí build odsouhlasit. Tím předejdete situaci, kdy se automaticky nasadí chybná verze. Zároveň si nastavte retenci běhů a pravidelně kontrolujte logy, abyste měli přehled o tom, co se děje. S GitHub Actions můžete dosáhnout stabilní a transparentní automatizace, ale jen pokud konfiguraci pečlivě promyslíte a otestujete na bezpečné větvi.

Automatizace nasazení je jednou z prvních věcí, které byste měli ve svém projektu zavést, pokud chcete ušetřit čas a předejít chybám. GitHub Actions nabízí integrované řešení přímo v repozitáři, takže nemusíte provozovat žádný externí server. Pro menší týmy i středně velké projekty je to obvykle nejpraktičtější volba, protože konfigurace je deklarativní a veškerá historie běhů zůstává přehledně na jednom místě.

Pokrytí začíná být užitečné, když ho používáte k hledání děr v testech, ne jako cíl sám o sobě. Dobrý postup je analyzovat report po každém větším refaktoringu – pokud pokrytí kleslo, pravděpodobně jste změnili chování, které testy nekontrolovaly. Naopak pokud pokrytí roste, ale počet chyb se nesnižuje, je to známka, že testy nejsou kvalitní. Sledujte také pokrytí u nově přidaných částí kódu – to je nejcennější ukazatel, protože starý kód může mít vysoké pokrytí, ale už netestuje to podstatné.

DevOps není nástroj ani konkrétní technologie, ale způsob myšlení a spolupráce. Nejde o to, abyste se naučili pár příkazů, ale o to, abyste propojili vývoj, provoz a testování do jednoho plynulého toku. Jestli s DevOps začínáte, zapomeňte na velké projekty a začněte u malého týmu a jednoho konkrétního problému. Typická chyba je skočit rovnou na automatizaci všeho, aniž byste rozuměli, co vlastně má běžet a kdo za co odpovídá.

Když aplikace v Reactu začne mít desítky komponent a stav se předává přes mnoho úrovní, přichází čas zvážit centrální správu stavu. Redux není jediným řešením, ale stále patří mezi nejrozšířenější nástroje. Klíčové je pochopit, že Redux není o tom, abyste do něj uložili všechno. Měl by sloužit pro data, která skutečně potřebuje více komponent nebo která mění více akcemi. Lokální stav pro formuláře nebo UI prvky si klidně nechte v useState.

Základem každého testu je struktura AAA – Arrange, Act, Assert. V první fázi připravíte vstupní data, ve druhé zavoláte testovanou funkci a ve třetí porovnáte výsledek s očekáváním. Většina začátečníků dělá chybu, že všechny tři fáze smíchá dohromady. Test pak není čitelný a při jeho selhání nevíte, co se vlastně pokazilo. Držte se jednoduchého pravidla: jeden test = jedno chování. Pokud potřebujete ověřit pět věcí, napište pět testů.