Onze nieuwe hoofdnavigatie in React

Als je kijkt naar de applicatie waar je al vijf jaar aan hebt gewerkt, kun je waarschijnlijk duizenden ideeën bedenken over wat je nu anders zou doen. Dit is volkomen begrijpelijk, omdat nieuwe technologieën elkaar in hoog tempo opvolgen. Net wanneer je de ene technologie hebt geïmplementeerd, wordt er al een nieuwe en verbeterde technologie geïntroduceerd.

De hoofdnavigatie in Clientbox bestaat al sinds de lancering van de applicatie in deze vorm. Dit jaar kreeg ik de vraag om de navigatie opnieuw te bouwen op basis van de nieuwste technologieën. We hebben besloten daarvoor gebruik te maken van React, TypeScript en Storybook. In deze blog wil ik graag uitleggen welke voordelen deze technologieën bieden.

React

React is een JavaScript-framework om interfaces mee te bouwen op basis van componenten. In principe kun je in iedere programmeertaal en ieder framework werken met componenten, maar het voordeel van React is dat het doelbewust is geschreven om met componenten te werken en je in zekere zin daar ook toe dwingt. Nu de nieuwe hoofdnavigatie klaar is, hebben we ongeveer 15 verschillende componenten die allemaal gedocumenteerd en herbruikbaar zijn. Daarnaast is de code nu beter te onderhouden, omdat deze uit kleine stukjes code bestaat met elk hun eigen verantwoordelijkheid.

https://reactjs.org/

Voorbeeld van 1 van de componenten:

export const SidenavToggle = () => {
    const {toggleExpanded, isExpanded} = useSidenavContext();

    return (
        <button
            className={styles.sidenavToggle}
            onClick={useCallback(() => toggleExpanded(), [toggleExpanded])}
            type="button"
        >
            {isExpanded ? <Icons.ChevronLeftCentered /> : <Icons.ChevronRightCentered />}
        </button>
    );
};

TypeScript

TypeScript is een superset van JavaScript. Waar JavaScript relaxed omgaat met variabelentypen, wil TypeScript precies weten van welk type een variabele is. Dit geldt voor simpele typen als strings en numbers, maar zeker ook voor object- en arraystructuren. Welke variabelen in een object moeten er verplicht aanwezig zijn? Welke zijn optioneel? En van welk type zijn die variabelen dan weer? Samen met de TypeScript-ondersteuning in je IDE zorgt dit ervoor dat je al tijdens het ontwikkelen achter mogelijke fouten komt. Daarnaast weet je IDE precies wat er nodig is, waardoor autocompletion en code generation heel accuraat werken. In het begin had ik zelf best moeite om TypeScript volledig onder de knie te krijgen, maar het is het dubbel en dwars waard om hier tijd in te steken. De kans op fouten wordt kleiner en de kwaliteit en leesbaarheid van je code worden echt beter!

https://www.typescriptlang.org/

export interface SidenavFooterProps {
    children?: ReactNode;
    profileName: string;
    avatarUrl: string | null;
    userName: string;
}

export const SidenavFooter = ({profileName, userName, avatarUrl, children}: SidenavFooterProps) => {
// Component content
}

Storybook

Storybook zorgt er voor dat alle onze componenten overzichtelijk gedocumenteerd zijn. Met behulp van deze tool is het inzichtelijk welke componenten er allemaal zijn en welke input ze verwachten. Daarnaast is het zeer geschikt om componenten in te ontwikkelen buiten de applicatie waarvoor de componenten voor bedoeld zijn. Hierdoor kan er sneller ontwikkeld worden en kan je de componenten testen voordat ze daadwerkelijk gebruikt worden.

https://storybook.js.org/

Met deze 3 tools is het mogelijk om stabiele frontend componenten te ontwikkelen, waarbij we ook nog eens alle mogelijke situaties kunnen simuleren in Storybook.

Bas Everaarts

Technologie

Bellen

085 30 38 139

Mailen

info@vollan.nl

WhatsAppen

085 30 38 139

Bezoeken

Grevelingenstraat 10H 4301 XX Zierikzee