Sovelluksen käyttöliittymäpuoli eli kaikki se mitä käyttäjä näkee ja käyttää selaimessa. Frontend rakennetaan HTML:llä, CSS:llä ja JavaScriptillä, ja Reactin kaltaiset frameworkit tekevät siitä interaktiivista.
Frontend · Koodaus
Frontend tarkoittaa kaikkea mitä käyttäjä näkee ja käyttää sovelluksessa: napit, lomakkeet, listat, navigaatio ja visuaalinen ilme. Se rakennetaan HTML:llä, CSS:llä ja JavaScriptillä, ja React on suosituin framework frontendiin. Vibekoodauksessa frontend on usein se mistä aloitat — pyydät tekoälyä luomaan käyttöliittymän ja lisäät backendin myöhemmin. Tekoäly osaa frontend-koodia erityisen hyvin koska siitä on valtavasti koulutusdataa. Frontend kommunikoi backendin kanssa API-kutsujen kautta hakien ja lähettäen dataa.
Frontend on sovelluksen käyttöliittymä: kaikki mitä käyttäjä näkee ja käyttää selaimessa tai puhelimessa, kuten painikkeet, lomakkeet ja sivujen ulkoasu.
Frontend näkyy käyttäjälle ja toimii selaimessa. Backend toimii palvelimella: se tallentaa tiedot tietokantaan, hoitaa kirjautumisen ja antaa frontendille dataa. Useimmat sovellukset tarvitsevat molemmat.
Pohjalla ovat HTML (rakenne), CSS (ulkoasu) ja JavaScript (toiminnallisuus). Isommat käyttöliittymät tehdään yleensä frameworkilla, kuten Reactilla, ja vibekoodaustyökalut käyttävät usein Reactia ja Tailwind CSS:ää.
React ja Next.js ovat suosituimmat frontend-teknologiat vibekoodauksessa
Tailwind CSS hoitaa frontendin tyylit utility-luokkien avulla
Frontend hakee datan backendistä: const data = await fetch("/api/users")
"Luo tuotelistaus-sivu korttinäkymällä" on tyypillinen frontend-prompti
Tutustu kaikkiin vibekoodauksen termeihin.