PHZ:n Severi Suominen: Autosave-toiminnon koodaaminen työkaluina React ja Redux

PHZ Full Stackin tuntikirjanpitojärjestelmän automaattista tallennusta haluttiin parantaa. Koodaaja Severi Suominen kehitti järjestelmän autosave-toimintoa Reactilla ja Reduxilla.

PHZ Full Stackilla on talon omien koodaajien kehittämä tuntikirjanpitojärjestelmä (TKP), johon työntekijät raportoivat työtuntinsa laskutusta ja palkanmaksua varten. TKP:n front end on toteutettu Reactilla ja back end Node.js:llä.

Järjestelmän toimivuutta haluttiin kehittää lisäämällä siihen automaattinen tallennus. Näin käyttäjän ei tarvitsisi huolehtia syöttämiensä tietojen tallentamisesta, vaan ne tallentuisivat tietokantaan automaattisesti.

Autosave-ominaisuuden ei kuulu näkyä käyttäjälle

Kun toteutetaan autosave-ominaisuus, moni asia on tehtävä eri tavalla kuin tavallisessa tallennuksessa. Erilaiset event listenerit ja ajastukset ovat erittäin tärkeitä hyvän ja tehokkaan autosave-ominaisuuden toteuttamisessa. Käyttäjän ei kuulu huomata, että data tallentuu ja sovellus päivittyy taustalla.

TKP:n front endissa sama save request sekä tallensi syötetyt tiedot back endiin että päivitti tiedot käyttäjän näkymään.

Ongelma oli siinä, että aina tallennusta tehdessä, juuri tallennettu data tallennettiin takaisin state storeen. Näin ollen staten mutatointi aiheutti syöttönäkymään uudelleenrenderöinnin.

Autosave-ominaisuuden kannalta tämä ei ole haluttu toiminnallisuus. Se aiheutti esimerkiksi syöttökenttien fokuksen häviämisen kesken kirjoittamisen sekä teki käyttökokemuksesta muutenkin epämiellyttävän tökkivän.

Redux hyödyllinen etenkin isoissa React-projekteissa

TKP hyödyntää Reactin tukena Reduxia statejen hallinnassa. Redux on Reactin kanssa käytettävä ennustettavaan tilanhallintaan pohjautuva state management -kirjasto. Varsinkin isoissa React-projekteissa se on erittäin hyödyllinen ylläpidettävyyden kannalta.

Reduxissa kaikki statet on tallennettu samaan central storeen, joka on kaikkien komponenttien käytössä. Reduxin unidirektionaalisen flown ja yksinkertaisen rakenteen ansiosta oli helppo selvittää ongelman syy ja paikantaa ongelmakohdat koodista.

Ajastin kuuntelee hiirtä ja näppäimistöä

Käyttäjän pitäisi pystyä tarvittaessa kirjoittamaan jopa useita minuutteja putkeen, joten tallennusrequestin tulisi tapahtua taustalla huomaamatta jatkuvasti. Tämän takia tallennusrequestin yhteydessä tapahtuvasta datan tallentamisesta state storeen oli luovuttava.

Kun käyttäjä lopettaa kirjoittamisen, uusi tallennettu data on kuitenkin haettava, sillä syöttönäkymän muiden komponenttien tulee päivittyä. Siksi erottelin datan haun serveriltä ja state storeen tallentamisen omaksi fetch requestikseen.

Tämän muutoksen jälkeen automaattinen tallennus toimi erittäin hyvin, mutta myös fetch requestin tekemistä varten tuli kehittää logiikka.

Koodasin ajastimen, jotta ohjelma tietäisi, milloin käyttäjä on lopettanut kirjoittamisen. Ajastin kuuntelee jokaista hiiren tai näppäimistön klikkausta ja aktivoituu, kun käyttäjä aloittaa kirjoittamisen. Joka kerta, kun käyttäjä kirjoittaa tai klikkailee syöttökenttää, ajastin resetoidaan.

Ajastinta hyödyntäen oli helppo tehdä fetch request aina silloin, kun käyttäjä on varmasti lopettanut kirjoittamisen. Näin tunteja kirjatessa säilyy hyvä käyttökokemus.

Lue lisää: Pariohjelmoinnilla aidoksi Full Stack -kehittäjäksi

PHZ Full Stackin avoimet IT-alan työpaikat

PHZ:n Severi Suominen on monipuolinen koodaaja: “Supervoimani ovat C#, Java, JavaScript ja React”

Peliala on intohimoni. Minua kiinnostaa erityisesti pelimoottoreiden kehitys, visualisoinnit ja simulaatiot. Pyöritän omaa PC-pelistudiota päivätyön ohella.

Tartun kuitenkin mielelläni kaikenlaisiin projekteihin, sillä haluan kehittyä monipuoliseksi osaajaksi. Kokemukseni kattaa niin IoT-järjestelmät kuin web-kehityksenkin muun muassa koulutuksen, maanpuolustuksen, terveydenhuollon ja energiantuotannon aloilla.

Projekteista on erityisesti jäänyt mieleen Opetushallituksen Opintopolku-järjestelmän kehittäminen. Projekti oli todella iso, ja opin tekemään töitä jopa 100 muun kehittäjän kanssa. Pääohjelmointikielinä olivat Java ja JavaScript.

Millainen olet ohjelmistokehittäjänä?

Tykkään työskennellä haastavissa projekteissa, joissa opin paljon uusia teknologioita. Vahvuuteni onkin, että minut voi heittää projektiin kuin projektiin.

Hallitsen monia eri ohjelmointikieliä ja teknologioita, mutta kaikkein vahvimpina voisin mainita C#:n, Javan, JavaScriptin ja Reactin. Seuraavaksi aion opetella Rust-ohjelmointikielen, joka on ikään kuin parempi versio C++:sta.

Olen ammattitaitoinen ongelmanratkaisija, joka saa nopeasti aikaan hyvää jälkeä. Etenkin kommunikoinnissa olen kehittynyt huimasti, kun olen saanut PHZ:lla projektien vetovastuuta.