Utfordringen: Enterprise-standardisering i skala Statsbygg forvalter over 2,3 millioner kvadratmeter statlige bygg. Deres utviklingsteam opererte med fragmenterte verktøy, inkonsistente mønstre og ingen enhetlig arkitektur. Hvert prosjekt oppfant løsninger på nytt for vanlige problemer: designinkonsistenser, gjentatt boilerplate og mangel på 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 fem 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 et bibliotek av gjenbrukbare UI-komponenter spesifikke for Statsbyggs behov. Disse komponentene utfyller de grunnleggende DigDir-komponentene, og reduserer kodeduplisering på tvers av forskjellige applikasjoner. Alle komponenter følger streng TypeScript-typing, omfattende Storybook-dokumentasjon og oppnår høy testdekning med Vitest.
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 utviklerproduktivitetsmotoren - en samling kommandolinjeverktøy som automatisk genererer boilerplate-kode for vanlige strukturer. Utviklere kan generere komponenter, API-integrasjonslag, skjemaer med validering, tilstandshåndteringsstores og applikasjonsruter, alt i henhold til Statsbyggs definerte mønstre. Dette reduserer dramatisk repetitivt arbeid og sikrer konsistens.
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å. Dette gjorde implementering av regjeringsmandaterte tilgjengelighetsfunksjoner grei.
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.
Adopsjon og innvirkning Innen to måneder etter lansering ble økosystemet tatt i bruk av to interne team. Scaffolding-tid for nye prosjekter falt fra 3-4 dager til under én time. Det delte komponentbiblioteket reduserte UI-inkonsekvenser med anslagsvis 70% basert på design review-tilbakemeldinger.
Generatorene ble spesielt populære - utviklere brukte dem mye den første måneden for å unngå å skrive boilerplate for API-integrasjoner og skjemahåndtering. Tiden spart på repetitive oppgaver tillot teamene å fokusere på domene-spesifikke funksjoner i stedet for infrastruktur-setup.
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.
