Migrering fra FFE til Indeks
Indeks er ikke FFE med ny styling. Det er bygget opp på nytt, med en annen arkitektur, og på fem punkter må du derfor jobbe annerledes enn du er vant til. Denne siden går gjennom dem.
Vi leverer byggeklosser, ikke ferdige skjermer
Indeks tilbyr grunnleggende basekomponenter. Trenger du noe større, setter du det sammen selv av dem. Designsystemteamet eier og vedlikeholder basekomponentene; teamet ditt eier det du bygger oppå.
Det er en bevisst arbeidsdeling. Skulle vi også vedlikeholdt alle de sammensatte komponentene teamene trenger, ville vi blitt flaskehalsen som alle måtte stå i kø bak. I stedet får du bestemme selv hvordan delene settes sammen.
Strukturen følger atomic design, metodikken Brad Frost beskrev:
- Atoms er de minste delene: en knapp, et input-felt, en label, et ikon.
- Molecules er flere atoms satt sammen, for eksempel et søkefelt av et input-felt og en knapp.
- Organisms er større sammensetninger, som en navigasjonsrad eller et kort med flere elementer.
Indeks leverer atoms og enkelte molecules. Organisms bygger du.
Webstandarder fremfor rammeverk
FFE var React. Indeks er HTML og CSS, utvidet med web components der oppførsel krever JavaScript. Det betyr at komponentene virker i Vue, Svelte, server-rendret HTML eller ren statisk side, ikke bare i React.
React-komponentene finnes fortsatt, i @sb1/indeks-react. De er tynne lag rundt web-komponentene og CSS-en, så du får det samme resultatet enten du bruker dem eller skriver HTML-en selv. Velger du React, må du også laste @sb1/indeks-web.
Utility-klasser
Indeks har utility-klasser i Tailwind-stil for layout, spacing, farger og typografi. Du kan justere avstander og plassering direkte i markupen i stedet for å skrive egen CSS til hvert tilfelle. De ligger i CSS-en du allerede laster, så du trenger ikke installere noe ekstra. Se Utility-dokumentasjonen for hele settet.
Færre pakker enn i FFE
I FFE lå hver komponent i sin egen npm-pakke. I Indeks er det tre du forholder deg til:
| Pakke | Inneholder | Hvordan du laster den |
|---|---|---|
@sb1/indeks-css | All styling: komponent-CSS, utility-klasser og tokens i én fil | CDN (anbefalt), eller npm |
@sb1/indeks-web | Web-komponentene, altså oppførselen | CDN (anbefalt), eller npm |
@sb1/indeks-react | React-komponentene | npm |
@sb1/indeks-tokens og @sb1/indeks-utils finnes på npm, men du skal normalt ikke installere dem: innholdet er inlinet i @sb1/indeks-css. Trenger du tokens i et native-prosjekt eller i et eget byggesteg, er det unntaket.
Vi anbefaler CDN for CSS og web-komponentene, ikke npm. Alle SB1-applikasjoner deler samme URL, så nettleseren gjenbruker cachen når brukeren går mellom tjenestene våre. Utvikler viser oppsettet, inkludert hvordan du holder CDN-versjonen i takt med @sb1/indeks-react.
Færre farger
Fargepaletten i Indeks er mindre enn i FFE, og det er med vilje. Du velger farge etter hva den betyr og ikke etter hvilken kulør du vil ha: navnene er fill-success, surface-main, border-danger. Da havner to team som løser samme oppgave på samme farge, og et bytte av kulør senere treffer alle stedene på én gang. Se Farge-dokumentasjonen for hele paletten.