Joku taisi jo aiemmin ehdottaa, että tekisin frontin sivustooni (www.sf-bibliografia.fi) Reactilla. Silloin tyrmäsin ajatuksen, kun oli ihan tarpeeksi opettelemista ja ihmettelemistä muutenkin. Tässä viestissä/ketjussa avaan vähän ajatuksia, kun aika niukasti tällaisesta siirrosta tuntuu löytyvän tietoa. Kommentteja, ehdotuksia jne saa esittää.
Nyt olen alkanut lämmetä ajatukselle. Siihen on pari syytä: ensinnäkin uskoisin, että voin tehdä homman sivu kerralla, kaikkea ei tarvitse tehdä ensin valmiiksi. Toiseksi sivuston käytettävyyden parantaminen nykyisessä ympäristössä on turhan työlästä. Kolmanneksi jinja on kohtuullisen karsea templaattikieli ja templaattini ovat jo melko hankalia ylläpidettäviä. Neljänneksi voisin siinä samalla tehdä vihdoin testit kuntoon.
Ajattelin aloittaa kirjoittamalla jonkun sivun vaatiman API-kutsun. Teen API:t saman tien blueprintiksi. Voisin ensin tehdä ihan ilman sen kummempia apupaketteja, mutta ehkä joku Flask-RESTful voisi olla ihan hyvä apu jossain vaiheessa. Mutta mitenkäs tuohon kannattaisi rakentaa testaus? Vai pitäisikö koko homma tehdä Postmanilla saman tien?
Sen jälkeen ajattelin polkaista pystyyn Typescript-pohjaisen React-projektin ihan omaan repoonsa. En siis sotke Flaskia ja Reactia samaan, kuten joissakin ohjeissa neuvotaan. Pysyy paremmin hallittavissa näin. Aloitan sellaisesta sivusta, joka ei vaadi autentikaatiota tai muuta monimutkaista. Koska Flask on portissa 5000 ja React portissa 3000, niin näiden pitäisi pystyä elämään rinnakkain. Jos ei muuten, niin käyttämällä juurikin noita porttinumeroita osoitteissa. Mutta tätä pitää vielä kokeilla. Olisi kiinnostavaa kuulla, jos jollain on tähän jotain ideaa. Sen verran kokeilin, että nuo palvelut todellakin pyörivät sulassa sovussa ainakin kehityskoneessa ja pääsin molempiin sisään. Mutta parempi olisi, jos joku http://www.sf-bibliografia.fi:3000/work/1000 -tyyppinen osoite ohjautuisi Flaskille. Tällä tavalla olisi helppo joskus tulevaisuudessa, kun konversio on tehty, vaihtaa palvelimelta oletusportti 5000 -> 3000.
Frameworkiksi otan React-Bootstrapin, näin uusien sivujen ulkoasua ei tarvitse sen kummemmin sovitella vanhojen kanssa (jotka on tehty juurikin Bootstrapilla). Mutta ajattelin poimia tarvitsemiani komponentteja komponenttikirjastoista. Tein pientä vertailevaa tutkimusta ja PrimeReactissa näyttäisi olevan jokseenkin kaikki tarvitsemani jutut. Varmaan kymmenisen kirjastoa tsekkasin, Mantine oli seuraavaksi paras.
Frontin testaamiseen Jest + React Testing Library vaikuttaa hyvältä kombolta.
Se on mainittava, että tavalliset käyttäjät näkevät vain pienen osan sivustoon käytetystä työstä. Ylläpitopuoli on vienyt suurimman osan ajasta. Siellä on mutkikkain UI, ja myös suurin osa kehitystarpeista tällä hetkellä. Normikäyttäjien kannalta parannusideoita on mm. erilaisten listojen lajittelun mahdollistaminen. Kaiken kaikkiaan kirjasin seuraavanlaisia tarpeita komponenteilta:
Näistä lähtökohdista ajattelin lähteä liikkeelle. Riippuen, miten homma lähtee liikkeelle, konversio tapahtuu joko pitkän ajan kuluessa tai sitten annan periksi. Mutta tärkeintä siis on se, että en tee koko hommaa kerralla valmiiksi, koska se olisi helposti liikkuvaan maalitauluun tähtäämistä kun nykyinenkin toteutus vaatii huomiota ja tässä menee aikaa, kun kuitenkin omalla ajalla teen ja muutakin tekemistä on elämässä.
Nyt olen alkanut lämmetä ajatukselle. Siihen on pari syytä: ensinnäkin uskoisin, että voin tehdä homman sivu kerralla, kaikkea ei tarvitse tehdä ensin valmiiksi. Toiseksi sivuston käytettävyyden parantaminen nykyisessä ympäristössä on turhan työlästä. Kolmanneksi jinja on kohtuullisen karsea templaattikieli ja templaattini ovat jo melko hankalia ylläpidettäviä. Neljänneksi voisin siinä samalla tehdä vihdoin testit kuntoon.
Ajattelin aloittaa kirjoittamalla jonkun sivun vaatiman API-kutsun. Teen API:t saman tien blueprintiksi. Voisin ensin tehdä ihan ilman sen kummempia apupaketteja, mutta ehkä joku Flask-RESTful voisi olla ihan hyvä apu jossain vaiheessa. Mutta mitenkäs tuohon kannattaisi rakentaa testaus? Vai pitäisikö koko homma tehdä Postmanilla saman tien?
Sen jälkeen ajattelin polkaista pystyyn Typescript-pohjaisen React-projektin ihan omaan repoonsa. En siis sotke Flaskia ja Reactia samaan, kuten joissakin ohjeissa neuvotaan. Pysyy paremmin hallittavissa näin. Aloitan sellaisesta sivusta, joka ei vaadi autentikaatiota tai muuta monimutkaista. Koska Flask on portissa 5000 ja React portissa 3000, niin näiden pitäisi pystyä elämään rinnakkain. Jos ei muuten, niin käyttämällä juurikin noita porttinumeroita osoitteissa. Mutta tätä pitää vielä kokeilla. Olisi kiinnostavaa kuulla, jos jollain on tähän jotain ideaa. Sen verran kokeilin, että nuo palvelut todellakin pyörivät sulassa sovussa ainakin kehityskoneessa ja pääsin molempiin sisään. Mutta parempi olisi, jos joku http://www.sf-bibliografia.fi:3000/work/1000 -tyyppinen osoite ohjautuisi Flaskille. Tällä tavalla olisi helppo joskus tulevaisuudessa, kun konversio on tehty, vaihtaa palvelimelta oletusportti 5000 -> 3000.
Frameworkiksi otan React-Bootstrapin, näin uusien sivujen ulkoasua ei tarvitse sen kummemmin sovitella vanhojen kanssa (jotka on tehty juurikin Bootstrapilla). Mutta ajattelin poimia tarvitsemiani komponentteja komponenttikirjastoista. Tein pientä vertailevaa tutkimusta ja PrimeReactissa näyttäisi olevan jokseenkin kaikki tarvitsemani jutut. Varmaan kymmenisen kirjastoa tsekkasin, Mantine oli seuraavaksi paras.
Frontin testaamiseen Jest + React Testing Library vaikuttaa hyvältä kombolta.
Se on mainittava, että tavalliset käyttäjät näkevät vain pienen osan sivustoon käytetystä työstä. Ylläpitopuoli on vienyt suurimman osan ajasta. Siellä on mutkikkain UI, ja myös suurin osa kehitystarpeista tällä hetkellä. Normikäyttäjien kannalta parannusideoita on mm. erilaisten listojen lajittelun mahdollistaminen. Kaiken kaikkiaan kirjasin seuraavanlaisia tarpeita komponenteilta:
- Tag/autocomplete. Eli kontrolli, jossa voi hakea kannasta arvoja kirjoittamalla ja ylläpitäjä voi mahdollisesti lisätä tästä suoraan uusia arvoja (nimensä mukaisia tageja esimerkiksi).
- Search box - joku fiksu hakukenttä, joka näyttäisi koko ajan tuloksia ja näyttäisi ne muotoiltuna. Ehkä onnistuu edellisellä komponentilla, en ole varma. Poikkeaa vähän kuitenkin ajatukseltaan, kun tulokset sisältää monenlaisia eri asioita, kuten henkilöitä, teoksia ja artikkeleita.
- In-place editing. Yksi tavoite alunperin minulla oli ylläpitonäkymissä, että ylläpitäjä voisi muokata kenttiä suoraan, samaan tapaan kuin esimerkiksi Jirassa. Tämä ei ole toteutunut, vaan näyttö pitää vaihtaa muokkaustilaan. Ajattelin tutkia, onnistuisiko nyt. Aika moni komponentti on mahdollista disabloida ei-ylläpitäjiltä. Nykyinen ratkaisu tuottaa turhan monimutkaisia templaatteja ja vaikeuttaa ylläpitoa rutkasti.
- Rich-text-editori.
- Modaalit.
- Vuosiluvun valinta (siis pelkän vuosiluvun). Ei kovin tärkeä, onnistuuhan tuo ihan numerokentälläkin, mutta olisihan tuo hienompi.
- Navbar. Löytyy Bootstrapista, joten käytän sitä.
- File upload. Ellei löydy jotain olennaisia parannuksia, niin käytän Bootstrapin versiota.
- Tri-state checkbox. Minulla on muutamia kenttiä, joilla on kolme arvoa: "Ei tietoa", "Kyllä" ja "Ei". Nyt nämä valitaan radiobuttoneilla. Tri-state checkbox olisi parempi.
- Picklist/orderlist. Joitakin asioita, kuten novelleita kirjassa, pitäisi voida järjestellä helposti.
- DataView. Olisi tarvetta esittää painoksia tiivimmässä muodossa, tällainen komponentti olisi siihen täydellinen.
- Details List / Data table. Kontrolli, jossa käyttäjä voi valita haluamansa rivit. Microsoftin Fluid UI:ssa olisi tarvitsemaani käyttöön aika lailla täydellinen (Details list). PrimeReactissa Data table on sinne päin, mutta taitaa pientä tunkkaamista vaatia.
Näistä lähtökohdista ajattelin lähteä liikkeelle. Riippuen, miten homma lähtee liikkeelle, konversio tapahtuu joko pitkän ajan kuluessa tai sitten annan periksi. Mutta tärkeintä siis on se, että en tee koko hommaa kerralla valmiiksi, koska se olisi helposti liikkuvaan maalitauluun tähtäämistä kun nykyinenkin toteutus vaatii huomiota ja tässä menee aikaa, kun kuitenkin omalla ajalla teen ja muutakin tekemistä on elämässä.
Viimeksi muokattu: