Frontend vs backend: Hver er munurinn?

Framendinn (frontend) er sá hluti appsins sem keyrir í vafra notandans, það er síðurnar, hnapparnir, eyðublöðin og hreyfingarnar sem hann sér og smellir á. Bakendinn (backend) er sá hluti sem keyrir á netþjóni sem notandinn sér aldrei: hann geymir og sækir gögn, beitir viðskiptareglunum, athugar hver má gera hvað og talar við aðra þjónustu eins og greiðslur og tölvupóst. Þessir tveir hlutar tala saman í gegnum API og ásamt gagnagrunni mynda þeir saman „full-stack“ app.

Af hverju þetta skiptir máli þegar þú byggir með gervigreind

Þegar þú lýsir appi fyrir gervigreindar-smið ertu að lýsa báðum hlutunum í einu, hvort sem þú áttar þig á því eða ekki. „Viðskiptavinir geta pantað tíma“ þýðir pöntunarform (frontend), reglur um hvaða tímar eru lausir (backend) og stað til að vista pantanir í (gagnagrunni).

Að vita skiptinguna hjálpar á þrjá hagnýta vegu:

1. Öryggi. Allt í frontend getur notandinn séð og breytt. Reglur og leyndarmál verða að vera í backend.
2. Villuleit. „Hnappurinn svarar ekki“ og „hnappurinn svarar en ekkert er vistað“ benda á mismunandi hluta, og ef þú segir hvað þú sérð hjálpar það gervigreindinni að finna orsökina hraðar.
3. Hýsing og kostnaður. Vefsíða með eingöngu frontend er ódýr og einföld í hýsingu. Backend þarf að keyra einhvers staðar, og það hefur áhrif á hvað þú borgar og hvernig appið hegðar sér þegar það er ekki í notkun.

Daglegt dæmi

Hugsaðu um veitingastað.

Frontend er salurinn: matseðillinn, borðin, innréttingarnar og þjónninn sem tekur pöntunina. Hann er hannaður fyrir gesti og þeir sjá og snerta allt þetta.

Backend er eldhúsið og skrifstofan: kokkarnir sem elda, birgðageymslan, kassinn og reglur stjórans um hver fái afslátt. Gestir fara aldrei þangað inn, og þeir ættu ekki að geta það.

API-ið er milliliðurinn á milli þeirra: afgreiðsluborðið þar sem pantanir fara inn og diskar koma út, á umsömdu sniði. Gagnagrunnurinn er birgðageymslan og pöntunarbókin.

Gestur getur skrifað sína eigin pöntunarseðil (frontend er undir hans stjórn), en eldhúsið ræður samt hvað það eldar og hvað það rukkar. Þess vegna eiga mikilvægu athuganirnar heima í bakendanum.

Hvað gerir hvor hlutur

Sumir rammar gera línuna óskýra. Next.js til dæmis leyfir einu verkefni að innihalda bæði kóða fyrir vafra og kóða fyrir netþjón. Hugmyndin er sú sama: spurningin er alltaf hvar keyrir þessi hluti?

Dæmi: bókun í tíma

Hér er það sem gerist þegar einhver bókar jógatíma, skref fyrir skref.

Taktu eftir skrefum 4 og 6: innslátturinn er athugaður tvisvar. Athugunin í frontend gefur tafarlausa endurgjöf; athugunin í backend er sú sem telur í raun, því ákveðinn notandi getur farið framhjá frontend alveg.

Algeng hugtök útskýrð

Þarf appið þitt backend?

Algeng mistök og ranghugmyndir

• Að setja leynilega lykla í frontend. Þeir sjást öllum sem opna þróunarverkfæri vafrans. Þetta er algengasta alvarlega mistökin í appum sem gervigreind hefur smíðað.
• Að framfylgja reglum eingöngu í frontend. Að fela „eyða“-hnappinn fyrir notendur sem eru ekki stjórnendur er ekki vörn; backend verður að hafna beiðninni.
• Að halda að backend sé „bara gagnagrunnurinn“. Gagnagrunnurinn geymir gögn. Backend ákveður hver má lesa þau og breyta þeim og hvernig.
• Að halda að JavaScript þýði frontend. JavaScript og TypeScript keyra líka á netþjónum með Node.js.
• Að kenna röngum hluta um. Ef síðan lítur rétt út en gögnin eru röng er vandinn yfirleitt í backend eða gagnagrunni, ekki hönnuninni.
• Að byggja of mikið. Portfolio þarf ekki sérsmíðað backend. Það bætir við kostnaði og hreyfanlegum hlutum.

Hvað á að biðja gervigreindar-smiðinn um

• „Hvaða hlutar þessa apps keyra í vafranum og hverjir á netþjóninum?“
• „Færðu alla API-lykla yfir í backend og lestu þá úr umhverfisbreytum.“
• „Staðfestu öll form á netþjóninum en ekki bara í vafranum.“
• „Framfylgdu í backend að það séu bara stjórnendur sem geta eytt bókunum.“
• „Síðan lítur vel út en gögnin vistast ekki. Athugaðu skrár backend fyrir beiðnina.“
• „Þetta er einföld markaðssíða; hafðu hana eingöngu frontend nema við þurfum backend.“

Frontend og backend í Mythex

Nýtt verkefni í Mythex byrjar á Vite, React, TypeScript og Tailwind frontend, og agentinn bætir við backend þegar appið þitt þarf það, eða þú getur beðið um sérstakt API í Node, Python (FastAPI), C# eða Java sem keyrir við hlið frontend í sama verkefni. Í forskoðuninni getur þú skipt á milli vefsíðunnar og API-netþjónsins, og birting setur upp báða hlutana, með gagnagrunni og skráageymslu þegar þörf er á. Skjölin lýsa fjölþjónustuöppum, vefhýsingar leiðarvísirinn útskýrir hvar hvor hluti keyrir þegar appið er komið í loftið, og app-sniðmátin eru fljótleg leið til að sjá full-stack dæmi.

Spurningar