Når du vælger et filter, åbner en menu eller udfylder en formular, møder du frontend. Udvikleren skal få den oplevelse til at hænge sammen under flere forhold end dem, der kan ses på et designbillede.
HTML, CSS og JavaScript har forskellige opgaver
HTML beskriver indhold og struktur. En overskrift, en knap og et formularfelt har hver deres betydning. Når de rigtige elementer bruges, kan browseren og hjælpemidler bedre forstå siden. En knap bør eksempelvis være en rigtig knap, når den udløser en handling.
CSS styrer præsentationen: blandt andet afstande, farver, typografi og layout. JavaScript kan håndtere ændringer og interaktioner, eksempelvis filtrering af en liste. En side kan godt vise nyttigt indhold uden JavaScript. Valget af teknologi bør følge behovet frem for en forventning om, at alle sider kræver samme værktøjer.
Et design skal blive til sammenhængende adfærd
En frontendudvikler omsætter visuelle og funktionelle beslutninger til en brugerflade. Det indebærer mere end at placere elementer efter et billede. Hvad sker der med meget lange navne? Hvad vises, mens data hentes? Kan en handling gentages, og hvordan opdager brugeren, at den lykkedes?
Tag et fiktivt filter til ledige tider. Det skal vise det valgte område, opdatere resultaterne og forklare, hvis intet matcher. Hvis et netværkskald fejler, skal en tom liste ikke ligne et sikkert svar om, at ingen tider findes. Sådanne tilstande er en vigtig del af implementeringen.
Brugerfladen skal kunne tilpasse sig
Responsivt arbejde handler om at lade indholdet fungere ved forskellige vinduesstørrelser. Det er ikke nok at lave en lille kopi af computerlayoutet. Kolonner, navigation, billeder og tekst skal kunne ombrydes uden at skjule det, brugeren har brug for.
Tastaturbetjening, synlig fokusmarkering, labels og forståelige fejlbeskeder hører også til kvaliteten. Nogle behov håndteres i designet, andre i kodens struktur og adfærd. Derfor bør designer og udvikler gennemgå centrale forløb sammen og kontrollere den færdige side.
- Prøv lange tekster, tomme lister og fejl.
- Brug siden med tastatur og med zoom.
- Kontrollér små og store vinduer samt størrelser imellem dem.
Frontend kan vise data, som kommer fra andre systemer
Mange brugerflader henter oplysninger eller sender handlinger til en server gennem et API. Frontend præsenterer resultatet og hjælper brugeren gennem forløbet. Serveren kan eksempelvis kontrollere adgang og gemme oplysninger. Andre websites består hovedsageligt af indhold, som ikke kræver et særligt udviklet backend-system.
Kontrol i browseren kan give hurtig hjælp, men må ikke være den eneste beskyttelse af en vigtig handling. Når en løsning gemmer eller ændrer data, skal det relevante system også kontrollere anmodningen. Aftal grænsen mellem frontend, backend og eksterne tjenester tydeligt.
Vurder frontend på den oplevelse, der er bygget
Bed om at se de vigtigste opgaver i en kørende løsning. Afprøv både det normale forløb og situationer med fejl eller manglende indhold. En teknologi eller et framework fortæller ikke i sig selv, om løsningen er hurtig, forståelig eller nem at vedligeholde.
Ved overdragelse bør det være klart, hvordan indhold ændres, hvem der har adgang, og hvem der håndterer fejl. En færdig frontend er også noget, der skal kunne drives videre af de mennesker, som overtager den.
Tag med videre
Det vigtigste
at huske.
- HTML, CSS og JavaScript bidrager med struktur, præsentation og adfærd.
- God frontend tager højde for fejl, indhold og forskellige måder at bruge siden på.
- Vurder den kørende løsning frem for navnet på teknologien.
Lad os gøre det klart
Spørgsmål & svar
Er frontend det samme som webdesign?
Områderne overlapper, men frontend handler om den tekniske implementering og adfærd i browseren. Design handler om at forme løsningen og dens oplevelse.
Skal en frontend bygges med React?
Nej. React er én mulighed. Indhold, interaktioner, vedligeholdelse og teamets behov bør afgøre valget.
Er frontend kun det visuelle?
Nej. Arbejdet omfatter også tilstande, betjening, datahåndtering i browseren, tilgængelighed og feedback til brugeren.
Hvad betyder frontend på dansk?
Ordet bruges typisk om brugerfladen eller den del af en løsning, som brugeren møder. I webudvikling omfatter det strukturen, præsentationen og den adfærd, browseren gør tilgængelig.
Er HTML frontend eller backend?
HTML beskriver strukturen i det dokument, browseren viser, og er en grundlæggende del af webfrontend. En server kan generere HTML, men det gør ikke selve HTML-dokumentet til et sprog til serverens forretningslogik.
Hvilke programmeringssprog bruger man til frontend?
De grundlæggende byggesten er HTML til struktur, CSS til præsentation og JavaScript til programmeret adfærd. HTML og CSS betegnes ikke normalt som generelle programmeringssprog. TypeScript kan bruges oven på JavaScript, mens biblioteker som React organiserer interfacekoden.
Hvad laver en frontendudvikler i praksis?
Udvikleren bygger og vedligeholder den brugerflade, der skal fungere med rigtigt indhold, forskellige skærme og flere inputmetoder. Det kan omfatte komponenter, formularer, data fra API'er, fejlbeskeder, tilgængelighed, hastighed og test.
Kan frontend fungere uden JavaScript?
Ja. HTML og CSS kan levere indhold, navigation og mange grundlæggende funktioner. JavaScript bruges, når løsningen har behov for yderligere adfærd. Det nødvendige niveau afhænger af produktets opgaver.
Hvad skal jeg lære, før jeg starter med React?
Lær først at strukturere HTML, lave fleksible layouts med CSS og arbejde med JavaScripts funktioner, objekter, arrays, events og asynkrone handlinger. Byg derefter et lille produkt, så Reacts komponenter og tilstande løser et problem, du allerede forstår.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
