Retrospektiva, která konečně posune tým kupředu - Versionsgeschichte

CynthiaSloan56 am 21. August 2026 um 21:40 Uhr

2026-08-21T21:40:33Z

TamelaRoper6796: Die Seite wurde neu angelegt: „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ě…“

2026-08-21T21:37:41Z

Die Seite wurde neu angelegt: „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ě…“

Neue Seite

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. Ladění asynchronního kódu a práce s proměnnými Asynchronní JavaScript (callbacks, Promise, async/await) je častým zdrojem chyb, protože kód se nevykonává lineárně. V panelu Sources využijte tlačítko „Step into next function call" – umožní vám vstoupit i do asynchronních operací. Vždy si ověřte, zda máte v nástrojích zapnutou volbu „Pause on caught exceptions" (Pozastavit u zachycených výjimek). Tato funkce vás upozorní na chyby, které by jinak byly tiše polknuty blokem try…catch. Mnoho vývojářů tuto volbu přehlédne a poté marně hledá příčinu, proč se kód chová jinak, než očekávají. Když se kód zastaví na breakpointu, můžete v konzoli přímo psát výrazy a zjišťovat tak aktuální hodnoty – stačí do konzole napsat název proměnné nebo zavolat funkci. Tímto způsobem můžete měnit obsah proměnných za běhu, což je užitečné pro testování okrajových případů. Například pokud funkce selhává na prázdném poli, vložte do konzole seznam = [] a pokračujte v krokování. Tento postup je rychlejší než opakované načítání stránky a zadávání nových vstupů. Při ladění se vyvarujte časté chyby – spoléhání na console.log v produkčním kódu. Nejenže to zahlcuje konzoli, ale může to také ovlivnit výkon aplikace. Místo toho používejte breakpointy a pokud potřebujete dočasné výpisy, vždy je po opravě odstraňte. Dále si zvykněte na to, že prohlížeče často rozdělují chyby do dvou kategorií: syntaktické (např. chybějící závorka) a běhové (např. volání nedefinované funkce). Syntaktické chyby se zobrazí hned při načtení skriptu, běhové až při spuštění dané části kódu. Vždy čtěte celý text chyby – obsahuje název souboru a číslo řádku, což je první stopa k nalezení problému. Nezapomínejte na devtools. Redux DevTools je nezbytný nástroj pro ladění. Umožňuje vám cestovat v čase a vidět, jak se stav mění s každou akcí. Ale pozor, v produkci byste měli devtools úplně vypnout, jinak přidáváte aplikaci zbytečnou režii. V produkci můžete také použít middleware pro logování, ale ujistěte se, že nezpomalují aplikaci. Místo toho je lepší mít nástroje, které se zapnou pouze v development módu. Další častou chybou je zapomínat na limit počtu požadavků. Mnoho API má omezení, jak často je můžete volat; pokud je překročíte, dostanete dočasně zablokovaný přístup. Naučte se zpracovávat chybové stavy v kódu – měli byste vždy počítat s tím, že server nemusí odpovědět tak, jak čekáte. Napište si malý skript, který odešle jeden požadavek a vypíše stavový kód a tělo odpovědi. Tím získáte jistotu, že umíte data nejen poslat, ale i přijmout. Prvním krokem k efektivnímu použití je správné členění store. Rozdělte si Redux store na menší slice, každý s vlastními reducery a akcemí. Například oddělte data uživatele, obsah košíku a stav notifikací. Tím zajistíte lepší čitelnost a snazší testování. Vyhněte se obřím reducertům, které řeší všechno. Místo toho použijte funkci combineReducers a každý slice nechte žít samostatně. Tím se vyhnete častému problému, kdy jedna chyba v jednom místě rozbije celou aplikaci. Přispívání do open source projektů není jen o psaní kódu. Začít může kdokoli – s dokumentací, testováním, designem nebo i překlady. Důležité je vědět, kde a jak začít, a hlavně se vyhnout typickým chybám, které odradí nejen vás, ale i správce projektu. Následující kroky vám pomohou zapojit se bez zbytečného stresu. Častým omylem je také synchronizace všech akcí s API. Redux není určen k tomu, aby každý požadavek na server generoval akce a reducery. Pro asynchronní logiku je vhodnější použít middleware jako thunk nebo saga. Thunk je jednodušší, saga dává více kontroly. U thunku si dejte pozor na to, aby akce neobsahovaly příliš mnoho logiky. Rozdělte je na menší kroky: začátek požadavku, úspěch, selhání. Tím získáte přehled o tom, co se děje, a můžete snadno přidat loading stavy. 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.

