Nykypäivän digitaalisella aikakaudella web-kehityksestä on tullut olennainen osaamisalue kenelle tahansa ohjelmistokehittäjälle. Web-kehittäjien työnkuva voi vaihdella interaktiivisten verkkosivujen toteuttamisesta aina monimutkaisiin verkkosovelluksiin asti. Tässä artikkelissa syvennymme web-kehityksen maailmaan käsittelemällä front end- ja back end -kehityksen keskeisiä eroja.
Alla vielä sisällysluettelo, jos haluat hypätä suoraan tiettyyn aiheeseen:
Mitä on web-kehitys?
Web-kehitys (tai web-ohjelmointi, eng. web development) on yksinkertaisuudessaan verkkosivustojen ja verkkosovellusten suunnittelua ja rakentamista. Puhekielessä kuitenkin puhutaan useammin web-kehityksestä, kun luotava projekti vaatii edistyneempää ohjelmointiosaamista, eikä kyseessä ole vain yksinkertainen verkkosivusto, joka pitää sisällään yksinkertaista sisältöä. Web-kehitys on siis yleisemmin ohjelmistokehitystä, joka keskittyy verkossa toimiviin kokonaisuuksiin.
Web-kehitys jakautuu kahteen selkeään osa-alueeseen: frontend-kehitykseen ja backend-kehitykseen. Frontend-kehitys käsittää kaiken, minkä kanssa käyttäjä voi olla vuorovaikutuksessa, eli sivuston tai verkkosovelluksen käyttöliittymän ja sen osat, sen tyylit sekä kaikki sen toiminnallisuudet. Backend-kehitys taas pitää sisällään kaiken taustalla liikkuvan tiedon käsittelyn sekä palvelimella tapahtuvat toiminnot. Siitä lisää myöhemmin.
Mikä on web-kehittäjän ja web-suunnittelijan ero?
Web-kehittäjät vastaavat verkkosivuston tai verkkosovelluksen laajemmasta teknisestä toteutuksesta ja toiminnallisuudesta, kun taas web-suunnittelijat keskittyvät enemmän visuaalisiin osiin ja käyttöliittymiin. Web-kehittäjien ja web-suunnittelijoiden rooleissa on hieman päällekkäisyyksiä, mutta web-kehittäjän voi mieltää enemmän täysiveriseksi ohjelmistokehittäjäksi, kun web-suunnittelija yleisellä tasolla omaa kevyemmän tason taidot web-kehitykseen.
Nykypäivänä varsinkin verkkosivujen web-suunnittelijoilla ei edes tarvitse olla suurta teknistä osaamista verkkosivujen toteutuksessa valmiiden verkkosivurakentajien, kuten Wordpressin tai Wixin, myötä. Myös sovellusten suunnittelun kannalta ohjelmistotaloissa on projekteissa usein erikseen vielä ohjelmistokehittäjät ja suunnittelijat, jolloin suunnittelijat voivat keskittyä ohjelmistojen osalta vahvasti ulkoasullisiin ja rakenteellisiin asioihin sekä käyttökokemuksen suunnitteluun teknisten asioiden sijaan.
Molemmat roolit ovat tärkeitä ohjelmistokehityksessä ja he tekevät usein tiivistä yhteistyötä onnistuneen verkkosivuston tai verkkosovelluksen luomiseksi.
Frontend-kehitys: käyttöliittymän suunnittelu ja toteutus
Frontend-kehitys on verkkosivuston tai verkkosovelluksen visuaalisten ja vuorovaikutteisten osien ja kokonaisuuksien suunnittelua ja toteutusta, joiden kanssa käyttäjät ovat suorassa kosketuksessa. Kyseessä voi olla kokonaiset näkymät tai yksittäiset elementit, kuten lomakkeet tai painikkeet.
Frontend-kehitykseen kuuluu siis kokonaisuudessaan käyttöliittymäsuunnittelu (UI-suunnittelu) ja käyttäjäkokemuksen suunnittelu (UX-suunnittelu) sekä suunniteltujen näkymien ja elementtien toteutus.
Frontend-kehittäjät käyttävät pääosin HTML:n, CSS:n ja JavaScriptin yhdistelmää rakentaessaan verkkosivustoja tai verkkosovelluksia. Alla käymme läpi vielä yksityiskohtaisemmin frontend-kehittäjän repertuaaria:
Perusrakenne ja tyyli (HTML ja CSS)
HTML (Hypertext Markup Language) on merkintäkieli web-kehityksessä, jota käytetään verkkosivustojen ja verkkosovellusten rakentamiseen, sisällön merkitsemiseen ja osien hierarkian luomiseen. HTML käyttää erilaisia tunnisteita määrittelemään eri elementtejä, kuten otsikoita, kappaleita, linkkejä, kuvia ja taulukoita, jotta selaimet osaavat lukea ja ymmärtää tarkemmin sivustoja ja sovelluksia sekä niiden osia. Näiden elementtien yhdistelmällä muodostetaan verkkosivun rakenne ja sisältö. Uusin versio HTML:stä on HTML5.
CSS (Cascading Style Sheets) puolestaan on web-kehityksen tyylikieli, jota käytetään verkkosivustojen ulkoasun määrittämiseen. CSS mahdollistaa elementtien visuaalisen muotoilun, kuten värin, fonttityylin, taustakuvan ja asettelun. Se tarjoaa keinoja myös luoda responsiivisia käyttöliittymiä eri näyttökokoluokille ja laitteille. CSS:ää käytetään yhdessä HTML:n kanssa, ja sen avulla eri HTML-elementtejä voidaan tyylitellä ja sijoittaa halutulla tavalla hyödyntäen HTML-elementeille annettuja luokkia tai tunnisteita. Uusin versio CSS:stä on CSS3.
HTML ja CSS ovat erottamattomasti sidoksissa toisiinsa frontend-kehityksessä. Taitava frontend-kehittäjä hyödyntää HTML:n ja CSS:n ominaisuuksia tehokkaasti luodakseen näyttäviä, skaalautuvia sekä saavutettavia käyttöliittymiä.
Toiminnallisuudet (JavaScript)
JavaScript on ohjelmointikieli, jota käytetään laajasti frontend-kehityksessä. Se tarjoaa mahdollisuuden interaktiivisuuteen ja dynaamisuuteen verkkosivustoissa ja verkkosovelluksissa. JavaScript onkin olennainen osa modernia web-kehitystä ja sen monipuolista osaamista arvostetaan ohjelmistokehityksen saralla.
Frontend-kehityksessä JavaScript mahdollistaa käyttäjän vuorovaikutuksen sivuston kanssa, kuten lomakkeiden tarkistuksen, animaatioiden luomisen, dynaamisten sisältöjen päivittämisen ja paljon muuta. JavaScriptin avulla voidaan myös toteuttaa AJAX-pyyntöjä ja käsitellä palvelimen vastauksia reaaliajassa.
JavaScriptin suosio ja laaja käyttöönotto ovat johtaneet laajaan kehittäjäyhteisöön ja moniin avoimen lähdekoodin kirjastoihin ja kehysratkaisuihin. Suosittuja JavaScript-kirjastoja ja -kehyksiä ovat esimerkiksi React, Angular ja Vue.js, jotka mahdollistavat nopean ja tehokkaan kehityksen. Näiden työkalujen avulla kehittäjät voivat helposti hallita ohjelmiston tilaa, luoda uudelleenkäytettäviä komponentteja ja toteuttaa reagoivia käyttöliittymiä. Varsinkin React on saavuttanut suuren suosion kehittäjien keskuudessa.
Responsiivinen suunnittelu
Responsiivinen suunnittelu on lähestymistapa, joka huomioi verkkosivustojen ja verkkosovellusten mukautumisen eri näyttökokoja ja laitteita varten. Sen tavoitteena on luoda käyttäjille optimaalinen ja yhtenäinen käyttökokemus riippumatta siitä, millä laitteella sivustoa käytetään.
Responsiivinen suunnittelu perustuu pääosin mukautuviin tyylisääntöihin, jotka mahdollistavat sivuston skaalautumisen eri näyttökokoihin. Tämä tarkoittaa sitä, että sisältö ja asettelu mukautuvat automaattisesti siten, että ne ovat helppolukuisia ja helposti käytettäviä pienillä mobiililaitteilla, tableteilla ja suurilla tietokoneiden näytöillä.
Responsiivisessa suunnittelussa käytetään sisällön ja rakenteen mukauttamiseen CSS-mediasääntöjä (CSS media queries), joiden avulla määritellään eri näyttökokoihin sovellettavat tyylisäännöt. Tämä mahdollistaa sivuston elementtien, kuten navigointivalikoiden, kuvien, tekstien ja painikkeiden, muuttumisen ja sijoittumisen eri tavalla riippuen käytössä olevasta laitteesta.
Esimerkiksi sivustolla voi olla yksi asettelu puhelimille ja toinen asettelu tietokoneen näytöille, jotta käyttäjät saavat parhaan käyttökokemuksen kustakin laitetyypistä. Yhtenä esimerkkinä voisi olla että useampi laatikko on vierekkäin tietokoneen näytöllä, mutta näytön leveyden pienentyessä nämä laatikot tippuvat allekkain.
Responsiivinen suunnittelu varmistaa, että sivuston sisältö näytetään aina selkeästi ja helposti luettavassa muodossa sen sijaan, että käyttäjien tarvitsisi esimerkiksi zoomata sisällön näkemiseksi. Toiseksi, responsiivinen suunnittelu parantaa käyttäjien sitoutumista ja tyytyväisyyttä sivustoon, mikä voi johtaa pidempään käyttöaikaan ja parempaan konversioon.
Saavutettavuus
Frontend-kehittäjien tehtävänä on luoda verkkosivustoja ja -sovelluksia, jotka ovat saavutettavia kaikille käyttäjille. Tämä tarkoittaa esimerkiksi varmistamista, että sivuston sisältö on helppolukuista ja että navigointi on sujuvaa eri avustavia tekniikoita käyttäville käyttäjille.
Saavutettavuuden parantamiseksi frontend-kehittäjät ottavat huomioon esimerkiksi HTML-elementtien semanttisen merkkaamisen, mediatiedostojen kuvaamisen näytönlukijoille, oikeaoppisen tuen sivuston asianmukaiseen navigointiin tai vaikka kontrastisuhteiden ja sisältökokojen huomioimista.
Saavutettavuutta koskevat standardit, kuten WCAG 2.1 (Web Content Accessibility Guidelines), tarjoavat kattavat ohjeet saavutettavuuden varmistamiseksi. Lisäksi on olemassa työkaluja ja tarkastusohjelmistoja, jotka auttavat kehittäjiä arvioimaan ja testaamaan sivuston saavutettavuutta. Olemme käsitelleet sivuston saavutettavuuden testaamista artikkelissa “Saavutettavuusauditointi - Miten Haltu sen tekee?”.
Backend-kehitys: palvelinpään käsittely ja tietokannat
Backend-kehityksellä tarkoitetaan verkkosivuston tai verkkosovelluksen osien suunnittelua ja rakentamista sekä hallinnointia. Nämä vaikuttavat taustalla tapahtuviin toimintoihin, logiikoihin ja tietojen käsittelyihin. Pitkälti näihin asioihin sisältyvät tietokannat, palvelinhallinta sekä rajapintojen luonti ja hallinnointi. Näistä lisää alla olevissa kappaleissa.
Backend-kehittäjillä on käytettävissä työssään erilaisia ohjelmointikieliä, kuten Pythonia, PHP:ta, Rubyä jne. Nykypäivänä backend-kehittäjien on mahdollista hyödyntää myös samaa syntaksia, jota frontend-kehittäjät käyttävät, hyödyntämällä JavaScriptille toteutettua ajoympäristöä Node.js:ää.
Palvelimet
Palvelimet ovat järjestelmiä, jotka vastaanottavat pyyntöjä ja tarjoavat vastauksia eri sovellusten käyttöön. Backend-kehittäjät valitsevat ja asentavat palvelinohjelmiston, kuten Apache tai Nginx, joka toimii sovelluksen liikenteen välittäjinä. Lisäksi erilaiset pilvipalvelut, kuten AWS (Amazon Web Services) tai Google Cloud Platform, tarjoavat nykypäivänä joustavan ja skaalautuvan palvelinratkaisun moniin erilaisiin kokonaisuuksiin.
Palvelimet voivat myös käsitellä tietokantapyyntöjä ja muita sovelluksen tarvitsemia toimintoja. Backend-kehittäjät vastaavat näiden palvelinten suunnittelusta, konfiguroinnista ja ylläpidosta varmistaen, että sovellukset toimivat luotettavasti ja tehokkaasti.
Palvelimen konfigurointi voi sisältää palvelimen prosessorin, muistin ja levytilan hallinnan ja optimoinnin. Palvelinten konfiguroinnissa otetaan huomioon myös sovellusten vaatimukset, kuten tietokantojen tai käyttöjärjestelmien asetukset.
Kehittäjät varmistavat myös, että palvelimet toimivat asianmukaisesti ja reagoivat nopeasti mahdollisiin ongelmiin tai vikatilanteisiin. Palvelimien suorituskyvyn seuranta, virheiden kirjaaminen lokitietoihin ja järjestelmänvalvonta ovat tärkeitä osia, joilla voidaan tunnistaa ja korjata mahdollisia ongelmia. Ylläpitoon liittyy myös turvallisuuden ja suojauksen varmistaminen erilaisten ulkoisten hyökkäysten varalta.
Tietokannat ja tietokantakyselyt (SQL)
Tietokannat ovat merkittävä osa backend-kehitystä. Tietokantojen avulla verkkosovellukset voivat tallentaa, hakea ja hallita tietoja. Backend-kehittäjät vastaavat tietokantojen suunnittelusta, integroinnista ja käytöstä varmistaakseen, että sovellukset voivat käsitellä ja hyödyntää tarvittavaa tietoa. Lisäksi tiedon käsittely ja hakeminen tulee tehdä tehokkaasti sovelluksen hyvän suorituskyvyn ylläpitämiseksi.
Suosittuja tietokantaratkaisuja backend-kehityksessä ovat esimerkiksi relaatiotietokannat, kuten MySQL ja PostgreSQL, sekä dokumenttipohjaiset tietokannat, kuten MongoDB. Nämä tietokannat käyttävät erilaisia tiedon tallennus- ja hakumalleja, ja niiden valinta riippuu sovelluksen vaatimuksista.
Tietokantojen lisäksi tarvitaan tietenkin myös tapa keskustella näiden tietokantojen kanssa. Backend-kehittäjien rooliin kuuluu tietokantakyselyjen luominen, joilla suoritetaan tietojen lisääminen, päivittäminen, poistaminen ja hakeminen. Tietokantakyselyt suoritetaan useimmiten SQL-nimisellä kyselykielellä. Käyttäjätietojen tallentaminen, tuotteiden haku tai tilausten päivittäminen ovat yleisiä toimintoja, joita backend-kehittäjät toteuttavat tietokantakyselyjen avulla.
Lisäksi backend-kehittäjät vastaavat tietokantayhteyksien hallinnasta ja tietoturvasta. He määrittävät ja toteuttavat tietokantayhteydet sovelluksen ja tietokannan välillä. Tietoturvaan liittyvät asiat, kuten salaus ja käyttäjän tunnistus, on myös otettava huomioon, jotta tietokannan sisältö pysyy suojattuna.
Rajapinnat (API)
Rajapinnat ja integraatiot ovat myös olennainen osa backend-kehitystä. Ne käsittelevät eri järjestelmien ja sovellusten välisen tiedon jakamisen ja yhteensovittamisen.
Rajapinta toimii välipalikkana eri sovellusten tai järjestelmien välillä ikään kuin käyttöliittymänä. Se määrittelee, miten tiedonsiirto ja vuorovaikutus tapahtuu. Rajapintojen avulla sovellukset voivat esimerkiksi lähettää pyyntöjä, hakea tietoa, lähettää tai päivittää tietoja sekä suorittaa muita toimintoja toisen järjestelmän kanssa. Backend-kehittäjät suunnittelevat ja toteuttavat nämä rajapinnat ja määrittävät tiedon formaatin, kyselyt sekä toiminnat ja miten rajapinta antaa vastauksen.
Backend-kehittäjät voivat käyttää erilaisia rajapintaratkaisuja, kuten RESTful APIa (Representational State Transfer) tai GraphQL:ää, riippuen sovelluksen tarpeista ja vaatimuksista.
Rajapinnat tarjoavat joustavuutta ja skaalautuvuutta sovelluksille, koska ne voivat hyödyntää muiden järjestelmien tarjoamia palveluita tai tietoja. Lisäksi rajapintojen ja integraatioiden avulla sovellukset voivat toimia modulaarisesti ja hyödyntää parhaita saatavilla olevia ratkaisuja eri osa-alueilla.
Yhteenveto
Ymmärrät nyt vähän paremmin web-kehityksen kokonaisuutta. Jos sinulla on tarve web-kehitykselle, eikä web-kehitys ole aiheena itselläsi tai tiimilläsi hyppysissä, älä epäröi ottaa meihin yhteyttä. Voit tutustua myös lisää ohjelmistokehityksen palveluumme täältä.
