Utfordringen: Enterprise-standardisering i skala Organisasjonen arbeidet med fragmenterte verktøy, inkonsistente mønstre og manglet en felles frontend-arkitektur. Prosjektene løste de samme problemene på nytt: designkonsistens, boilerplate og delte standarder.
Organisasjonen trengte en måte å skalere utviklingshastigheten på samtidig som de opprettholdt kodekvalitet og visuell konsistens. Løsningen måtte tilby kjørbar infrastruktur som håndhevet beste praksis som standard samtidig som den forble fleksibel for domene-spesifikke behov.
Løsningen: Et sammenhengende pakke-økosystem Jeg designet en monorepo-arkitektur som huser seks sammenkoblede interne pakker, hver løser en spesifikk dimensjon av standardiseringsproblemet. Systemet dreier seg om Next.js, TypeScript og det offisielle norske regjeringsdesignsystemet (DigDir Designsystemet).
Prosjektinitialiserer: Dette kommandolinjeverktøyet brukes til å kickstarte helt nye frontend-prosjekter. Det bruker de andre pakkene og forhåndsdefinerte maler for å opprette en fullstendig konfigurert Next.js-applikasjon, komplett med designsystemet, komponentbiblioteket, generatorer og standard arkitektoniske mønstre allerede satt opp. Prosjekter kan scaffoldes på under 60 sekunder med alle avhengigheter, linting og formatering pre-konfigurert.
Visuelt fundament: Denne pakken fungerer som det visuelle fundamentet for hele økosystemet. Den tar designspesifikasjoner (farger, fonter, avstander) fra DigDir Designsystemet og kompilerer dem til CSS custom properties (variabler). Dette sikrer at alle applikasjoner deler et konsistent utseende og gjør funksjoner som lys/mørk modus enkle. Tokens følger et flerlags hierarki: primitive tokens definerer råverdier, semantiske tokens aliaser primitiver med betydning, og komponent-tokens konsumerer semantiske tokens for spesifikke brukstilfeller.
Gjenbrukbare UI-byggeklosser: Bygget på design tokens tilbyr denne pakken gjenbrukbare UI-komponenter for organisasjonens applikasjoner. Komponentene utfyller det grunnleggende designsystemet og er typet og dokumentert for bruk på tvers av prosjekter.
Delte strukturelle komponenter: Denne pakken tilbyr delte strukturelle komponenter som headere, footers og brødsmule-systemer. Den er designet spesielt for scenarier hvor flere frontend-applikasjoner trenger å presentere en enhetlig brukeropplevelse, som i en mikrofrontend-arkitektur. Den inkluderer mekanismer for å administrere grunnleggende global tilstand (som tema eller brukerinfo) på tvers av disse applikasjonene.
Utviklerproduktivitetsmotor: Dette er en samling kommandolinjeverktøy som genererer boilerplate for vanlige strukturer. Utviklere kan lage komponenter, API-integrasjonslag, skjemaer med validering, stores for tilstandshåndtering og applikasjonsruter som følger de delte mønstrene.
Design Token-kompilering og tematisering Design token-systemet er ryggraden i visuell konsistens. Jeg bygde et tilpasset Node.js-byggeskript som behandler designspesifikasjoner og produserer flere formater: CSS custom properties for runtime-tematisering, TypeScript-konstanter for typesikker tilgang i komponenter, og Figma Tokens JSON for designverktøy-integrasjon.
Kompileringsprosessen validerer token-referanser, sjekker for sirkulære avhengigheter og genererer omfattende dokumentasjon automatisk. Denne dokumentasjonssiden viser alle tokens med live-forhåndsvisninger, brukseksempler og tilgjengelighets-kontrastforhold for fargepar, og blir den eneste sannhetskilden for både designere og utviklere.
Tema-systemet støtter lys og mørk modus ut av boksen. Siden all styling er drevet av CSS custom properties, er bytte av tema så enkelt som å bytte token-verdiene på rotnivå.
CLI-basert utviklingsarbeidsflyt Generatorverktøyene transformerte hvordan utviklere jobber. I stedet for å kopiere boilerplate fra tidligere prosjekter eller skrive repetitiv kode, kjører utviklere enkle CLI-kommandoer som genererer komplette, mønsterkompatible funksjoner.
For eksempel, generering av et nytt API-integrasjonslag oppretter alle nødvendige filer: API-klientfunksjonene, TypeScript-typer, TanStack Query-hooks for datahenting, feilhåndtering og lastetilstander - alt koblet sammen og klart til bruk. Den genererte koden følger de eksakte mønstrene etablert av teamet, og sikrer at hver utvikler produserer konsistent arbeid.
Create-app-verktøyet håndterer prosjektinitialisering med et interaktivt prompt-system. Det stiller spørsmål om prosjektet (autentiseringsleverandører, databaseforbindelser, deployment-mål) og scaffolder en komplett applikasjon konfigurert spesifikt for disse valgene. Det resulterende prosjektet inkluderer Git-initialisering, ESLint/Prettier-konfigurasjon og koblinger til det delte komponentbiblioteket.
Hva arkitekturen muliggjorde Økosystemet gir teamene et felles utgangspunkt for nye applikasjoner og et felles språk for frontend-arkitektur. Generatorene og pakkene er laget for å redusere repetitivt oppsett og gjøre etablerte mønstre enklere å følge.
Det gir mer rom for domene-spesifikke funksjoner i stedet for at hvert prosjekt må bygge sitt eget fundament.
Systemet er designet for å utvikle seg. Hver pakke er versjonert uavhengig, noe som tillater inkrementell adopsjon. Team kan oppgradere design tokens uten å røre kodegenererings-verktøyene sine. Denne løse koblingen var kritisk for å oppnå buy-in fra team med eksisterende kodebaser som ikke hadde råd til en full migrasjon.
