UX improvements with React
08.02.2017 Pete Ropponen

Sulava käyttökokemus uudella teknologialla

Lääkärikeskus Aava on yksi asiakkaistamme, jolla on erittäin korkeat vaatimukset käyttäjäkokemuksen suhteen. Pystyäksemme vastaamaan näihin odotuksiin kustannustehokkaasti, on tärkeää että käytössämme on palveluiden rakennusvaiheessa moderneimmat mahdolliset työkalut. Onneksemme Aava on ollut koko yhteistyömme ajan sitoutunut päivittämään teknologiaa uudempaan. Näin Aavallekaan ei ole aiheutunut turhan suuria kertakustannuksia järjestelmien päivittämisestä

Loppuvuodesta 2016 asetimme Aavan kanssa tavoitteeksi yhdistää heidän eri palveluidensa frontend-ratkaisut, jotka on toteutettu eri taustajärjestelmillä. Nykytilanteessa kaikissa järjestelmissä on perinteiseen tapaan oma käyttöliittymänsä, mikä on järjestelmien kasvamisen myötä tehnyt ylläpidosta haastavampaa. Siitä huolimatta, että olemme hyödyntäneet moderneja työkaluja nykyisten järjestelmien rakentamiseen, työ joudutaan käytännössä aloittamaan aina alusta joka järjestelmässä. Myös palveluiden käyttökokemuksen kehittäminen ei ole mahdollista äärettömiin, koska järjestelmät näyttävät keskenään hyvinkin erilaisilta.

Lähdimme liikkeelle Aavan Terveytesi-palvelun rakentamisesta. Projektin tavoitteena oli luoda nopeasti uusi palvelu, josta asiakas pystyy helposti hakemaan tietoja terveydestään, kuten vaikkapa diagnooseja ja ajanvarauksia.

Miksi päädyimme Reactiin?

Palvelun rakentaminen edellytti muutoksia olemassa olevaan arkkitehtuuriin. Jotta kehitystyö olisi pitkällä tähtäimellä kustannustehokasta, päätimme, että kaikkien ennen arkkitehtuuriuudistusta tehtävien toiminnallisuuksien on oltava käytettäviä uudessakin arkkitehtuurissa. Tämän vuoksi päädyimme keskittämään suurimman osan ajasta toimivien rajapintojen muodostamiseen. Tässä projektissa oli luonnollista luoda selaimessa toimiva sovellus, koska palvelu ei vaatinut paljoa business-logiikkaa rajapintojen ulkopuolella.

Ember.js sekä React.js valikoituivat arvioitaviksemme, koska näistä tiimiläisillä oli aikaisempia hyviä kokemuksia. Aluksi pyrimme arvioimaan, kumman järjestelmän tuominen nykyiseen arkkitehtuuriin olisi helpointa, mutta totesimme vertailun olevan melko hankalaa, sillä kumpikaan ei tuntunut täyttävän vaatimuksia, jotka alkuvaiheessa asetimme. Niinpä päädyimme vertailemaan yhteisöjen kokoja ja millä tavoin järjestelmiä on käytetty. Lopulta valitsimme Reactin, koska uskoimme sen olevan pitkällä tähtäimellä paremmin tuettu.

Miten projekti sujui?

Uuden teknologian käyttöönotto tuo aina mukanaan haasteita. Tässä projektissa haasteena oli ennen kaikkea se, miten moderni teknologia yhdistetään Aavan jo olemassa olevaan infrastruktuuriin sekä ohjelmistoihin, vaikka kokonaisuus sinänsä olikin jo ennestään moderni. Lisäksi kaikilla tiimimme jäsenillä ei ollut aiempaa kokemusta modernista JavaScriptistä (es2016+). Mutta mehän pidämme haasteista, joten huolehdimme projektin aikana siitä, että kaikki tiimiläiset saivat yhtäläiset valmiudet kehittää projektia.

Aavan olemassa olevaa infrastruktuuria on pidetty ajan tasalla koko yhteistyömme ajan, mutta siitäkin huolimatta kehitystyö tuntui alussa etenevän hitaasti, koska jouduimme keskittymään paljon infrastruktuurin kehittämiseen – pohjatyö vaati oman aikansa. Tähän oli syynä pääosin se, ettei Aavalla aiemmin ollut käytössä vastaavia JavaScript-toteutuksia.

Koska halusimme nopeuttaa projektin alkua, otimme paljon mallia boilerplate-tyyppisistä ratkaisuista. Tämä kuitenkin myöhemmässä vaiheessa kostautui, kun jouduimme selvittämään kopioituihin osiin liittyviä bugeja. Selvittäminen oli haasteellista, koska emme täysin ymmärtäneet kaikkia valintoja tai heikkouksia, joita koodissa oli.

Kun saimme ensimmäiset komponentit valmiiksi, vauhti alkoi kiihtyä ja uusien toiminnallisuuksien teko sujua erittäin nopeasti. Koko projektiin meni lopulta noin kaksi kuukautta, ja noin puolet tästä ajasta käytettiin vanhan infrastruktuurin kehittämiseen. Sovellus on parhaillaan sisäisessä testauksessa ja se julkaistaan helmikuun aikana. 

Tekniset valinnat

Koska edelleenkin laajasti käytetty PHP 5.6 alkaa Aavan korkeiden standardien mukaan vedellä viimeisiään, päätimme tässä yhteydessä myös päivittää palvelun PHP 7.1:een, jotta saimme siihen lisää nopeutta ja uusia ominaisuuksia käyttöön. Monet PHP-kirjastot ovat jo lopettaneet tuen PHP 5 -versioille, mikä omalta osaltaan hankaloittaa uusien asioiden kehittämistä PHP 5 -versioiden päälle. Aava oli ensimmäinen asiakkaamme, joka otti PHP 7.1 -version käyttöön olemassa olevaan projektiin. Tämä herätti myös paljon kiinnostusta Druidin ulkopuolella, joten olemmekin päättäneet kirjoittaa tästä erillisen blogijutun myöhemmin.

Taustajärjestelmänä sovellukselle toimii tällä hetkellä Drupal 7. Suunnittelemamme API on tehty niin, että frontend-sovellus on tulevaisuudessa helppo siirtää minkä tahansa alustan päälle. Näin Aavan ei tarvitse rajoittaa teknisiä valintojaan meidän teknisten valintojemme vuoksi. Tähän ratkaisuun päädyttiin, koska Drupalin päälle on rakennettu merkittävä määrä olemassa olevia toiminnallisuuksia, jotka nopeuttivat sovelluksen kehittämistä.

API-dokumentaatioiden tekemiseen käytimme Swagger-työkalua. Swagger-dokumentaatio on koostettu JSON-datasta. Samaa tiedostoa käytetään myös rajapintojen generoimiseen.

Yhteenveto

Projekti kokonaisuudessaan oli erittäin mielenkiintoinen. Etenkin jatkuva uusien teknologioiden hyödyntäminen pitää mielen virkeänä ja motivoituneena. Tämä myös varmistaa Aavan järjestelmille pitkän käyttöiän, ja mahdollisimman matalat kustannukset rakennusvaiheessa.


Projektitiimissä olivat mukana Bart, Lauri E, Lauri A, Juho ja Pete. Kiitokset Lauri E:lle avusta tämän blogijutun kirjoittamisessa!

Lue myös

Lisää uusi kommentti

Puhdas teksti

  • HTML-merkit ovat kiellettyjä.
  • Rivit ja kappaleet päätetään automaattisesti.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
  • Verkko- ja sähköpostiosoitteet muutetaan automaattisesti linkeiksi.