Jak zjednodušit stav v Reduxu při práci s async akcemi
Ladění JavaScriptu v prohlížeči je každodenní chlebíček každého frontend vývojáře. Přestože se to může zdát jako triviální záležitost, správné používání nástrojů pro vývojáře vám ušetří hodiny hledání chyb. Moderní prohlížeče nabízejí nepřeberné množství funkcí, které přesahují pouhé vypisování hodnot do konzole. Pokud se naučíte efektivně využívat breakpointy, watch expressions a další pokročilé nástroje, stanete se výrazně produktivnější.<br>
<br>
<br>
<br>
Dalším důležitým měřítkem je pokrytí funkcí nebo metod. To vám řekne, kolik veřejných metod bylo voláno. Užitečné je také sledovat pokrytí změn v rámci pull requestů, nikoli jen celkové číslo. Zaměřte se na to, zda nově přidaný kód má testy, a ne na to, jestli celkový projekt dosahuje 80 %. Tímto způsobem odhalíte netestované části hned v začátku, kdy je oprava levnější.<br>
<br>
<br>
<br>
Častým problémem, na který narazíte, je asynchronní kód. Promise a async/await se chovají jinak než běžné funkce. Když nastavíte breakpoint uvnitř asynchronní funkce, mějte na paměti, že zásobník volání nemusí odpovídat tomu, co byste čekali v době, kdy se kód spustil. V takových případech pomáhá použít breakpoint přímo na řádku s await nebo využít funkci pro zpracování promise rejection v konzoli. Nikdy neignorujte červené chybové hlášky v konzoli – kliknutím na ně se dostanete přímo na místo v kódu, kde chyba vznikla.<br>
<br>
<br>
<br>
Klíčové je sledovat pokrytí v kontextu rizik a složitosti. Použijte metriky jako cyklomatickou složitost k identifikaci nejkritičtějších metod a pro ně nastavte přísnější požadavky na pokrytí. Pro jednoduché části kódu si vystačíte s nižším číslem. Místo celkového procenta si definujte pravidla: nový kód musí mít alespoň 80% pokrytí větví, ale starší kritické části musí mít 100 % pro klíčové scénáře. Když testy začnou bránit refaktorování nebo vývoji nových funkcí, protože se neustále upravují kvůli překročení limitu, je to známka, že jste za hranicí užitečnosti.<br>
<br>
<br>
<br>
Pozor si dejte také na počet požadavků na server. Každý soubor, který se stahuje, vytváří samostatný požadavek, a to i v případě, že je malý. Spojte více CSS souborů do jednoho, a pokud je to možné, slučte i malé obrázky do tzv. sprite nebo je nahraďte ikonovým fontem. Naopak velké soubory, které se používají jen na některých stránkách, rozdělte tak, aby se nenačítaly všude. Nezapomeňte také na rychlost serveru – sdílený hosting může být limitující, ale i tam jde omezit zátěž pomocí statické generace stránek.<br>
<br>
<br>
<br>
Pokročilé techniky, které vám ušetří čas Kromě klasických breakpointů vyzkoušejte podmíněné breakpointy – stačí kliknout pravým tlačítkem na číslo řádku a zvolit možnost přidat podmínku. Breakpoint se pak aktivuje pouze tehdy, když je splněna vámi zadaná podmínka, například když proměnná dosáhne určité hodnoty. To je neocenitelné při ladění cyklů nebo častých funkcí. Dalším užitečným nástrojem je watch expression – v panelu Watch si můžete přidat libovolný výraz, jehož hodnota se průběžně aktualizuje při každém kroku. Tím sledujete klíčové hodnoty bez nutnosti vypisovat je do konzole.<br>
<br>
<br>
<br>
Při práci s asynchronními akcemi se často zapomíná na správu tzv. race conditions. Když uživatel spustí více požadavků najednou, může se stát, že starší odpověď dorazí později a přepíše novější data. Řešením je použití identifikátoru požadavku, který si uložíte do stavu. Při příchodu odpovědi porovnáte, zda se ještě jedná o aktuální požadavek, a pokud ne, stav nezměníte. Tento trik je jednoduchý, ale ušetří vám spoustu záhadných chyb, které se obtížně reprodukují.<br>
<br>
<br>
<br>
Pomalý web odrazuje návštěvníky i vyhledávače. Než začnete investovat do drahých nástrojů, zaměřte se na základy. Klíčem je měřit, optimalizovat a znovu měřit. Nejprve si otevřete nástroj pro vývojáře přímo v prohlížeči a podívejte se na čas načítání jednotlivých souborů. Často zjistíte, že největší zpoždění způsobují obrázky ve špatném formátu nebo příliš mnoho skriptů třetích stran.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
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.