← Nächstältere Version		Version vom 21. August 2026, 21:40 Uhr
Zeile 1:		Zeile 1:
−	~~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~~.<br><br>Ladění asynchronního kódu a práce s proměnnými Asynchronní JavaScript (callbacks, Promise, async/await) je častým zdrojem chyb, protože kód se nevykonává lineárně. V panelu Sources využijte tlačítko „Step into next function call" – umožní vám vstoupit i do asynchronních operací. Vždy si ověřte, zda máte v nástrojích zapnutou volbu „Pause on caught exceptions" (Pozastavit u zachycených výjimek). Tato funkce vás upozorní na chyby, které by jinak byly tiše polknuty blokem try…catch. Mnoho vývojářů tuto volbu přehlédne a poté marně hledá příčinu, proč se kód chová jinak, než očekávají.<br><br>~~Když~~ se ~~kód zastaví~~ na ~~breakpointu~~, ~~můžete v konzoli přímo psát výrazy a zjišťovat tak aktuální hodnoty – stačí do konzole napsat název proměnné~~ nebo ~~zavolat funkci~~. ~~Tímto způsobem můžete měnit obsah proměnných za běhu~~, ~~což je užitečné pro testování okrajových případů~~. ~~Například pokud funkce selhává na prázdném poli~~, ~~vložte do konzole seznam = []~~ a ~~pokračujte v krokování. Tento postup~~ je ~~rychlejší~~ než ~~opakované načítání stránky a zadávání nových vstupů~~.<br><br>~~Při ladění~~ se ~~vyvarujte časté chyby – spoléhání~~ na ~~console~~.~~log v produkčním kódu~~. ~~Nejenže to zahlcuje konzoli~~, ~~ale může to také ovlivnit výkon aplikace~~. ~~Místo toho používejte breakpointy a pokud potřebujete dočasné výpisy~~, ~~vždy je po opravě odstraňte~~. ~~Dále si zvykněte~~ na to, že ~~prohlížeče často rozdělují chyby do dvou kategorií: syntaktické (např. chybějící závorka) a běhové~~ (např. volání ~~nedefinované~~ funkce)~~. Syntaktické chyby se zobrazí hned při načtení skriptu~~, ~~běhové až při spuštění dané části kódu. Vždy čtěte celý text chyby – obsahuje název souboru a číslo řádku, což je první stopa k nalezení problému~~.<br><br>~~Nezapomínejte na devtools~~. ~~Redux DevTools je nezbytný nástroj~~ pro ~~ladění~~. ~~Umožňuje vám cestovat v čase a vidět~~, ~~jak se stav mění s každou akcí~~. ~~Ale pozor~~, ~~v produkci byste měli devtools úplně vypnout, jinak přidáváte aplikaci zbytečnou režii~~. ~~V produkci můžete~~ také ~~použít middleware pro logování~~, ~~ale ujistěte~~ se, že ~~nezpomalují aplikaci. Místo toho~~ je ~~lepší mít nástroje~~, ~~které~~ se ~~zapnou pouze v development módu~~.<br><br>~~Další častou chybou je zapomínat na limit počtu požadavků~~. ~~Mnoho API má omezení~~, ~~jak často je můžete volat; pokud je překročíte~~, ~~dostanete dočasně zablokovaný přístup~~. ~~Naučte se zpracovávat chybové stavy v kódu – měli byste vždy počítat s tím~~, ~~že server nemusí odpovědět tak, jak čekáte~~. ~~Napište si malý skript, který odešle jeden požadavek~~ a ~~vypíše stavový kód a tělo odpovědi~~. ~~Tím získáte jistotu~~, ~~že umíte data nejen poslat~~, ~~ale i přijmout~~.<br><br>~~Prvním krokem k efektivnímu použití je správné členění store. Rozdělte si Redux store~~ na ~~menší slice, každý s vlastními reducery~~ a ~~akcemí~~. ~~Například oddělte data uživatele~~, ~~obsah košíku~~ a ~~stav notifikací~~. ~~Tím zajistíte lepší čitelnost~~ a ~~snazší testování~~. ~~Vyhněte se obřím reducertům~~, ~~které řeší všechno. Místo toho použijte funkci combineReducers~~ a ~~každý slice nechte žít samostatně~~. ~~Tím se vyhnete častému problému~~, ~~kdy jedna chyba v jednom místě rozbije celou aplikaci~~.<br><br>~~Přispívání do open source projektů není jen o psaní kódu. Začít může kdokoli – s dokumentací~~, ~~testováním~~, ~~designem nebo i překlady~~. ~~Důležité je vědět~~, ~~kde a jak začít, a hlavně~~ se ~~vyhnout typickým chybám, které odradí nejen vás~~, ale ~~i správce projektu~~. ~~Následující kroky vám pomohou zapojit se bez zbytečného stresu.<br><br>Častým omylem~~ je ~~také synchronizace všech akcí s API~~. ~~Redux není určen k tomu~~, ~~aby každý požadavek na server generoval akce~~ a ~~reducery~~. ~~Pro asynchronní logiku~~ je ~~vhodnější použít middleware jako thunk nebo saga. Thunk je jednodušší, saga dává více kontroly. U thunku si dejte pozor na~~ to~~, aby akce neobsahovaly příliš mnoho logiky~~. ~~Rozdělte~~ je ~~na menší kroky: začátek požadavku, úspěch, selhání. Tím získáte přehled o tom, co se děje~~, a ~~můžete snadno přidat loading stavy~~.<br><br>~~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~~.	+	Prakticky si osvojte práci s mezerami. Větší prostor mezi prvky snižuje chybovost a usnadňuje orientaci. Stejně důležité je správné zarovnání – texty a prvky by měly mít jednotný rytmus. Používejte mřížku (grid), i když ji nakonec nezobrazíte. Když máte hotový prototyp, otestujte si ho sami, ale hlavně pozorujte reálné uživatele. Není třeba velké testovací studio – stačí, když požádáte kolegu, aby splnil jednoduchý úkol, a sledujte, kde váhá nebo kliká špatně. Z toho získáte cenné informace pro další iterace.<br><br>Ladění asynchronního kódu a práce s proměnnými Asynchronní JavaScript (callbacks, Promise, async/await) je častým zdrojem chyb, protože kód se nevykonává lineárně. V panelu Sources využijte tlačítko „Step into next function call" – umožní vám vstoupit i do asynchronních operací. Vždy si ověřte, zda máte v nástrojích zapnutou volbu „Pause on caught exceptions" (Pozastavit u zachycených výjimek). Tato funkce vás upozorní na chyby, které by jinak byly tiše polknuty blokem try…catch. Mnoho vývojářů tuto volbu přehlédne a poté marně hledá příčinu, proč se kód chová jinak, než očekávají.<br><br>Kdy NoSQL nepoužívat a jaké chyby se vyvarovat Naopak, pokud potřebujete provádět složité transakce, kde je nutné zajistit, aby se buď provedly všechny operace, nebo žádná, zůstaňte u relační databáze. Typickým příkladem je bankovní převod – odeslání peněz a připsání na účet musí proběhnout atomicky. Většina NoSQL systémů podporuje transakce jen omezeně, nebo jen na úrovni jednoho záznamu. Dalším případem, kdy se NoSQL nehodí, jsou dotazy nad více tabulkami, které vyžadují časté spojování (JOIN). I když některé NoSQL databáze tento problém řeší, výkonnostně a vývojově je to složitější než v SQL.<br><br>Dalším užitečným nástrojem je podmíněný breakpoint. Pokud se chyba projevuje pouze při určité hodnotě proměnné (např. když je user.id rovno 42), klikněte pravým tlačítkem na číslo řádku a vyberte „Add conditional breakpoint". Do pole zadejte podmínku – výraz, který se vyhodnotí jako pravda nebo nepravda. Prohlížeč pak zastaví běh pouze tehdy, když je podmínka splněna. Ušetříte tím spoustu času, protože nemusíte procházet tisíce průchodů smyčkou. Pozor ale na to, že podmínka se vyhodnocuje při každém průchodu – pokud obsahuje vedlejší efekt (např. volání funkce), může ovlivnit běh programu.<br><br>Na závěr si ověřte, že váš terminál a debugger odpovídají aktuálnímu jazyku. V IDE nastavte pro každý adresář jiný run configuration. Ujistěte se, že při spuštění testů používáte správný framework (např. pytest pro Python, Jest pro JavaScript). Dobré je také zapnout „spy" – funkci, která ukazuje, jaký příkaz se spouští na pozadí. Pokud vidíte, že se volá špatný interpret, je to první signál, že máte ve struktuře projektu chybu. Po takovém nastavení se práce s více jazyky stane intuitivní a nebudete ztrácet čas laděním prostředí.<br><br>Začněte u informační architektury. Než napíšete první řádek kódu, promyslete si, co uživatel na obrazovce hledá a v jakém pořadí. Umístěte nejdůležitější akce na viditelná místa, obvykle do pravé části nebo na konec formuláře. Dbejte na konzistenci – stejné tlačítko by mělo vypadat a chovat se stejně na všech stránkách. Pokud máte více typů akcí, rozlište je vizuálně: primární tlačítko výrazné, sekundární méně nápadné, destruktivní (např. smazání) odlište barvou nebo umístěním.<br><br>Když jako vývojář dostanete za úkol vytvořit rozhraní, často se soustředíte na funkčnost a logiku. Uživatel ale vnímá hlavně to, co vidí a jak se mu s aplikací pracuje. UI (user interface) a UX (user experience) nejsou jen záležitostí designérů. I vy můžete výrazně ovlivnit, jestli bude výsledek použitelný a příjemný. Základem je pochopit, že design není dekorace, ale nástroj, který vede uživatele k cíli.<br><br>Nejčastější chyby, které zabíjejí retrospektivu Největší chybou je skákat rovnou k řešením, aniž by tým pochopil kořen problému. Pokud se opakuje stejné zpoždění, neptejte se „jak to opravíme", ale „proč k tomu dochází" – použijte techniku 5x proč. Druhou častou chybou je absence akčních kroků. Každá retrospektiva musí skončit maximálně třemi konkrétními úkoly, které mají vlastníka a termín. Bez toho je to jen ztráta času. Třetí chybou je, že retrospektiva trvá déle než 45 minut – tým ztratí pozornost a kvalita výstupů klesá.<br><br>Jak se vyhnout nejčastějším chybám v UI Při kódování rozhraní se zaměřte na detaily, které uživatele nejvíce iritují. Typickou chybou je ignorování stavů – tlačítko musí jasně signalizovat, že je zakliknuté, hover efekt by měl být srozumitelný a formulář má uživatele upozornit na chybu hned, ne až po odeslání. Dalším častým problémem je přetížení obrazovky. Méně je někdy více; pokud můžete, schovejte pokročilé funkce do rozbalovacích menu. Věnujte pozornost i prázdným stavům – když uživatel nemá data, ukažte mu, co má dělat dál, místo prázdné stránky.