Kas iš tiesų yra Flutter Web ir kodėl visi apie tai kalba
Jei sekate mobilių aplikacijų kūrimo naujienas, turbūt pastebėjote, kaip Flutter per pastaruosius kelerius metus tapo tikra sensacija. Google sukurtas framework’as, leidžiantis rašyti kodą vieną kartą ir paleisti jį tiek iOS, tiek Android platformose, pritraukė ne tik indie kūrėjų, bet ir stambiausių kompanijų dėmesį. Tačiau Google neketino sustoti ties mobiliosiomis platformomis – 2021 metais oficialiai buvo pristatytas Flutter Web, žadantis tą patį „vieno kodo” stebuklą ir naršyklėms.
Skamba puikiai, ar ne? Vienas kodas – mobilioji aplikacija, desktop’ui ir dar svetainė. Bet kaip dažnai būna su naujomis technologijomis, tarp marketingo pažadų ir realybės gali būti nemažas atotrūkis. Po beveik trejų metų nuo oficialaus paleidimo, verta sustoti ir atsakyti į klausimą: ar Flutter Web tikrai yra paruoštas rimtiems projektams, ar dar geriau palaukti?
Techninė pusė: kaip Flutter veikia naršyklėje
Prieš kalbant apie produkciją, svarbu suprasti, kaip Flutter Web iš tikrųjų veikia. Skirtingai nei tradicinės web technologijos, kurios tiesiogiai manipuliuoja DOM elementais, Flutter naudoja visiškai kitokį požiūrį. Jis tiesiog piešia viską ant HTML canvas elemento arba naudoja CanvasKit (WebAssembly versija), o kartais – HTML renderer’į.
Tai reiškia, kad jūsų Flutter aplikacija naršyklėje veikia beveik taip pat, kaip ir mobiliojoje platformoje – visi widgetai piešiami iš naujo, naudojant tą pačią Skia grafikos biblioteką. Skamba įspūdingai, bet čia ir slypi pirmosios problemos. Naršyklės nėra sukurtos tokiam darbui – jos optimizuotos darbui su DOM, CSS ir JavaScript, o ne pilnam UI piešimui ant canvas.
Praktiškai tai reiškia, kad Flutter Web aplikacijos dažnai būna gerokai didesnės nei tradicinės web aplikacijos. Bazinis bundle dydis gali siekti 2-3 MB (o kartais ir daugiau), net jei jūsų aplikacija beveik nieko nedaro. Palyginkite tai su tipine React ar Vue aplikacija, kuri gali svyruoti apie 200-500 KB, ir skirtumas akivaizdus.
Našumo klausimas: ar greitai, ar gražu?
Čia prasideda įdomiausia dalis. Flutter Web našumas yra… sudėtingas klausimas. Jei jūsų aplikacija yra paprasta forma ar dashboard’as su keliais elementais, greičiausiai viskas veiks sklandžiai. Bet kai tik pradėsite kurti sudėtingesnius UI, su animacijomis, dideliais sąrašais ar kompleksine grafika, galite pastebėti problemų.
Viena didžiausių problemų – scroll’inimas. Taip, paprastas scroll’inimas, kurį kiekviena web aplikacija turi daryti sklandžiai. Kadangi Flutter piešia viską pats, o ne naudoja natyvų naršyklės scroll’inimą, kartais gaunamas rezultatas nėra toks sklandus, kaip tikėtumėtės. Ypač tai jaučiama mobiliose naršyklėse, kur vartotojai tikisi tam tikro „feel” ir inerciško scroll’inimo.
Animacijos – dar viena jautri vieta. Nors Flutter garsėja puikiomis animacijomis mobiliose platformose, web’e situacija sudėtingesnė. 60 FPS pasiekti įmanoma, bet reikia būti atsargiam su tuo, ką animuojate. Sudėtingesnės animacijos gali sukelti frame drop’us, ypač silpnesnėse mašinose.
Dar vienas aspektas – pirmasis paleidimas. Kadangi Flutter Web turi užkrauti visą savo runtime’ą ir nupiešti UI nuo nulio, pirmas ekranas vartotojui gali pasirodyti lėčiau nei įprastoje web aplikacijoje. Tai ypač jaučiama lėtesniame internete ar mobiliuose įrenginiuose.
SEO ir prieinamumo galvos skausmas
Jei kuriate viešą svetainę, kuriai svarbus SEO, turiu blogų naujienų. Flutter Web ir SEO santykiai yra… komplikuoti. Kadangi viskas piešiama ant canvas, paieškos robotai negali tiesiogiai skaityti jūsų turinio taip, kaip jie tai daro su įprastu HTML.
Google teigia, kad jų robotai gali vykdyti JavaScript ir „matyti” Flutter turinį, bet praktikoje tai ne visada veikia idealiai. Meta tagus galite valdyti, bet dinaminis turinys, struktūrizuoti duomenys ir kiti SEO aspektai tampa sudėtingesni. Jei kuriate e-commerce svetainę ar blog’ą, kuriam kritiškai svarbus organinis srautas, Flutter Web gali būti ne geriausias pasirinkimas.
Prieinamumas (accessibility) – dar viena zona, kur Flutter Web turi vykti papildomą mylią. Nors Flutter komanda dirba prie to, kad screen reader’iai ir kitos pagalbinės technologijos veiktų, tai vis dar nėra taip natūralu, kaip su įprastu HTML. Jums reikės kruopščiai testuoti ir galbūt pridėti papildomų semantics widget’ų, kad užtikrintumėte tinkamą prieinamumą.
Kur Flutter Web tikrai spindi
Gerai, pasakiau daug kritikos, bet būkime sąžiningi – yra scenarijai, kur Flutter Web yra puikus pasirinkimas. Jei jau turite Flutter mobilią aplikaciją ir norite greitai sukurti web versiją tam pačiam funkcionalumui, Flutter Web gali sutaupyti daug laiko. Ypač jei tai internal tool’as ar dashboard’as, kur SEO nėra svarbus.
Admin panelės, CRM sistemos, internal dashboard’ai – tai sritys, kur Flutter Web tikrai gali būti produktyvus sprendimas. Jūs galite panaudoti tą patį kodą, tas pačias business logikos dalis, ir greitai paleisti web versiją be poreikio samdyti atskirą web komandą.
PWA (Progressive Web Apps) – dar viena sritis, kur Flutter Web gali būti naudingas. Galite sukurti aplikaciją, kuri veikia tiek naršyklėje, tiek gali būti „įdiegta” kaip standalone aplikacija. Jei jūsų tikslinė auditorija naudoja šiuolaikines naršykles ir jums nereikia gilaus SEO, tai gali būti geras kompromisas.
Interaktyvūs įrankiai ir vizualizacijos – jei kuriate kažką, kas labiau panašu į aplikaciją nei į svetainę (pvz., dizaino įrankis, žaidimas, interaktyvi vizualizacija), Flutter Web gali būti puikus pasirinkimas. Čia jo „canvas-based” požiūris tampa privalumu, o ne trūkumu.
Ekosistema ir package’ų palaikymas
Viena iš Flutter stipriųjų pusių – turtinga package’ų ekosistema pub.dev. Tačiau čia slypi problema: ne visi package’ai palaiko web platformą. Kai kurie populiarūs package’ai, kurie puikiai veikia mobile, tiesiog neveiks web’e arba turės ribotą funkcionalumą.
Prieš pradėdami projektą, verta patikrinti, ar jūsų planuojami naudoti package’ai palaiko web. Žiūrėkite į package’o puslapį pub.dev – ten turėtų būti nurodyta, kokias platformas jis palaiko. Jei matote tik Android ir iOS ikonas, bet ne web – tai raudona vėliavėlė.
Kai kurie dalykai, kurie mobilėje yra trivialūs, web’e gali reikalauti papildomų sprendimų. Pavyzdžiui, failų pasirinkimas, kamera, geolokacija – visi šie dalykai veikia skirtingai naršyklėje ir gali reikalauti papildomų package’ų ar platform-specific kodo.
Realūs pavyzdžiai ir kas jau naudoja
Kalbant apie produkciją, verta pažiūrėti, kas iš tikrųjų naudoja Flutter Web realiuose projektuose. Google, žinoma, naudoja savo produktuose – pavyzdžiui, Google Ads web aplikacija dalinai pastatyta su Flutter Web. Tai rodo, kad technologija gali būti naudojama rimtuose projektuose.
Tačiau reikia pripažinti, kad masinio priėmimo dar nematome. Daugelis kompanijų, kurios naudoja Flutter mobilėms aplikacijoms, vis dar renkasi tradicines web technologijas savo svetainėms. Ir tam yra priežasčių – SEO, našumas, bundle dydis ir ekosistemos brandumas vis dar yra svarbūs faktoriai.
Jei sprendžiate, ar naudoti Flutter Web savo projekte, rekomenduoju pradėti nuo MVP ar prototype’o. Sukurkite paprastą versiją, išbandykite našumą realiose sąlygose, patikrinkite, kaip veikia jūsų reikalingi package’ai. Tik tada priimkite galutinį sprendimą.
Ką reikėtų žinoti prieš šokant į vandenį
Taigi, grįžtant prie pradinio klausimo: ar Flutter Web paruoštas produkcijai? Atsakymas, kaip dažnai būna su technologijomis, yra „priklauso”. Jei kuriate internal tool’ą, dashboard’ą ar aplikaciją, kur jau turite Flutter mobile kodą ir norite greitai išplėsti į web – taip, Flutter Web gali būti puikus pasirinkimas. Jūs sutaupysite laiko, galėsite dalintis kodu ir turėsite vienodą UX visose platformose.
Bet jei kuriate viešą svetainę, kuriai kritiškai svarbus SEO, greitas pirmasis paleidimas ir mažas bundle dydis – geriau pasirinkite tradicines web technologijas. React, Vue, Svelte ar net paprastas HTML/CSS/JavaScript greičiausiai duos geresnių rezultatų. Flutter Web vis dar turi per daug kompromisų šiems scenarijams.
Svarbu suprasti, kad Flutter Web nėra „vieno dydžio visiems” sprendimas. Tai įrankis, kuris puikiai tinka tam tikroms užduotims, bet ne visoms. Prieš priimdami sprendimą, įvertinkite savo projekto poreikius: ar jums svarbesnis greitas development’as ir kodo dalijimasis, ar galutinio produkto našumas ir optimizacija? Ar jūsų vartotojai naudos aplikaciją kaip tool’ą, ar ieškos jos per Google?
Technologija tobulėja – Flutter komanda aktyviai dirba prie našumo gerinimo, bundle dydžio mažinimo ir SEO problemų sprendimo. Galbūt po metų ar dviejų Flutter Web taps dar brandesnė alternatyva. Bet šiandien, 2024-ųjų pradžioje, tai vis dar technologija, kurią reikia naudoti apgalvotai, suprantant jos stipriąsias ir silpnąsias puses.
Jei vis dar svarstote, geriausias patarimas – padarykite proof of concept. Sukurkite mažą prototipą, išbandykite jį realiose sąlygose, parodykite potencialiems vartotojams. Tik praktinis testavimas parodys, ar Flutter Web tinka būtent jūsų projektui. Ir nepamirškite – kartais geriausias sprendimas yra hibridinis: Flutter mobilei, o tradicinės web technologijos svetainei. Nėra gėdos naudoti skirtingus įrankius skirtingoms problemoms spręsti.
