Flutter – johdatus Googlen alustariippumattomaan ohjelmistokehykseen
Kirjoittanut Janne Mankinen Googlen Flutter on ollut jo julkaisustaan lähtien yksi hypetetyimmistä alustariippumattomista ohjelmistokehyksistä mobiilisovellusten kehittämiseen. Se on onnistunut haastamaan Facebookin React Nativen lähes kaikilla osa-alueilla. Nuoresta iästään huolimatta Flutter on näyttänyt paikkansa potentiaalisena ohjelmistokehyksenä modernin mobiilikehityksen työkalupakissa. Alkuperäinen versio Flutterista on julkaistu toukokuussa 2017. Minulla on pitkä kokemus ohjelmoinnista ja olen erikoistunut mobiilisovelluksien kehittämiseen, joten myös Flutterin kokeileminen on ollut mielessä jo pidempään. Päätin lähestyä Flutteria tilanhallinnan kautta, sillä se on yksi tärkeimmistä osa-alueista monimutkaisempia sovelluksia kehitettäessä ja antaa kuvaa työkalun monipuolisuudesta.
Flutter lyhyesti
Flutter on Googlen kehittämä avoimen lähdekoodin ohjelmistokehys. Sen avulla on mahdollista luoda sovelluksia mobiilille, työpöydille ja verkkoselaimille yhdellä koodipohjalla. Ohjelmointikielenä käytetään Googlen vuonna 2011 julkaisemaa Dartia, joka on olio-orientoitunut päätelaitteille suunniteltu ohjelmointikieli. Dart tarjoaa Flutterille tiukan tyypityksen ja AOT (Ahead Of Time) -käännöksen, joiden avulla on helpompi luoda nopeita ja ennakoitavia sovelluksia. Tiukka tyypitys pakottaa asetettavat tietotyypit oikeiksi jo kehitysvaiheessa vähentäen ylimääräistä työtä, jota tulee esimerkiksi React Nativen PropType-määritysten kanssa. Sovellukset käännetään lopulta kokonaan natiiviksi koodiksi, jolloin suorituskyvyn luvataan olevan JavaScript-siltausta parempi ja toimivan identtisesti kaikilla alustoilla. Statistan mukaan Flutter on noussut toiseksi suosituimmaksi alustariippumattomaksi ohjelmistokehykseksi, jääden enää vain muutaman prosentin React Nativen taakse.
Ensivaikutelma
Flutter vaikuttaa yllättävän kypsältä ja pitkälle mietityltä ohjelmistokehykseltä. Mukana tulee paljon hyödyllisiä lisätyökaluja, jotka helpottavat sovelluskehittäjän arkea. Tärkeimpänä pidän nopeaa koodin päivittymistä laitteelle, joka parhaassa tapauksessa onnistuu jopa nollaamatta sovelluksen tilaa. Tällöin esimerkiksi napin toimintaa on mahdollista muuttaa kesken suorituksen ja testata välittömästi ilman tarvetta pitkälle käännösprosessille tai sovelluksen uudelleen käynnistämiselle. Toisena hyödyllisenä toimintona on Flutter Doctor, joka auttaa tunnistamaan ongelmia Flutterin ja muiden välttämättömien riippuvuuksien asennuksessa ja toiminnassa. Lisäksi plussana on koodin automaattinen muotoilu nappia painamalla.
Kehityskielenä käytetty Dart tuntuu aluksi vieraalta. Tuntumassa on syntaksin vuoksi paljon tuttua C-kielestä ja JavaScriptistä, mutta erityisesti käyttöliittymien kirjoittaminen vaatii totuttelua natiivikehityksen ja React Nativen jälkeen. Google on arvioinut, että Flutterin oppimiseen kuluu ohjelmistokehittäjältä keskimäärin kolme viikkoa, joka voi olla melko lähellä totuutta. Leikkimään pääsee kuitenkin jo parissa minuutissa ja internetissä on yllättävän paljon itseopiskelumateriaalia sekä opetusvideoita, vaikka Flutter on vasta muutaman vuoden ikäinen.
Testiympäristö
Saadakseni vähän näkemystä Flutterista, päätin kehittää melko yksinkertaisen sovelluksen, joka kuitenkin hyödyntää tilanhallintaa vähintään kahdessa paikassa. Toteutin kauppalista-sovelluksen, jossa voi lisätä asioita listalle ja joko tyhjentää koko listan tai poistaa valitut kohteet. Kehitin sovelluksen tilanhallinnan kolme kertaa: ensin Flutterin oletus-tilanhallinta StatefulWidgetillä, sitten Reactista tutulla Reduxilla ja lopuksi Provider-kirjastolla.
StatefulWidget
StatefulWidget on Flutterin oletus-tilanhallinta. Se toimii suoraviivaisesti ja helppokäyttöisesti pienille sovelluksille tai uniikeille sovelluksen osille, jotka eivät tarvitse interaktiota muiden osien kanssa. Tämä ratkaisu voi kuitenkin tuottaa tilanhallinnallisia ongelmia laajemmissa sovelluksissa, joissa samaa tilaa halutaan käyttää useammassa paikassa, sillä tila on tallessa UI-komponenteilla itsellään. Ongelmia voisi tuottaa esimerkiksi verkkokauppa-sovelluksen ostoskorin tila, jossa sisällön tietoja voidaan käyttää useammassa paikassa sovelluksen eri osissa. Esimerkkisovellukselleni tämäkin kuitenkin toimi varsin hyvin ja itse sovelluksen toteuttamiseen kului aikaa reilu tunti.
Redux
Erityisesti React-maailmasta tuttu Redux on saatavilla myös Flutterille kahtena eri versiona: Async_redux ja Flutter_redux. Async_redux mainostaa olevansa helppokäyttöisempi ja aiheuttavansa vähemmän ylimääräistä määrittelykoodia kuin Flutter_redux, joka on perinteisempi käännös Reduxista. Molemmista kirjastoissa kantava ajatus on kuitenkin täysin sama: tarjota single source of truth -tilanhallinta, jossa jokainen muutos on jäljitettävissä ja mahdollinen vain tiettyjen reducer-funktioiden kautta.
Redux on tehokas apu sovelluksille, joissa samaa tilaa tarvitaan useissa paikoissa, sillä tila on kaikkialla aina ajan tasalla. Reduxin alustaminen on kuitenkin verrattain työläs vaihe ja tällaiselle sovellukselle se on myös turhan järeä, eikä varsinaisiin hyötyihin asti edes päästä. Tämä ei tosin yllätä, kun sovellus on näin yksinkertainen. Mielenkiintoisena huomiona flutter_redux_dev_tools -kirjasto tarjoaa hyvät työkalut Reduxin debuggaamiseen tarjoten esimerkiksi ”aikakoneen”, jolla jokaista tilasiirtymää voi selata erikseen ja jopa mahdollisuuden hypätä takaisin mihin tahansa aiempaan tilaan.
Provider
Provider on alun perin erillinen tilanhallinta-kirjasto, mutta nykyisin jopa Google itse suosittelee sen käyttämistä monipuolisempien sovellusten kehittämiseen. Provider hyödyntää Business Lines of Code (BLoC) -ajattelua ja auttaa eriyttämään sovelluksen logiikan ja tilan irralleen käyttöliittymästä tarjoten rajapinnan, jonka kautta kaikki tilamuutokset tapahtuvat. Arkkitehtuuriltaan Provider muistuttaa Reduxia, sillä tilanhallinta on vain yhdessä paikassa ja sen käyttämiseen voidaan luoda rajapintafunktiot.
Providerin alustaminen on Reduxia huomattavasti kevyempi, mutta se ei tarjoa yhtä rajattua ympäristöä ja siksi sitä on helpompi käyttää väärin. Providerin kautta on siis hyvien tapojen vastaisesti mahdollista pyytää tila ja manipuloida sitä suoraan mistä tahansa sen sijaan, että tilaa pidetään muuttumattomana (Immutable) ja muokataan vain rajapintojen kautta kuten Reduxissa. Tilannetta on kuitenkin mahdollista helpottaa privaattimuuttujilla ja julkisilla gettereillä, joiden kautta muutoksia ei pääse tallentumaan tilanhallintaan mistä tahansa. Keveytensä ansiosta Provider osoittautuikin omaksi suosikikseni ainakin tässä testisovelluksessa.
Loppusanat
Muutaman päivän kevyen pintaraapaisun perusteella yleistuntuma Flutterista on yllättävän hyvä. Hyppy tuntemattomaan oli antoisa ja miellyttävän helppo. Alkuun pääsee hyvin nopeasti ja suoraviivaisesti. Dokumentaatio on yleisesti hyvällä tasolla ja käytettävien kirjastojen määrä kasvaa jatkuvasti.
Paljon on kuitenkin vielä opittavaa, ennen kuin voin sanoa oikeasti osaavani Flutteria, sillä monet muut tärkeät komponentit kaipaavat tarkempaa perehtymistä. Tästä on kuitenkin hyvä lähteä liikkeelle.
Hyödyllisiä linkkejä:
Kirjoittaja Janne Mankinen on mobiilisovelluksiin erikoistunut ohjelmistokehittäjä Etteplanilla. Tämä kirjoitus syntyi, jotta myös Flutteriin vielä perehtymättömät kollegat saisivat siitä perustiedot. Ja koska aihe kiinnostaa varmasti muitakin, jaamme kirjoituksen myös muiden iloksi.