Flutterilla kehitetyt puhelinsovellukset yleistyvät kiihtyvää vauhtia. Toukokuussa 2021 Google Play -sovelluskaupassa oli yli 200 000 Flutterilla kehitettyä sovellusta. Noin joka kahdeksas Google Play -kauppaan julkaistu uusi sovellus oli kehitetty Flutterilla. [1] Google julkaisi 2021 maaliskuussa Flutter 2.0 -version, jonka yhteydessä lanseerattiin webtuki. Webtuen tavoitteena on kasvattaa verkon käyttäjäkantaa ja mahdollistaa cross-platform -kehitys puhelinsovellusten ja verkkosivujen välillä. Millaisia hyviä ja huonoja kokemuksia olen Flutterin käytöstä sitten tähän mennessä kerännyt?

Flutter on toiminut hyvin puhelinsovellusten kehityksessä, joten perehtyminen sen tarjoamaan webtukeen oli lähtökohtaisesti kiinnostavaa. Tässä blogikirjoituksessa pohdin verkkosivujen ja Android/iOS sovellusten cross-platform -kehitystä, koodin uudelleen käytettävyyttä alustojen välillä, Flutterin webtuen suurimpia ongelmia sekä sitä, millaisiin projekteihin webtuki ensisijaisesti soveltuu.

Puhelinsovellus ja verkkosivu yhdessä projektissa

Flutter pyrkii helpottamaan ohjelmistokehittäjien työtä mahdollistamalla tehokkaan koodin uudelleenkäytön ja cross-platform -kehityksen. Kehittäjä voi luoda yhden projektin, joka toimii puhelinsovelluksena iOS- ja Android-laitteilla, sekä verkkosivuna selaimessa.

Jos kehitettävä verkkosivu ja iOS/Android-sovellus ovat toiminnallisuudeltaan hyvin samanlaisia, voi webtuki vähentää työmäärää huomattavasti. Monet verkkokaupat toimivat ja näyttävät samalta niin verkossa, Android-sovelluksessa kuin iOS-sovelluksessa; kaikkien alustojen tukeminen edellyttää kuitenkin kolmea erillistä projektia. Jos alustat saataisiin yhden projektin alle, säästettäisiin kehityksessä paljon aikaa ja rahaa.

Flutterilla Android- ja iOS-sovelluksen sekä verkkosivun samanaikainen kehittäminen on mahdollista. Koodi on melkein täysin uudelleen käytettävissä. UI-elementit, kuten painikkeet ja listat, sekä tietorakenteet ja algoritmit, toimivat hyvin kaikilla alustoilla.

Cross-platform -kehityksessä on kuitenkin tiettyjä haasteita.

Merkittävä osa kirjastoista ei ole käytettävissä

Flutter on teknologiana melko nuori, joten kirjastoja on suhteellisen vähän. Cross-platform -sovellusta kehitettäessä on huomioitava, että kirjastoista on käytettävissä vain ne, jotka tukevat sekä webbiä, Androidia että iOS:ää. Noin kolmasosa Androidia ja iOS:ää tukevista kirjastoista ei tue webbiä.

Heti projektin alkuvaiheessa on tärkeää huomioida kaikki alustat, joilla sovelluksen halutaan toimivan. Jälkikäteen sovellusta voi olla hyvin työlästä muokata tukemaan alustaa, jolle sitä ei ole alun perin suunniteltu.

Eri alustat aiheuttavat omat rajoitteensa

Vaikka Flutterilla voidaan luoda yksi projekti, joka toimii puhelinsovelluksena ja verkkosivuna, on kehityksessä kuitenkin huomioitava kaikki alustat. Androidissa, iOS:ssä ja verkkosivuilla on kaikilla omat rajoitteensa, jotka on osattava huomioida. Muuten joudutaan luomaan erilliset toteutukset eri alustoille. Käyttöliittymä on suunniteltava ja kehitettävä erikseen eri alustoille, sillä skaalautuminen sekä puhelimen pienelle ja kapealle näytölle että tietokoneen suurelle ja leveälle näytölle on haastava toteuttaa.

Haasteista huolimatta verkkosivun ja puhelinsovelluksen cross-platform -kehitys toimii tällä hetkellä ihan hyvin. Webtuessa itsessään on valitettavasti suuria puutteita.

Flutterin webtuella on vielä paljon kehitettävää. Suurimmat ongelmat ovat SEO:ssa eli hakukoneoptimoinnissa sekä HTML- ja Canvaskit-renderöinnissä. Viimeisen puolen vuoden aikana verkkosivuilla on lisäksi esiintynyt ongelmia.

SEO ei toimi

