Mitä eroa on frontendillä ja backendillä?

01Ravintolavertaus

Ajattele ravintolaa. Pöydät, ruokalista, tarjoilijan vastaanotto ja annoksen esillepano ovat asiakkaan näkemä puoli; se on frontend. Keittiö, varasto, reseptit ja kassa taas ovat näkymätön mutta kaiken mahdollistava puoli; se on backend.

Tarjoilija on henkilö, joka kuljettaa tilauksen salin ja keittiön välillä. Ohjelmistossa tämän roolin ottaa API: käyttöliittymä lähettää pyynnön, palvelin käsittelee sen ja palauttaa vastauksen. Kummankaan puolen ei tarvitse tuntea toisen sisäistä toimintaa; riittää, että ne sopivat yhteisestä kielestä.

Vertaus selittää myös, miksi nämä kaksi aluetta vaativat erilaista osaamista. Hyvä esillepanija ei aina ole hyvä kokki; mutta ilman niiden yhteistyötä ei synny hyvää ruokailukokemusta.

02Mitä on frontend?

Frontend on kaikki, mitä käyttäjä käyttää suoraan: valikot, painikkeet, lomakkeet, animaatiot ja sivun asettelu. Frontend-kehittäjän tavoitteena on saada suunnittelu toimimaan oikein, nopeasti ja saavutettavasti kaikilla näyttökooilla.

Peruskolmikko pysyy samana: HTML määrittää rakenteen, CSS ulkoasun ja JavaScript toiminnan. Suuremmissa käyttöliittymissä käytetään kirjastoja kuten React, Vue tai Svelte; yleisimmän niistä olemme käsitelleet artikkelissamme mikä on React.

• Käyttöliittymän komponentit: valikko, kortti, lomake, modaali-ikkuna.
• Mobiiliystävällisyys: asettelu eri näyttöleveyksille.
• Suorituskyky: sivu aukeaa nopeasti ja toimii sujuvasti.
• Saavutettavuus: näppäimistöllä liikkuminen, tukiohjelmien yhteensopivuus, riittävä värikontrasti (WCAG: vähintään 4,5:1).
• Lomakkeiden validointi: välitön palaute käyttäjälle.

03Mitä on backend?

Backend on palvelinpuoli, jota käyttäjä ei näe mutta joka on jokaisen toiminnon takana. Se varmentaa kirjautuneen käyttäjän henkilöllisyyden, laskee tilauksen summan, vähentää varastosta, kirjoittaa tietokantaan ja lähettää tarvittaessa sähköpostin.

Backend-kehityksessä käytettyjä kieliä on monia: PHP, Python, JavaScript Node.js:n kanssa, Java, C#, Go ja muut. Valinta tehdään tiimin kokemuksen, projektin tarpeen ja olemassa olevan infrastruktuurin mukaan.

Backendin sydämessä on useimmiten tietokanta. Relaatiotietokannat erottuvat tilaus- ja laskutustiedoissa, joissa johdonmukaisuus on kriittistä, kun taas joustavan skeeman rakenteita voidaan suosia nopeasti muuttuvassa sisällössä. Näiden kahden lähestymistavan eron olemme vertailleet artikkelissamme SQL:n ja NoSQL:n ero.

• Liiketoimintasäännöt: hinta-, alennus-, varasto- ja hyväksyntälogiikka.
• Tietokanta: datan johdonmukainen ja turvallinen tallennus.
• Tunnistautuminen ja käyttöoikeudet: kuka näkee mitä ja kuka voi muuttaa mitä?
• Integraatiot: yhteys maksu-, toimitus-, kirjanpito- ja muihin järjestelmiin.
• Turvallisuus: syötteiden tarkistus, suojaus hyökkäyksiä vastaan, lokien pito.

04Frontendin ja backendin vertailu

Vaikka taulukon jako näyttää selkeältä, käytännössä rajat ovat huokoisia. Palvelimella HTML:ää tuottavat kehykset tai selaimessa toimivat datakerrokset tuovat nämä kaksi puolta lähemmäs toisiaan. Silti vastuiden erillään pitäminen helpottaa virheiden löytämistä ja työnjakoa tiimissä; on selvää, kuka vastaa mistä.

05Miten nämä kaksi puolta kytkeytyvät toisiinsa?

Kun käyttäjä lisää tuotteen ostoskoriin, taustalla käydään lyhyt keskustelu. Frontend lähettää palvelimelle pyynnön “lisää tämä tuote tässä määrässä koriin”. Backend tarkistaa varaston, päivittää korin ja palauttaa vastauksena uuden loppusumman. Frontend päivittää näytön vastauksen mukaan.

