Frontend vs backend: mikä ero on?
Frontend on se osa sovellusta, joka toimii käyttäjän selaimessa: sivut, painikkeet, lomakkeet ja animaatiot, joita käyttäjä näkee ja klikkaa. Backend on osa, joka toimii palvelimella, jota käyttäjä ei näe. Se tallentaa ja hakee dataa, soveltaa liiketoimintasääntöjä, tarkistaa kuka saa tehdä mitäkin ja kommunikoi muiden palveluiden, kuten maksujen ja sähköpostin kanssa. Nämä kaksi puhuvat keskenään API:n kautta, ja yhdessä tietokannan kanssa ne muodostavat ”full stack” -sovelluksen.
Miksi tämä on tärkeää, kun rakennat tekoälyn avulla
Kun kuvailet sovellusta tekoälyrakentajalle, kuvailet molemmat puolet kerralla, huomasitko sen tai et. ”Asiakkaat voivat varata paikan” tarkoittaa varauslomaketta (frontend), sääntöjä siitä, mitkä paikat ovat vapaita (backend) ja paikkaa, johon varaukset tallennetaan (tietokanta).
Jaon tunteminen auttaa käytännössä kolmella tavalla:
- Turvallisuus. Kaikki frontendissa on käyttäjän nähtävissä ja muokattavissa. Säännöt ja salaisuudet on pidettävä backendissa.
- Virheiden etsintä. ”Painike ei reagoi” ja ”painike reagoi, mutta mitään ei tallennu” viittaavat eri puoliin, ja kun kerrot, kumpaa näet, tekoäly löytää syyn nopeammin.
- Hosting ja kustannukset. Pelkkä frontend-sivusto on halpa ja helppo julkaista. Backendin täytyy olla käynnissä jossain, ja se vaikuttaa siihen, mitä maksat ja miten sovellus toimii, kun sitä ei käytetä.
Arkinen vertauskuva
Ajattele ravintolaa.
Frontend on ruokasali: lista, pöydät, sisustus ja tarjoilija, joka ottaa tilauksen. Se on suunniteltu asiakkaita varten, ja he näkevät ja koskettavat kaikkea siinä.
Backend on keittiö ja toimisto: kokit, varasto, kassa ja johtajan säännöt siitä, kuka saa alennusta. Asiakkaat eivät mene sinne, eikä heidän pidäkään päästä.
API on väli niiden välillä: tiski, jonne tilaukset viedään ja josta annokset tulevat, sovitussa muodossa. Tietokanta on varasto ja tilauskirja.
Asiakas voi kirjoittaa tilauslapun uudelleen (frontend on hänen hallinnassaan), mutta keittiö päättää edelleen, mitä se valmistaa ja mitä se veloittaa. Siksi tärkeät tarkistukset kuuluvat taakse.
Mitä kumpikin puoli tekee
| Frontend | Backend | |
|---|---|---|
| Toimii | Käyttäjän laitteella, selaimessa | Palvelimella, jonka sinä tai hostaajasi hallitsee |
| Pääasiallinen tehtävä | Näyttää asioita, kerää syötteitä, reagoi klikkauksiin | Tallentaa dataa, soveltaa sääntöjä, valvoo oikeuksia, kutsuu muita palveluita |
| Voivatko käyttäjät nähdä ja muuttaa koodia? | Kyllä, se ladataan heidän selaimeensa | Ei |
| Voiko se sisältää salaisia API-avaimia? | Ei | Kyllä, ympäristömuuttujissa |
| Yleisiä teknologioita | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Mikä menee pieleen | Asettelu hajoaa mobiilissa, painike ei tee mitään, sivu latautuu hitaasti | Dataa ei tallennu, väärää dataa näytetään, virheitä, tietoturva-aukkoja |
Jotkin kehykset hämärtävät rajaa. Esimerkiksi Next.js antaa yhden projektin sisältää sekä selaimen että palvelimen koodia. Periaate pysyy samana: kysymys on aina siitä, missä tämä osa ajetaan?
Esimerkki: luokkavarauksen tekeminen
Tässä on, mitä tapahtuu, kun joku varaa jooga-tunnin, askel askeleelta.
| Vaihe | Missä | Mitä tapahtuu |
|---|---|---|
| 1 | Frontend | Aikataulusivu latautuu ja pyytää backendiltä tämän viikon tunnit. |
| 2 | Backend | Lukee tunnit ja varaukset tietokannasta, laskee vapaat paikat ja palauttaa listan JSON-muodossa. |
| 3 | Frontend | Näyttää jokaisen tunnin ajan, opettajan ja vapaiden paikkojen määrän. |
| 4 | Frontend | Käyttäjä valitsee tunnin ja täyttää nimen ja sähköpostin. Lomake tarkistaa, että sähköposti näyttää oikealta (kohteliaisuus, ei takuu). |
| 5 | Frontend → Backend | Lähettää pyynnön POST /api/bookings API:n kautta. |
| 6 | Backend | Tarkistaa syötteen uudelleen, varmistaa ettei tunti ole täynnä, tallentaa varauksen ja pyytää sähköpostipalvelua lähettämään vahvistuksen salaisella avaimella. |
| 7 | Backend → Frontend | Palauttaa ”varattu” tai ”valitettavasti tunti on täynnä”. |
| 8 | Frontend | Näyttää vahvistusnäkymän. |
Huomaa vaiheet 4 ja 6: syöte tarkistetaan kahdesti. Frontendin tarkistus antaa heti palautetta, mutta backendin tarkistus on se, joka oikeasti merkitsee, koska päättäväinen käyttäjä voi ohittaa frontendin kokonaan.
Yleisiä termejä
| Termi | Merkitys |
|---|---|
| Client / server | Client on selain (tai sovellus), joka tekee pyynnöt; server vastaa niihin. |
| UI | Käyttöliittymä: näkymät ja ohjaimet. |
| API | Sovittu tapa, jolla frontend pyytää backendiltä dataa tai toimintoja. |
| Endpoint | Yksi tietty osoite API:ssa, esimerkiksi /api/bookings. |
| Full stack | Frontend, backend ja tietokanta yhdessä. Katso mikä full stack -sovellus on. |
| Staattinen sivusto | Frontend ilman omaa backendia; samat tiedostot kaikille. |
| SPA | Single-page application: frontend, joka päivittää sivun selaimessa sen sijaan, että lataisi uusia sivuja. |
| Server-side rendering (SSR) | Palvelin rakentaa sivun HTML:n ennen lähettämistä, mikä voi parantaa nopeutta ja hakukoneoptimointia. |
| Ympäristömuuttujat | Asetuksia ja salaisuuksia, jotka annetaan backendille ajonaikana ja jotka pidetään poissa koodista. |
Tarvitseeko sovelluksesi backendin?
| Jos sovelluksesi… | Tarvitaanko backend? |
|---|---|
| Näyttää tietoa, joka on kaikille sama | Ei |
| Sisältää yhteydenottolomakkeen, joka vain lähettää sinulle sähköpostia | Yleensä pieni, tai lomakepalvelu |
| Tallentaa dataa, jonka muut ihmiset näkevät | Kyllä |
| Sisältää kirjautumisen ja yksityistä dataa | Kyllä |
| Ottaa maksuja | Kyllä, ainakin maksujen luomiseen ja maksu-webhookien vastaanottoon |
| Käyttää maksullista tekoälyä tai muuta API:a salaisella avaimella | Kyllä, jotta avain pysyy poissa selaimesta |
Yleisiä virheitä ja väärinkäsityksiä
- Salaisten avainten laittaminen frontendiin. Kuka tahansa, joka avaa selaimen kehittäjätyökalut, näkee ne. Tämä on yleisin vakava virhe tekoälyllä rakennetuissa sovelluksissa.
- Sääntöjen toteuttaminen vain frontendissa. Poistopainikkeen piilottaminen muilta kuin ylläpitäjiltä ei ole suojaa; backendin täytyy hylätä pyyntö.
- Oletus, että backend on ”vain tietokanta”. Tietokanta tallentaa dataa. Backend päättää, kuka saa lukea ja muuttaa sitä ja miten.
- Ajatus, että JavaScript tarkoittaa frontendia. JavaScript ja TypeScript toimivat myös palvelimilla Node.js:n kanssa.
- Väärän puolen syyttäminen. Jos sivu näyttää oikealta mutta data on väärin, vika on yleensä backendissä tai tietokannassa, ei suunnittelussa.
- Liian suuri rakentaminen. Portfolio ei tarvitse omaa backendia. Sen lisääminen tuo kustannuksia ja liikkuvia osia.
Mitä pyytää tekoälyrakentajalta
- ”Mitkä osat tästä sovelluksesta ajetaan selaimessa ja mitkä palvelimella?”
- ”Siirrä kaikki API-avaimet backendiin ja lue ne ympäristömuuttujista.”
- ”Tarkista jokainen lomake palvelimella selaimen lisäksi.”
- ”Varmista backendissä, että vain ylläpitäjät voivat poistaa varauksia.”
- ”Sivu näyttää kunnolliselta, mutta dataa ei tallenneta — tarkista backendin lokit tälle pyynnölle.”
- ”Tämä on yksinkertainen markkinointisivu; pidä se pelkkänä frontendina, ellemme tarvitse backendia.”
Frontend ja backend Mythexissä
Uusi Mythex-projekti alkaa Vite-, React-, TypeScript- ja Tailwind-frontendistä, ja agentti lisää backendin, kun sovelluksesi sitä tarvitsee. Voit myös pyytää erillisen API:n Node-, Python- (FastAPI), C#- tai Java-kielellä, joka toimii frontendin rinnalla samassa projektissa. Esikatselussa voit vaihtaa verkkosivun ja API-palvelimen välillä, ja julkaisu vie molemmat käyttöön tietokannan ja tiedostotallennuksen kanssa tarvittaessa. Dokumentaatiossa on tietoa monipalveluisista sovelluksista, verkkohostaus -oppaassa kerrotaan, missä kumpikin osa ajetaan julkaisun jälkeen, ja sovellusmallit ovat nopea tapa nähdä full stack -esimerkkejä.
Kysymykset
Mikä on ero frontendin ja backendin välillä?
Frontend on sovelluksen osa, joka toimii käyttäjän selaimessa: sivut, painikkeet ja lomakkeet, jotka käyttäjä näkee. Backend toimii palvelimella, jota käyttäjä ei näe. Se tallentaa dataa, soveltaa liiketoimintasääntöjä, tarkistaa oikeudet ja kommunikoi muiden palveluiden, kuten maksu- ja sähköpostipalvelujen, kanssa.
Tarvitseeko jokainen sovellus backendin?
Ei. Markkinointisivu, portfolio tai yksinkertainen laskeutumissivu voi olla pelkkä frontend. Heti kun sovellus tarvitsee jaetun datan tallennusta, kirjautumisen, maksujen käsittelyn tai salaisia API-avaimia, se tarvitsee jonkinlaisen backendin.
Onko HTML frontendia vai backendia?
HTML, CSS ja selaimessa ajettava JavaScript ovat frontendia. JavaScriptiä voi ajaa myös palvelimella Node.js:n avulla, jolloin se on backend-koodia. Kieli ei ratkaise asiaa, vaan se, missä koodi ajetaan.
Mitä full stack tarkoittaa?
Full stack tarkoittaa sekä frontendin että backendin hallintaa (yleensä myös tietokannan). Full stack -sovellus sisältää kaikki kolme osaa, ja full stack -kehittäjä työskentelee kaikkien niiden parissa.