Flutter-verkkosivut eivät nouse korkealle hakukoneiden haussa. Tähän on kaksi merkittävää syytä. Ensiksikin Flutter-verkkosivut muodostuvat sivun täyttävästä canvaksesta, joka aiheuttaa sen, että hakurobotit eivät pysty käsittelemään verkkosivun sisältöä kunnolla. Toiseksi verkkosivut ovat kooltaan suuria. Tällä hetkellä SEO-ongelmaan ei ole löydetty toimivaa väliaikaista ratkaisua. Flutterin tiimi ei ole myöskään ilmoittanut, että ongelmaa oltaisiin lähiaikoina korjaamassa.

HTML- ja Canvaskit-renderöinnin ongelmia

Flutterin webtuki tarjoaa tällä hetkellä kaksi tapaa renderöidä verkkosivuja. Nämä ovat HTML- ja Canvaskit-renderöinti. Tietokoneen selaimessa käytetään oletuksena Canvaskit-renderöintiä ja puhelimen selaimessa HTML-renderöintiä. Kummassakin on omat vahvuutensa ja heikkoutensa.

HTML-renderöinnin vahvuus on Canvaskit-renderöintiä huomattavasti nopeampi latausaika. HTML-renderöinnin suurimmat ongelmat liittyvät tekstiin: kaikki fontit eivät aina toimi ja scrollatessa teksti hiukan pomppii.

Canvaskit-renderöinti on usein parempi vaihtoehto, vaikka ongelmia on siinäkin. Canvaskit-renderöity verkkosivu toimii hyvin ja on tehokas, mutta vaatii suuren Canvaskit.wasm -tiedoston latauksen. Canvaskit.wasm -tiedosto on kooltaan noin 2 MB ja pidentää näin verkkosivun latausaikaa huomattavasti. Canvaskit-renderöintiä käytettäessä ei myöskään voi käyttää emojeita.

Flutterin tiimi on ilmoittanut, että edellä mainittuihin ongelmiin ollaan etsimässä ratkaisua. [2] Ratkaisun löytyminen voi kuitenkin kestää hyvinkin kauan.

Muita ongelmia

Viimeisen puolen vuoden aikana Flutter-verkkosivuilla on ollut muutamia merkittäviä ongelmia. Androidin Firefoxilla verkkosivuja ei pystynyt scrollaamaan muutaman kuukauden ajan, kun taas iOS15-päivityksen jälkeen verkkosivut eivät ole Safarissa toimineet Canvaskit-renderöinnillä lainkaan, mikäli ei estä verkkosivulla WebGL 2.0.

Flutterin webtuki ei myöskään tue hot reloadia eli koodiin tehtyjen muutosten päivittämistä ilman sovelluksen uudelleen avausta. Hot reloadin puute hidastaa manuaalista testausta ja erityisesti UI:n kehitystä: Flutter-kehityksessä ei ole graafista editoria, josta näkisi käyttöliittymään tehdyt muutokset ennen sovelluksen uudelleen käynnistystä.

Millaisiin projekteihin Flutterin webtuki soveltuu?

Flutterin webtuessa on vielä teknisiä ongelmia. Yhdessä teknologian nuoren iän kanssa tämä muodostaa riskin projektin onnistumiselle. Mikäli tekniset ongelmat ja rajoitteet tiedostetaan projektin alussa, voidaan webtuen avulla kehittää täysin toimiva verkkosivu.

Flutterin webtukea voi kokeilla pienissä cross-platform minimum viable product (MVP) -projekteissa, kunhan on valmis hyväksymään SEO:n puutteen ja verkkosivun tavallista pidemmän latausajan. MVP-projekteille on tyypillistä, että niiden ei tarvitse toimia täydellisesti tuottaakseen arvokasta dataa. Tämä auttaa hyväksymään webtuen ilmeiset puutteet.

Flutterin vahvuus on cross-platform -kehitys. Webtukea kannattaa hyödyntää projekteissa, joissa kehitetään samalla iOS/Android-sovellusta. Flutterin tarjoamat UI-komponentit luovat puhelinsovellusmaisen käyttökokemuksen. Esimerkiksi Woltin tai Amazonin tyyppiset verkkokaupat, joissa verkkosivut sisältävät lähes täysin identtiset ominaisuudet puhelinsovellukseen verrattuna, ovat hyvä käyttökohde webtuelle. Tällaisessa projektissa voidaan säästää merkittävästi aikaa ja rahaa, jos iOS/Android ja verkkosivu saadaan yhden projektin alle.

[1] https://9to5google.com/2021/05/18/flutter-sdk-2-2/

[2] https://medium.com/flutter/flutter-whats-next-on-the-web-e0454bff964