Flutter vs React Native: mobilių aplikacijų kūrimo palyginimas

Kas iš tikrųjų svarbu renkantis technologiją

Mobilių aplikacijų kūrimo pasaulyje Flutter ir React Native jau seniai tapo dviem dominuojančiomis jėgomis. Bet štai kas įdomu – kiekvieną kartą, kai kalbamės su klientais ar naujais programuotojais, matome tą pačią sumaištį. Vieni prisiekia Flutter, kiti negali įsivaizduoti gyvenimo be React Native. Tiesą sakant, abi technologijos leidžia kurti puikias aplikacijas, bet jų filosofija, požiūris į problemų sprendimą ir darbo principai skiriasi gana stipriai.

Pirmiausia reikia suprasti, kad nėra vieno teisingo atsakymo. Kiekvienas projektas turi savo specifiką, komanda – savo įgūdžius, o verslas – savo prioritetus. Tai, kas puikiai veikia startuoliui, kuris nori greitai paleisti MVP, gali būti visiškai netinkama įmonei, kuri kuria sudėtingą finansų aplikaciją su daugybe integracijų.

Technologiniai pamatai ir architektūra

React Native atsirado 2015-aisiais ir iš esmės pasiūlė revoliucinę idėją – rašyti mobilias aplikacijas naudojant JavaScript ir React. Šis sprendimas atrodė logiškas, nes tūkstančiai web programuotojų jau mokėjo React. Bet štai kur slypi įdomybė: React Native nenaudoja WebView, kaip daugelis galvoja. Jis veikia per tiltelį (bridge), kuris verčia JavaScript komandas į natyvius komponentus. Tai reiškia, kad jūsų mygtukas iOS’e atrodys kaip tikras iOS mygtukas, o Android’e – kaip Android.

Flutter, pasirodęs 2017-aisiais, pasirinko visiškai kitokį kelią. Google inžinieriai nusprendė nekompromituoti ir sukūrė viską nuo nulio. Flutter naudoja Dart programavimo kalbą ir turi savo rendering engine’ą – Skia. Tai reiškia, kad Flutter tiesiogiai piešia kiekvieną pikselį ekrane. Nėra jokių tiltų, nėra natyvių komponentų – viskas kontroliuojama Flutter.

Praktiškai tai reiškia, kad React Native aplikacija teoriškai turėtų jaustis labiau „natyviai”, nes naudoja tikrus platformos komponentus. Bet realybėje Flutter aplikacijos dažnai veikia sklandžiau, nes nėra to komunikacijos tiltelio, kuris gali tapti bottleneck’u sudėtingose animacijose ar intensyviuose skaičiavimuose.

Programavimo kalbos dilema

Čia prasideda įdomiausia dalis. React Native naudoja JavaScript (arba TypeScript, jei norite tipų saugumą), o Flutter – Dart. Daugelis programuotojų iš karto mano, kad JavaScript yra akivaizdus laimėtojas, nes jį žino beveik visi. Bet palauk – ne taip greitai.

JavaScript yra visur, tai tiesa. Jei jūsų komandoje yra web programuotojų, jie gali pradėti dirbti su React Native beveik iš karto. Bet JavaScript turi ir savo keblumų. Asinchroninis kodas, callback hell (nors ir sprendžiamas su async/await), silpna tipizacija (jei nenaudojate TypeScript) – visa tai gali tapti galvos skausmu didesniuose projektuose.

Dart, kita vertus, yra kažkas tarp Java ir JavaScript. Jis turi stiprią tipizaciją, objektinio programavimo principus ir modernią sintaksę. Taip, teks išmokti naują kalbą, bet ji nėra sudėtinga. Dauguma programuotojų, kurie žino Java, C# ar Swift, gali pradėti produktyviai dirbti su Dart per kelias savaites. Be to, Dart turi puikią JIT (Just-In-Time) kompiliaciją development’e ir AOT (Ahead-Of-Time) production’e, kas suteikia gerą balansą tarp greičio ir patogaus kūrimo.

Komponentai, UI ir dizaino sistema

Štai kur skirtumai tampa iš tikrųjų matomi. React Native filosofija yra paprasta: naudok platformos komponentus. Tai reiškia, kad jūsų aplikacija iOS’e atrodys kaip iOS aplikacija, o Android’e – kaip Android aplikacija. Skamba puikiai, tiesa? Bet realybėje dažnai susiduri su situacija, kai tas pats komponentas skirtingose platformose veikia šiek tiek skirtingai, ir tau tenka rašyti platformai specifinį kodą.

Flutter siūlo visiškai kitą požiūrį. Jie turi du widget’ų rinkinius: Material Design (Android stilius) ir Cupertino (iOS stilius). Bet štai kas įdomu – daugelis Flutter aplikacijų naudoja Material Design abiejose platformose, ir tai veikia puikiai. Kodėl? Nes Flutter leidžia visiškai kontroliuoti kiekvieną pikselį, todėl galite sukurti vienodą dizainą visur.

Jei kuriate aplikaciją su unikaliu dizainu, Flutter yra tiesiog sapnas. Norite nestandartinių animacijų? Nėra problemos. Sudėtingų perėjimų? Lengvai. React Native’e už tokius dalykus dažnai tenka mokėti našumo kaina arba rašyti natyvų kodą.

Ekosistema ir bendruomenė

React Native turi didžiulę bendruomenę. Tai natūralu – jis senesnis ir remiasi JavaScript ekosistemos. NPM turi tūkstančius paketų, kuriuos galite naudoti. Bet čia slypi ir problema: ne visi paketai yra gerai prižiūrimi. Dažnai rasi biblioteką, kuri atrodo tobula, bet paskutinis update’as buvo prieš dvejus metus, ir ji neveikia su naujausia React Native versija.

