Räätälöidyn web-sovelluksen suunnittelu ja toteutus

Vierityspalkin Julkaisut-palstalla on julkaistu viimeisen parin vuoden aikana lähes 300 työtä, joista useampi kymmenen voidaan luokitella erittäin räätälöidyksi web-sovellukseksi. Tässä artikkelissa tehdään katsaus näihin räätälöidympiin töihin.

Räätälöityjen web-sovellusten toteutushan on kasvanut selvästi viime vuosina, kun enää ei mielellään tehdä julkaisujärjestelmien, kuten WordPressin tai Drupalin, päälle monimutkaisia sovellusmaisia toteutuksia. Syynä eriytymiseen on myös Javascript-ekosysteemin tasainen kehitys ja erityisesti erilaisten puolivalmiiden sovelluskehysten kehittyminen viime vuosina. Tämänkin katsauksen käyttöliittymäkerroksista suurin osa on tehty React- tai Vue-sovelluskehyksellä.

Oma osansa buumiin on toki siinäkin, että verkkopalveluiden merkitys monelle liiketoiminnalle on kasvanut, ja yhä useampi organisaatio tarvitsee verkkoon sovellusmaisia osioita, kuten tuotteiden konfiguraattoreita, tarjouspyyntökoneita tai erilaisia asiointisovelluksia.

Räätälöityjen sovellusten kaksi tasoa: frontend ja backend

Teknisesti räätälöityjen web-sovellusten kohdalla on yleensä kyse vähintään kahdesta eri teknologiasta. Yksi osa-alue on jo aiemmin mainittu pintakerroksen (ns. frontend) Javascript-sovelluskehys, jolla toteutetaan käyttäjille näkyvä kerros sovelluksesta. Tällöin puhutaan yleensä Reactista, Angularista tai Vuesta tai jostain toisesta hyvin samantyyppisestä Javascript-sovelluskehyksestä.

Toinen osa-alue on pintakerroksen takana oleva sovelluksen dataa ja toimintalogiikkaa käsittelevä kerros (ns. backend). Tämä voi olla myös Javascript-sovelluskehykseen nojaava ratkaisu (kuten Node.js:aan), mutta se voi olla myös mikä tahansa muu ohjelmointiratkaisu. Moni pieni ja keskikokoinen digitoimisto on Suomessa vahvasti php-tekijä, joten moni suosii taustakerroksessa php-maailman sovelluskehyksiä, kuten Laravellia.

Taustasovelluksen ohjelmointiratkaisu ei näy mitenkään käyttäjille, joten nämä ratkaisut yleensä perustuvat lähinnä siihen mikä on valitun toimiston suosima ohjelmointiratkaisu. Microsoft-firmat tekevät taustasovellukset .Netillä, Java-talot taas Javalla, ja niin edespäin. Aina räätälöityä taustasovellusta ei edes tarvita, jos esimerkiksi taustajärjestelmänä toimii jokin valmisjärjestelmä, joka osaa palvella pintakerrosta, kuten jokin ERP-järjestelmä.

Asiakkaiden kannattaa olla kiinnostunut teknologiavalinnoista

Asiakkaiden kannalta kummankin kerroksen teknologiavalinta on merkityksellinen kustannusten näkökulmasta ja jatkokehityksen helppouden osalta.

Tällä alueella teknologiat voivat tulla nopeasti tiensä päähän. Muutama vuosi sitten melkein kaikki halusivat tehdä web-sovelluksia Angular 1 -sovelluskehyksellä, mutta tuuli kääntyi nopeasti Angularin taustalla olevan Googlen lopetettua ykkösversion kehittämisen.

Kehittäjien mieltymykset voivat myös muuttua nopeasti ja sitä myötä toimistojen prioriteetit. Erityisesti räätälitekemisen saralla toimistojen mieltymykset ovat viime aikoina muuttuneet jopa vuoden-kahden välein.

