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

Dalším krokem je vytvoření generických pomocníků – takzvaných action creatorů a reducerů, které se starají o všechny asynchronní akce univerzálně. Místo psaní desítek podobných případů pro každou API volání si definujete jeden generický typ akce s parametry jako requestName a payload. Reducer pak na základě requestName aktualizuje odpovídající část stavu. Tím eliminujete duplicitu a snižujete riziko chyb při ručním přepisování.

Když máte první funkční skript, nezapomeňte na ošetření chyb. Automatizace běží často bez dozoru, takže pokud nastane neočekávaná situace — chybějící soubor, špatná struktura dat, výpadek připojení — váš program by se měl chovat předvídatelně. Zabalte rizikové části kódu do bloků pro zachycení výjimek a do souboru zapisujte zprávy o běhu, abyste později věděli, co se stalo a proč. Tato praxe vám ušetří hodiny ladění. Až budete mít skript odladěný, naplánujte jeho pravidelné spouštění pomocí nástrojů operačního systému, a máte hotovou skutečnou automatizaci, která běží bez vaší účasti.

Nejčastější chyby a jak se jim vyhnout Začátečníci často dělají stejné chyby. První z nich je, že rovnou vytvoří velký pull request bez předchozí konzultace. Místo toho udělejte malou změnu a pošlete ji jako návrh. Než začnete psát kód, podívejte se na existující issue a komentáře – možná se na problému už někdo pracuje. Druhá častá chyba je ignorování testů. Pokud projekt používá automatizované testy, spusťte je před odevzdáním a ujistěte se, že vaše změna nic nerozbila. Třetí problém spočívá v nedostatečné komunikaci – když na něčem pracujete, dejte o tom vědět. Přispěvatelé, kteří náhle zmizí na několik týdnů, způsobují chaos. Stačí krátká zpráva: „Pracuji na tom, ale mám problém s X."

Na závěr si osvojte pravidlo: Grid pro makro, Flexbox pro mikro. Když řešíte celou stránku, sáhněte po Gridu. Když řešíte zarovnání pár prvků v řadě, použijte Flexbox. Kombinací obou technik dosáhnete responzivního designu, který se snadno čte a přizpůsobuje. Testujte v prohlížeči na různých šířkách, používejte DevTools pro ladění a hlavně se nebojte experimentovat – obě metody mají bohatou dokumentaci a příkladů najdete dost.

Další praktické hledisko je verzování API. REST obvykle řeší změny pomocí verzí v URL (např. /v2/…), což je jednoduché a zpětně kompatibilní. GraphQL tuto potřebu částečně odbourává, protože klient si říká o konkrétní pole a vy můžete přidávat nová, aniž byste stará odebrali. To je výhoda při rychlém vývoji, ale vyžaduje to disciplínu – pokud začnete odebírat pole, starší klienti se okamžitě rozpadnou. Vždy mějte jasnou politiku pro deprecation a sledujte, které klienti jaká pole používají.

Volba mezi REST API a GraphQL není otázkou módy, ale praktických potřeb. Obě technologie řeší komunikaci mezi klientem a serverem, ale každá jiným způsobem. REST staví na zdrojích a HTTP metodách, GraphQL na dotazech, které si klient definuje sám. Než se rozhodnete, zvažte, jaká data vaše aplikace skutečně potřebuje a jakým způsobem je bude konzumovat.

Přispívání do open source projektů není jen o psaní kódu. Mnoho lidí si myslí, že musí být zkušený programátor, aby mohl pomoci. Opak je pravdou – projekty potřebují dokumentaci, testování, překlady, návrhy uživatelského rozhraní nebo správu komunit. Pokud chcete začít, prvním krokem je vybrat si projekt, který reálně používáte nebo který vás zaujme. Prohlédněte si jeho repozitář a zjistěte, jaká je struktura souborů, kde jsou diskuze a jakým způsobem se řeší úkoly. Většina zavedených projektů má v popisu sekci s pokyny pro přispěvatele – to je základní dokument, který byste měli přečíst dřív, než cokoliv uděláte.

Redukce stavu na tři základní hodnoty Základní trik spočívá v tom, že nestavíte stav jako sbírku volných proměnných, ale jako objekt s jasnou strukturou. Místo abyste měli loading, error a data zvlášť, vytvořte si jeden objekt, který tyto tři stavy sdružuje. Takový objekt pak můžete snadno serializovat, testovat a předávat komponentám. Typicky vypadá jako 'success' . Tím se reducer zjednoduší na přepínač, který mění pouze tyto tři hodnoty.

Začněte s Gridem pro hlavní layout. Definujte si mřížku pomocí grid-template-columns a grid-template-areas. Například pro klasickou stránku s hlavičkou, obsahem, sidebar a patičkou nastavíte tři sloupce – 1fr 2fr 1fr – a na mobilu je pomocí media query přepnete na jeden sloupec. Nezapomeňte, že Grid umí i implicitní řádky, takže nemusíte psát grid-template-rows, pokud nepotřebujete přesně řídit výšky. Tím ušetříte spoustu řádků CSS.