Kokemuksia Flutterin webtuesta
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
Lisätietoja
Tagit
Teknologia
Flutter |
Omat tagit
Vincit - Asiantuntijat ja yhteyshenkilöt
Vincit - Muita referenssejä
Vincit - Muita bloggauksia
It- ja ohjelmistoalan työpaikat
- Laura - ICT – ja digijohtaja: Pohjois-Karjalan hyvinvointialue (id9091)
- Laura - Tiedonhallinnan asiantuntijan toimi
- Efima Oyj - Senior Sales Manager
- Red & Blue Oy - WordPress-kehittäjä tuki- ja pienkehitystiimiin
- Laura - Senior Game Artist (Game Studio)
- Frends iPaaS - Senior Product Marketing Manager (SaaS)
- Laura - DevOps Engineer
Premium-asiakkaiden viimeisimmät referenssit
- Red & Blue Oy - Mannerheimin Lastensuojeluliiton nettikirjepalvelu uudistui
- Ceili Oy - Norlandian varhaiskasvatuksen prosesseihin yhdenmukaisuutta Salesforcella
- Innofactor Oyj - Pohjantähden moderni intranet pitää työntekijät ajan tasalla
- Innofactor Oyj - Visiona moderni, looginen ja yksiselitteinen intranet
- TNNet Oy - Hotelli Alba – TNNetiltä riennetään apuun vaikka vettä pitkin
- TNNet Oy - Intrum sai TNNetistä luotettavan kumppanin sähköpostinvälitykseen
- TNNet Oy - TNNet on huomaamaton taustavoima JYP:in takana
Tapahtumat & webinaarit
- 08.10.2024 - ESG and HR – Creating a culture promoting sustainability
- 10.10.2024 - Palvelumuotoilu johtamisessa ja transformaatiossa
- 10.10.2024 - Miten tekoäly mullistaa digitaalisen asiakaskokemuksen?
- 10.10.2024 - Kestävän koodauksen käytänteet ja koodin mittaaminen -työpaja 10.10.
- 21.10.2024 - EDI-asiantuntijaksi -koulutus
- 30.10.2024 - Nordic NetSuite Summit 2024
- 30.10.2024 - Webinaari: Hakukoneoptimointi on strateginen valinta
Premium-asiakkaiden viimeisimmät bloggaukset
- Rakettitiede Oy - Konsultin arki – mikä kaikki muuttuu?
- Timeless Technology - Haluatko ottaa täyden hallinnan yrityksesi kriittisistä järjestelmistä ja prosesseista?
- Efima Oyj - Unboxataan Dynamics 365 -versiopäivitys! – Versio 10.0.41
- Timeless Technology - 4G-LTE ja USB dataloggerit kuljetettujen tuotteiden, jääkaappien, varastojen ja tuotantotilojen olosuhteiden valvontaan.
- Timeless Technology - Milesight UR32L Lite Series teollisuusreititin päivitetyllä hinnalla: 100,00€ (ALV 0%)
- TNNet Oy - Tapaa TNNetin työntekijä - Jari Lehtonen
- Rakettitiede Oy - Millaisiin toimeksiantoihin konsultti pääsee Rakettitieteellä?
Digitalisaatio & innovaatiot blogimediaBlogimediamme käsittelee tulevaisuuden liiketoimintaa, digitaalisia innovaatioita ja internet-ajan ilmiöitä |