Asiakkaiden kannattaa huomioida, että nopeat muutokset teknologiatrendeissä voivat aiheuttaa todella merkittäviä kustannuksia lyhyelläkin aikavälillä, kun joku sovelluksen osa-alue joudutaan koodaamaan uusiksi. Toimistojen kannalta nopea muutostahti harvoin on kovin iso ongelma, koska koodarit kyllä oppivat uudet sovelluskehykset kohtuullisen nopeasti. Uudelleenkoodaukseen joutuvat sovellukset voidaan nähdä jopa hyvänä liiketoimintana, joten toimistojen suosituksia uusimpien välineiden käyttämisestä ei kannata aina totella sokeasti.

Eksoottiset valinnat taustasovellusten puolella voivat myös kostautua jatkokehitysvaiheessa. Esimerkiksi Pythoniin perustuvalla Django-sovelluskehyksellä on Suomessa oma kannattajakuntansa, mutta sovelluskehitystä tilaustyönä aktiivisesti tekeviä yrityksiä ei ole kovin montaa. Asiakkaalle pieni joukko saatavilla olevia kehittäjiä voi tarkoittaa hyvin vahvaa sidosta sovelluksen toteuttaneeseen yritykseen. Joitain vuosia takaperin myös esimerkiksi Ruby on Rails -sovelluskehys oli monen toimiston mielestä parasta mitä maailmasta löytyy, ja vaikka kyseisellä sovelluskehyksellä on ehdottomasti vahvuutensa, on osaajien saatavuus Suomessa hiipunut sittemmin merkittävästi.

Mitä pidempää elinkaarta haaveilee omalle sovellukselle ja mitä enemmän arvelee jatkokehitystarpeita olevan, sitä tärkeämpää on tehdä kestävät teknologiavalinnat, joille löytyy myös riittävästi jatkokehityshommista kiinnostuneita kumppaneita.

Laajoihin web-sovelluksiin voi lisäksi liittyä monia muitakin teknisiä komponentteja, kuten pääsynhallintaan tai rajapintakerrokseen liittyviä ratkaisuja, joiden kohdalla voi ilmetä samoja edellä mainittuja haasteita.

Katsaukseen valittiin mukaan yhteensä 18 työtä

Julkaisut-palstalta poimittiin tähän katsaukseen vuosilta 2019 ja 2020 yhteensä 18 työtä. Otos ei ole valtava, mutta kuitenkin kohtuullinen. Työt edustavat myös kohtuullisen samankaltaisia toteutuksia, koska kyse on pääosin alle 60 000 euron budjetin töistä.

Suurin osa on 30 000 ja 60 000 euron välissä. Muutama on tehty alle 30 000 euron budjetilla. Pari projektia lienee kuvauksesta päätellen aika paljonkin yli ilmoitetun 60 000 euron (”yli 60 000 euroa” on palstan suurin luokka).

Suurin ryhmä ovat erilaiset hakusovellukset, tarjouspyyntökoneet ja asiointisovellukset (kuten ajanvaraussovellukset). Joukossa on myös esimerkiksi oppimiseen liittyviä sovelluksia, karttasovelluksia ja räätälöityjä chat-ratkaisuja.

Headless-tyyppisiä verkkosivustototeutuksia ei tähän katsaukseen otettu mukaan yhtään kappaletta, koska näiden katsottiin olevan lähinnä teknisesti erikoisemmalla mallilla tehtyjä julkaisujärjestelmätoteutuksia.

Muutamissa tämän katsauksen töissä on taustasovelluksena WordPress-ympäristö, mutta palvelut ovat käyttäjien näkökulmasta erikoissovelluksia, joissa käyttöliittymäkerros on perustellusti tehty ilman WordPressiä.

Käytännössä kaikkien katsauksen töiden käyttöliittymäkerros on tehty jollain Javascript-sovelluskehyksellä.

React on ylivoimaisesti suosituin käyttöliittymäkerroksen teknologia

Suosituin Javascript-sovelluskehys on ylivoimaisesti React. Yhteensä 11 työtä hyödyntää Reactia käyttöliittymäkerroksen toteutuksessa. Toiseksi yltävällä Vuella on tehty viisi (5) työtä. Angular saa kaksi (2) mainintaa.

