Hvad er en front-end ramme og hvorfor bruge en?

I webudviklingsverdenen møder du termen "frontend" og "backend" temmelig ofte. Bare for at opdatere handler front-end udvikling om de dele af et websted, som brugerne ser, mens bagenden handler mere om funktionen "bag kulisserne".

Brug af en ramme til at konstruere dit websteds frontend har mange fordele (og det er ret nemt at starte!). Lad os gå over, hvad front-end rammer er, og hvorfor du bør overveje at inkorporere dem i dit webudviklingsarbejde.

Hvad er en front-end ramme?

Også omtalt som "CSS-rammer", er disse pakker indeholdende forudskrevet, standardiseret kode i filer og mapper. De giver dig en base at bygge på, mens du stadig giver fleksibilitet med det endelige design.

Typisk indeholder front-end-rammer følgende komponenter:

• Et gitter, der gør det nemt at organisere designelementerne på dit websted

• Definerede skrifttypestile og størrelsesorden, der varierer afhængigt af dens funktion (forskellig typografi for overskrifter versus afsnit osv.) > Pre-built hjemmeside komponenter som sidepaneler, knapper og navigationsbjælker

• Afhængigt af de specifikke rammer, du vælger, er der meget mere, de også kan.

Hvorfor skal jeg bruge en?

Der er mange gode grunde til at bruge en front-end ramme i stedet for at starte al din kode fra bunden:

Spar tid! Selvfølgelig, hvis du skriver hver enkelt kode kode alene, vil det tage meget længere tid at starte din hjemmeside. Rammer kan hjælpe dig med at komme i gang med det grundlæggende.

• Tilføj ekstra komponenter, som du måske ikke har ellers. Det er altid rart at have mulighed for at klæbe på en anden knap eller to uden at skabe ekstra besvær for dig selv.

• Vær sikker på at koden fungerer. I stedet for at bruge meget tid på at skrive din egen kode kun for at opdage, at den ikke virker (eller ikke er kompatibel med 60% af webbrowsere), ved du, at du bruger præ-testet, funktionel kode.

• Før jeg går videre, vil jeg også præcisere, hvordan

ikke skal bruge front-end rammer! Behandling af dem som en erstatning for at have kodebyggende færdigheder vil ikke gøre dig nogen favoriserer. Få kendskab til HTML og CSS først, og derefter du kan begynde at bruge genveje. Behandl din ramme som en assistent, ikke en krykke. Eksempler på Front-End Framework

Ikke alle CSS-rammer er skabt ens, så sørg for at gøre din forskning om, hvilken passer bedst til dine unikke behov. Her er et hurtigt overblik over top fem:

Bootstrap: Den mest populære derude. Har tonsvis af stjerner på Github og masser af ressourcer for at få dine spørgsmål besvaret. En af de nemmere at bruge, men nogle siger, at den har et meget karakteristisk "Bootstrap" -udseende.

Stiftelse: Tilbyder meget fleksibilitet og tilpasningsevne. God til dem, der har erfaring med front-end-udvikling og gerne dækker det grundlæggende, samtidig med at der opretholdes en masse kreativ kontrol.

Stylus: Expressive og stilfuldt CSS sprog. Denne ramme kan kun bruges på Node. js applikationer.

Semantisk brugergrænseflade: Kortfattet, intuitivt og gør debugging af din kode nem og enkel. Giver dig en masse designfrihed og tilpasser sig dine behov.

UI-sæt: Rammen til brug, hvis du er interesseret i at udvikle iOS-apps.

Har en grundlæggende stil, der gør det nemt at udvikle dit eget site look.

Konklusion

Rammer er utroligt nyttige værktøjer til front-end design, især hvis du har et job, hvor du ofte udvikler den side. De giver dig mulighed for at fremskynde din arbejdsgang og øge din produktivitet uden at ofre kvalitet eller funktionalitet, mens du stadig forlader døren for et unikt, tilpasset udseende. Bare husk at bruge dem som et værktøj til at supplere dine evner, ikke som en måde at skære hjørner på og nyd!