Flutter bendruomenė auga eksponentiškai. pub.dev (Dart paketų repozitorija) turi vis daugiau kokybiškai prižiūrimų paketų. Ir štai kas įdomu – kadangi Flutter yra jaunesnis, daugelis paketų yra kuriami jau su šiuolaikinėmis praktikomis. Be to, Google labai aktyviai palaiko Flutter, kas reiškia, kad oficialūs paketai yra aukštos kokybės.

Dokumentacija – dar viena svarbi detalė. Flutter dokumentacija yra fenomenali. Ji ne tik išsami, bet ir gerai struktūruota, su daugybe pavyzdžių. React Native dokumentacija taip pat gera, bet dažnai tenka ieškoti atsakymų bendruomenės forumuose ar Stack Overflow.

Našumas ir optimizacija

Gerai, kalbėkime apie tai, kas iš tikrųjų vyksta po gaubtu. React Native naudoja JavaScript bridge’ą komunikacijai tarp JS kodo ir natyvių modulių. Daugeliu atvejų tai veikia puikiai, bet kai turite daug duomenų, kurie keliauja per tą bridge’ą, arba sudėtingas animacijas, galite pajusti lėtėjimą. Yra sprendimų, kaip JSI (JavaScript Interface), kuris pagerina situaciją, bet tai vis dar evoliucionuojanti sritis.

Flutter kompiliuojasi į natyvų ARM kodą. Tai reiškia, kad nėra jokio interpreter’io runtime’e. Jūsų kodas veikia tiesiogiai ant procesoriaus. Animacijos Flutter’e gali pasiekti 60fps arba net 120fps naujuose įrenginiuose be jokių papildomų pastangų. Tai ypač svarbu, jei kuriate aplikacijas su daug grafikos ar sudėtingomis sąsajomis.

Bet štai ką reikia suprasti: daugumai aplikacijų šis našumo skirtumas nėra kritinis. Jei kuriate socialinių tinklų aplikaciją, e-commerce platformą ar įrankį produktyvumui, abi technologijos veiks puikiai. Našumas tampa svarbus, kai kuriate žaidimus, video redagavimo įrankius ar kitas grafiškai intensyvias aplikacijas.

Kūrimo greitis ir produktyvumas

Hot reload yra abi technologijų super galia. Bet Flutter’io hot reload yra šiek tiek greitesnis ir patikimesnis. Galite keisti kodą ir matyti rezultatus per sekundes, net neprarasdami aplikacijos būsenos. Tai gali atrodyti kaip smulkmena, bet per dieną sutaupote dešimtis minučių, o per projektą – valandas.

React Native turi didžiulį pranašumą, jei jūsų komanda jau žino React. Mokymosi kreivė yra daug švelnesnė. Galite panaudoti tas pačias koncepcijas, tą patį state management (Redux, MobX, Context API), tuos pačius patterns. Tai reiškia greitesnį startą ir mažiau klaidų pradžioje.

Flutter reikalauja investicijos į mokymąsi. Dart, widget’ai, state management (Provider, Riverpod, Bloc) – visa tai nauja. Bet štai kas įdomu: daugelis komandų praneša, kad po kelių savaičių jų produktyvumas Flutter’e tampa didesnis nei buvo su React Native. Kodėl? Nes Flutter’io tooling yra puikus, klaidos pranešimai aiškūs, o hot reload leidžia eksperimentuoti be baimės.

Ką rinktis ir kodėl tai priklauso nuo jūsų

Dabar pabandykime sujungti visus šiuos taškus į praktines rekomendacijas. Jei jūsų komanda susideda iš web programuotojų, kurie dirba su React, ir norite greitai paleisti MVP – React Native yra logiškas pasirinkimas. Galėsite panaudoti egzistuojančias žinias ir greičiau pasiekti rinką.

Jei kuriate aplikaciją su unikaliu dizainu, daug animacijų ir reikia maksimalaus našumo – Flutter bus geresnis variantas. Taip pat jei planuojate ilgalaikį projektą ir galite investuoti į komandos mokymą, Flutter’io privalumai ilgainiui atsipirks.

Finansinės aplikacijos, sveikatos priežiūros platformos ar bet kas, kur svarbus saugumas ir stabilumas – abi technologijos tinka, bet Flutter’io stipri tipizacija ir AOT kompiliacija gali suteikti papildomą ramybę. React Native taip pat puikus, ypač jei naudojate TypeScript.

Startuoliams su ribotu biudžetu ir laiku dažnai labiau tinka React Native, nes lengviau rasti programuotojų ir greičiau pradėti. Bet jei jūsų produkto sėkmė labai priklauso nuo vartotojo patirties ir sklandžios sąsajos, verta apsvarstyti Flutter.

Galiausiai, abi technologijos yra brandžios ir naudojamos milijonų vartotojų aplikacijose. Instagram, Facebook, Discord naudoja React Native. Google Ads, Alibaba, BMW naudoja Flutter. Tai reiškia, kad galite pasitikėti abiem. Svarbu ne tiek kuri technologija „geresnė”, kiek kuri geriau tinka jūsų kontekstui, komandai ir tikslams. Kartais net verta sukurti mažą proof-of-concept su abiem technologijomis ir pamatyti, kuri labiau rezonuoja su jūsų komanda.

Daugiau

Kong API gateway: mikroservisų valdymas