Reactin johtava asema on erittäin selkeä, kun puhutaan laajoista web-sovelluksista. Vuen suosio on kuitenkin selvästi kasvanut viimeisen vuoden aikana, etenkin jos tarkastellaan laajemmin Julkaisut-palstan töitä. Vue on usein sivuroolissa täydentämässä isompia WordPress-toteutuksia. Täysiveriset Vue-sovellukset ovat vielä aika tuore ilmiö.

Tosin jos headless-verkkosivustot olisi otettu mukaan katsaukseen, olisi Reactin ylivoima vieläkin selkeämpi.

Taustasovellusten teknologiat ovat sitä sun tätä, kuten odotettiinkin

Taustasovellusten teknologioissa on odotetusti todella paljon kirjoa. Moni sovellus hakee tiedot ja kommunikoi suoraan jonkun liiketoimintajärjestelmän kanssa, esimerkiksi erilaisten ERP-järjestelmien kanssa. Tällöin sovelluksen toteuttajalta vaaditaan erityisen hyvää integraatio-osaamista. Esimerkiksi Trimedian Autokorjaamo.fi-sovellus ei tarvitse minkäänlaista sisällönhallintaa, koska se hakee kaikki tietonsa erillisestä autokorjaamojen käytössä olevasta järjestelmästä. Myös esimerkiksi Redlandin toteuttama Rinta-Joupin autoliikkeen ajoneuvohaku hakee kaikki sisältönsä autoliikkeen ERP-järjestelmästä. Pixelsin toteuttama vauriokamera-sovellus lähettää tallentamansa tiedot Autoklinikan ERP-järjestelmään jatkokäsittelyä varten.

Moni sovellus myös nojaa WordPress-ympäristöön taustajärjestelmänä tai sisällönhallintaratkaisuna. Tällöinkin sovelluksen toteuttajalta vaaditaan integraatio-osaamista, koska käyttöliittymäkerros kommunikoi WordPressin kanssa rajapintojen kautta. Esimerkiksi Evermaden toteuttama Defi.fi hyödyntää WordPressiä taustajärjestelmänä, johon esitettävät tiedot tallennetaan laajan sisällöntuottajajoukon toimesta, mutta käyttäjille näkyvä sovellus on tehty Reactia ja Google Maps -rajapintaa hyödyntäen.

Poutapilven toteuttama Roope-karttasovellus on hyvin vastaava toteutus, jossa WordPress huolehtii kartalla näytettävien tietojen tallentamisesta ja ylläpidosta, mutta käyttäjille näkyvä sovellus on tehty React-sovelluksena.

Muissa taustasovelluksen vaativissa töissä on käytetty esimerkiksi Nodea, Laravellia tai Google Firebasen palveluita. Esimerkiksi Mediapoolin toteuttama ÄLY -oppimisympäristösovellus hyödyntää php-sovelluskehys Laravellia taustasovelluksen toteutuksessa. Googlen Firebasea hyödyntävät sovellukset olivat tässä katsauksessa kohtuullisen yksinkertaisia sovelluksia, jotka hyödynsivät esimerkiksi Firebasen kirjautumiseen liittyviä palveluita.

Pixels ottaa kärkipaikan kokeneimpana toteuttajana

Eniten räätälöityjen web-sovellusten referenssejä on viimeisen parin vuoden aikana kerännyt helsinkiläinen Pixels, jonka tekemiä toteutuksia on mukana katsauksessa viisi (5) kappaletta. Pixels on vielä varsin tuore ja pienikokoinen toimisto, mutta kokemusta on jo kertynyt kohtuullisesti verrattuna moniin kilpailijoihin.

Toiseksi eniten referenssejä löytyy tamperelaiselta Geniemiltä, jonka töitä on katsauksessa kolme (3) kappaletta. Geniem on erityisesti Reactiin keskittynyt jo varsin isokokoinen digitoimisto, jolta löytyy myös vahvaa integraatio-osaamista.

Kahdella referenssillä katsauksessa ovat mukana helsinkiläinen Evermade ja jyväskyläläinen Trimedia. Kummatkin ovat jo astetta isompia toimistoja, joilta löytyy myös kokemusta teknisesti vaativista toteutuksista.

