Frontendové zvesti #3

Tentokrát som z môjho zoznamu prečítaných vecí vybral zosumarizovanie toho, ako fungujú spojené typy v TypeScript-e, ako v React-e naimplementovať návrhový vzor Strategy, ako urobiť globálny stav len pomocou hookov a nakoniec si dovolím malú predpoveď o tom, či nás čaká obdobie plné nových frameworkov pre React.

Spojené typy v TypeScript-e

Článok: https://claritydev.net/blog/typescript-union-types-guide

Alex Khomenko uverejnil 17. marca na svojom blogu článok, kde rýchlo, jasne a jednoducho vysvetľuje, čo sú a ako fungujú spojené typy (union types) v TypeScript-e. Alex ukazuje aj to, akými spôsobmi TypeScript-u pomôžete presnejšie určiť konkrétny typ (type narrowing) a uvidíte aj type guard funkciu, čo je veľmi užitočný konštrukt. Je to fajn čítanie nielen pre učenie sa, ale aj pre osvieženie vedomostí.

Pokiaľ sa učíte TypeScript, tak vám dám tip na celkom dobrú knižku. Napísal ju Josh Goldberg a volá sa Learning TypeScipt.

Návrhový vzor Strategy v React-e

Článok: https://dev.to/itswillt/applying-design-patterns-in-react-strategy-pattern-enn

Koncom marca sa na dev.to objavilo pokračovanie jedného článku o implementácii návrhového vzoru Strategy v React-e. Odporúčam si prečítať články pekne v poradí, najskôr prvý diel a potom ten druhý.

V prvej časti uvidíte implementáciu Strategy vzoru pomocou tried a v druhej pomocou niečoho, čomu ja hovorím mapovacie objekty. Mapovacie objekty sú fajn, pretože nielenže eliminujú Shotgun Surgery, ale zároveň nám otvárajú možnosti konfigurácie mimo kódu. Pozrite sa napríklad na kód Button.utils.ts z predposledného príkladu. Keby sme mali názvy fieldov a objekty definované mimo funkcie getButtonVariantMapping alebo objektu BUTTON_SIZE_STYLE_MAPPING, tak by sme ich vedeli vyskladať aj dynamicky.

Nie každá situácia a každý projekt však takúto možnosť potrebuje. Je to predsa len komplikácia a ďalšia abstrakcia navyše. Pokiaľ ju však v kóde máme, tak zrazu máme k dispozícii mechanizmus na vytváranie vysoko konfigurovateľných aplikácií.

Tu je približný náčrt, ako by to mohlo fungovať:

const allowedVariants = await loadFromConfiguration();

async function loadFromConfiguration(): Promise<ButtonVariant[]> {
    // tu načítame pole z databázy alebo súboru,
    // vyzerá napríklad takto:
    return ['contained', 'outlined', 'text'];
}

const getButtonVariantMapping = createButtonVariantMapping(allowedVariants);

function createButtonVariantMapping(allowedVariants: ButtonVariant[]) {
    return function getButtonVariantMapping(color: ButtonColor = 'primary') {
        const mapping = {};

        for (const variant of allowedVariants) {
            mapping[variant] = getAvailableButtonVariant(variant, color);
        }

        return mapping;
    };
}

// stále musíme mať miesto, kde sú definované všetky dostupné varianty
function getAvailableButtonVariant(variant: ButtonVariant, color: ButtonColor) {
    const allVariants = {
        contained: {
            backgroundColor: `${color}.main`,
            color: 'white',
            '&:hover': {
                backgroundColor: `${color}.dark`,
            },
        },
        outlined: {
            backgroundColor: 'transparent',
            color: `${color}.main`,
            border: '1px solid',
            borderColor: `${color}.main`,
            '&:hover': {
                backgroundColor: `${color}.light`,
            },
        },
        // tu budú všetky ostatné varianty
    };

    return allVariants[variant];
}

Ešte si dovolím jednu poslednú poznámku k článku. Pokiaľ sa v kóde snažíte dôsledne dodržiavať SOLID princípy a špeciálne Open-Closed, tak v kóde častokrát dôjdete k implementácii Strategy vzoru úplne prirodzene a možno ani nebudete vedieť, že to nejaký návrhový vzor je. SOLID princípy sú totiž naozaj základným stavebným kameňom dobrej architektúry a všetko ostatné len stavia na nich.

Globálny stav v React-e bez Redux-u a kontextu

Článok: https://yoavik.com/snippets/use-global-state

Narazil som na článok popisujúci celkom pekné riešenie, ako pomocou základných hookov (useState, useEffect a useSyncExternalStore) dosiahnuť, že v aplikácii budete mať globálny stav bez toho, aby ste použili externý store typu Redux alebo prípadne kontext. Môžete sa z článku inšpirovať pre svoje potreby, prípadne si len pozrieť toto elegantné riešenie.

Nové meta frameworky pre React

Zistil som, že vznikol nový meta framework Waku. On teda vznikol už v marci 2023, ale v širšom povedomí sa objavil až teraz. Možno sa mýlim, ale predpokladám, že o nových meta frameworkoch založených na React-e budeme v dohľadnej dobe počúvať viac. Jednak príchod React Server Components (RSC) vyslovene láka na to, aby si ich niektorí ľudia vyskúšali naimplementovať po svojom. Zároveň je nie každý spokojný so všetkými aspektami RSC a niektoré ich súčasti chcú robiť po svojom (napríklad namiesto Server Actions používať tRPC alebo niečo podobné). V neposlednom rade nesmieme podceniť ani nespokojnosť veľkej časti vývojárov s tým, ako v Next.js lámu doterajšie paradigmy a s niektorými vecami idú proti štandardom. Myslím si preto, že doba je zrelá a kopa šikovných ľudí už pracuje na vlastných frameworkoch.