Tämä keskustelu käydään yleensä HTTP:n yli JSON-muodossa. Alla näet yksinkertaisen esimerkin.

const yanit = await fetch('/api/sepet', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ urunId: 42, adet: 1 })
});
const sepet = await yanit.json();
console.log(sepet.toplam);

{
  "urunSayisi": 3,
  "toplam": 1250.00,
  "stokUyarisi": false
}

06Kuka on full stack -kehittäjä?

Full stack -kehittäjä on henkilö, joka pystyy työskentelemään sekä käyttöliittymän että palvelinpuolen parissa. Hän on erittäin arvokas pienissä tiimeissä ja nopeissa prototyypeissä, koska hän voi viedä ominaisuuden alusta loppuun yksin.

Tämä ei tarkoita, että hän olisi asiantuntija molemmilla alueilla yhtä syvällisesti. Useimmilla full stack -kehittäjillä on “pääalue”, joka on lähempänä toista puolta. Suurissa projekteissa erikoistuneet frontend- ja backend-tiimit työskentelevät yhdessä.

Se, että JavaScript toimii sekä selaimessa että palvelimella (Node.js:n kanssa), on yksi full stack -polkua helpottavista tekijöistä. Kielen perusteet löydät artikkelistamme mikä on JavaScript.

07Mistä kannattaa aloittaa?

Jos nautit visuaalisten tulosten näkemisestä ja olet kiinnostunut suunnittelusta ja käyttäjien käyttäytymisestä, frontend voi tuntua sinulle läheisemmältä. Jos haluat rakentaa logiikkaa, työskennellä datan kanssa ja ymmärtää, miten järjestelmät skaalautuvat, backend voi kiinnostaa sinua.

Kummassakin tapauksessa hyvä tapa aloittaa on opetella ensin HTML, CSS ja JavaScriptin perusteet ja rakentaa sitten pieni sovellus alusta loppuun. Näin näet omakohtaisesti, miten nämä kaksi puolta keskustelevat, ja löydät kokeilemalla, mikä alue tuo sinulle enemmän iloa.

1. Opettele verkon peruskolmikko: HTML, CSS, JavaScript.
2. Totu versionhallintaan: hallitse jokaista projektia Gitillä.
3. Valitse käyttöliittymäkirjasto: esimerkiksi React.
4. Kirjoita yksinkertainen API: Node.js:llä, PHP:llä tai Pythonilla.
5. Yhdistä tietokantaan: lisää, listaa, päivitä, poista tietue.
6. Julkaise: aja projekti oikealla palvelimella.

08Miksi tämä on tärkeää yrityksille?

Yritykselle, joka teettää verkkosivun tai ohjelmiston, tämän eron tunteminen auttaa esittämään oikeat kysymykset. Sivuston hitaus voi johtua frontendistä; tilausten väärä tallentuminen taas on backend-ongelma. Ongelman ohjaaminen oikeaan paikkaan nopeuttaa ratkaisua.

Hyvä projekti käsittelee molempia puolia yhtä huolellisesti. Kaunis käyttöliittymä menettää luottamuksen, jos sen takana ei ole johdonmukaista järjestelmää; tehokas järjestelmä taas ei pääse oikeuksiinsa käyttökelvottoman käyttöliittymän kanssa. Aurora Yazılımilla UI/UX-suunnittelu ja nopeus- ja suorituskykyoptimointi kattavat frontend-puolen, verkkokauppa-alusta ja toimialakohtaiset ohjelmistoratkaisut backend-puolen samassa projektissa.

Tämä ero on tärkeä jopa yrityksen esittelysivustolla. Yhteydenottolomakkeen suojaaminen roskapostilta, sivujen tarjoaminen hakukoneelle oikeana HTML:nä ja kuvien nopea latautuminen riippuvat siitä, että molemmat puolet on rakennettu oikein yhdessä. Ammattimainen verkkosivujen suunnittelu ei siksi käsittele pelkkää ulkoasua vaan myös sivun takana olevaa rakennetta. Sivuston kasvusuunnitelmasta tulee myös keskustella alusta alkaen: pelkästään esittelyä tekevä sivusto voi huomenna tarvita ajanvarauksen, tarjouslomakkeen tai verkkomyynnin vuoksi laajempaa backend-puolta. Kun tämä joustavuus on huomioitu alusta asti, uudelleenrakennusta ei tarvita.

Sovelluksen tavoin toimivat verkkokokemukset vaativat näiden kahden puolen parasta yhteispeliä; olemme käsitelleet aihetta erikseen artikkelissamme mikä on PWA.