Yhdellä työllä katsauksessa ovat mukana G-Works, Into-Digital, Agenda Helsinki, Mediapool Finland, Exove ja Redland.

Vaikka oma tarve olisi uniikki, ei se aina tarvitse täysin räätälitoteutusta

Lopuksi kannattaa huomata, että tässä ei ole otettu mukaan toteutuksia, jotka on tehty täysin tai lähes täysin esimerkiksi WordPressillä, mutta joita ei ole luokiteltu Vierityspalkin Julkaisut-palstalla asiakaskohtaisiksi tai räätälöidyiksi sovelluksiksi. Esimerkiksi Trimedian toteuttama Kylämme-verkkopalvelu on hyvä esimerkki hyvin sovellusmaisesta toteutuksesta, joka on kuitenkin tehty täysin WordPressin päälle. Tämä on hyvä esimerkki siitä, että aina ei tarvitse koodata täysin räätäliä, vaikka aluksi työ saattaisikin kuulostaa räätälitoteutuksen tarvitsevalta asialta.

Esimerkiksi karttasovelluksia löytyy Julkaisut-palstalta runsaasti, ja näistä vain muutama on tehty nojaten kaksitasoiseen arkkitehtuuriin, jossa Javascript-sovelluskehyksellä on iso rooli. Tämä kuvaa hyvin tämän hetken tilannetta alalla. Joku toimisto valitsisi samaan tehtävään raskaamman arkkitehtuurin, joku toinen toimisto tekisi taas saman työn yksinkertaisemmalla arkkitehtuurilla.

Tässäkin katsauksessa on mukana töitä, jotka joku toinen toimisto olisi saattanut tehdä vähemmän räätälitoteutuksena. Esimerkiksi Geniemin toteuttama Business Tampere yritystietopalvelu on hyvin rikas verkkopalvelu, jonka mahdollistavat lukuisat vaativat integraatiot ja jonka käyttöliittymäkerroksessa on paljon näyttävää datan visualisointia. Täysin räätälinä tehty toteutus on varmasti perusteltavissa, mutta aivan varmasti joku toinen toimisto olisi voinut perustella teknisen toteutuksen WordPressiin tai Drupaliin nojaavana ratkaisuna.

Asiakkaiden kannattaakin olla tarkkana, koska monissa tapauksissa eri mallien kustannuserot voivat olla todella suuria, vaikka loppukäyttäjälle näkyvä sovellus voi tuntua hyvin samankaltaiselta.

Alalla käytettävät teknologiat ja toteutusmallit eivät ole millään tapaa vielä vakiintuneet. Uusia teknologioita ja tapoja keksitään jatkuvasti. Toimistojen välillä on suuria eroja osaamisessa ja näkemyksissä. Toimistot myös suosivat yleensä niitä malleja, jotka ovat heille itselleen tutuimpia tai mieluisimpia. Tämä on tärkeätä asiakkaana tiedostaa.

Muiden asiakkaiden kokemuksia kannattaa selvittää

Kannattaakin kuunnella useamman toimiston näkemyksiä ennen oman arkkitehtuuriratkaisun ja teknologioiden valintaa. Erityisen hyödyllistä on keskustella muiden asiakkaiden kanssa, jotka ovat jo oman sovelluksensa tehneet, koska isoimmat erot eri arkkitehtuurimallien välille syntyvät tyypillisesti vasta jatkokehitysvaiheessa.

Monella teknisellä mallilla voi saada hyvän web-sovelluksen tehtyä, mutta sovellusten kustannuksissa, elinkaaressa ja jatkokehitettävyydessä voi olla todella suuria eroja.

Lue lisää: Web-sovellukset ja näiden tekniikat – kaikki artikkelit Vierityspalkissa

PS. Jos kaipaat riippumatonta asiantuntijan näkemystä verkkopalvelun jatkokehitykseen, uudistukseen tai teknologian vaihtamiseen, kannattaa tutustua North Patrolin konsultointipalveluihin. North Patrol tuntee räätälöidyt sovellukset ja niiden teknologiat ja auttaa lukuisia asiakkaitaan uudistuksissa ja verkkopalveluiden jatkokehityksen suunnittelussa.