Frontendkomponenter

Frontendkomponenter är självständiga, återanvändbara enheter som används för att bygga användargränssnitt i webapplikationer. En komponent encapsulerar markup, stil och beteende och kan kombineras med andra komponenter för att skapa komplexa gränssnitt. Syftet är att öka återanvändbarhet, läsbarhet och underhållbarhet genom att dela upp gränssnittet i mindre delar med väldefinierade gränssnitt.

Varje komponent har ofta ett gränssnitt bestående av ingångsdata och utsignaler som gör att en förälder kan styra vad som visas och få återkoppling när något händer. Dataflödet är oftast nedåtriktat och oföränderligt; händelser kommuniceras uppåt från barnet.

Strukturen består vanligtvis av en mall/markup, logik och stil; komponenter är ofta antingen statiska (presentation) eller har egen state. Beroende på ramverk används olika mekanismer för att isolera stilar (t.ex. CSS-moduler, shadow DOM) och för att hantera livscykler (montering, uppdatering, avmontering).

Designmönster som presentational vs container-komponenter, eller smart/dumb-komponenter, betonar separationen mellan hur något ser ut och hur det fungerar. Inom större system används även konceptet atoms/molekyler/organismer (Atomic Design) för att bygga ett enhetligt system av gränssnittskomponenter.

Statehantering varierar från lokal komponentstat till delat tillstånd i en övergripande store eller kontext. Stilval kan vara kapslade eller globalt infogade. Tillgänglighet (a11y) bör beaktas genom semantiska element, tangentbordsnavigering och ARIA-roller. Tester av komponenter omfattar enhetstester och visuella tester.

Utveckling och verktyg stödjer komponentbaserad arkitektur genom moderna ramverk som React, Vue, Angular eller Svelte, där varje komponent vanligtvis kan återanvändas i olika delar av applikationen.