Kryssplattform apputvikling: Flutter kontra React Native
Er du en bruker av Android eller iOS? Benytter din bærbare datamaskin Windows, macOS eller Linux? Det er viktig å nå ut til et bredt spekter av potensielle kunder, men dagens marked er fullt av enheter med ulike operativsystemer.
En plattform som muliggjør utvikling av applikasjoner for flere operativsystemer kan være svært fordelaktig og spare deg for tid og ressurser.
Flutter og React Native er ledende navn innen kryssplattformutvikling. Men med disse to alternativene tilgjengelig, kan det være vanskelig å velge den rette for deg.
Hvorfor velge kryssplattformløsninger fremfor native?
Tidsbesparelse
Utvikling av en funksjonell app kan være tidkrevende. Hvis du ønsker å lage en app som fungerer for både iOS- og Android-brukere, slipper du å utvikle to separate kodebaser.
Reduserte utviklings- og vedlikeholdskostnader
Det kan være kostbart å betale utviklere for å lage ulike apper for forskjellige brukere. Kostnadene for å vedlikeholde appene kan også være høye, avhengig av antall brukere. En kryssplattformtilnærming gjør det mulig å bruke de samme utviklerne til å kode for forskjellige applikasjoner.
Den eneste forskjellen oppstår i distribusjonsfasen. Vedlikeholdskostnader reduseres også, ettersom du bare trenger å oppdatere én enkelt kodebase, og endringene trer i kraft på alle plattformer.
Ytelse nær native applikasjoner
Native applikasjoner er spesielt utviklet for ett bestemt operativsystem og er kjent for sin høye ytelse.
Kryssplattformløsninger som React Native og Flutter produserer imidlertid applikasjoner med ytelse som er svært lik native apper. Vanlige brukere vil sannsynligvis ikke merke noen forskjell.
I denne artikkelen, «Flutter Vs. React Native», vil vi gå dypere inn i funksjoner, forskjeller, likheter og ytelse, for å hjelpe deg med å ta et informert valg.
Hva er Flutter?
Flutter er et åpen kildekode-rammeverk fra Google, basert på programmeringsspråket Dart. Med Flutter kan utviklere skape applikasjoner for Android, iOS, desktop og web med samme kodebase.
Her er noen fordeler med å bruke Flutter:
- Enkel kodebase for alle plattformer: Du kan publisere Android-, iOS-, desktop- og webversjoner av appen din fra en og samme kodebase.
- Basert på et kompilert språk: Flutter benytter Dart, et kompilert språk som oversetter koden til maskinlesbar kode før kjøring, noe som gir Flutter høy hastighet.
- Ytelse tilnærmet native: Flutter er uavhengig av mellomliggende kode og benytter Skia-motoren. Dette gjør at Flutter-apper oppnår en ytelse som nesten kan sammenlignes med native applikasjoner.
Hva er React Native?
React Native er et JavaScript-rammeverk fra Meta (tidligere Facebook) for å utvikle kryssplattformapplikasjoner. Det gir deg muligheten til å bygge nesten native Android- og iOS-apper.
React Native er populært blant utviklere av disse grunnene:
- Gjenbrukbar kode: React Native har en komponentbasert arkitektur. Dette gjør det mulig å gjenbruke kodeblokker i hele applikasjonen, noe som forkorter utviklingstiden.
- Tilgang til tredjepartsbiblioteker og rammeverk: React Native har et stort og aktivt fellesskap, samt en rekke biblioteker og rammeverk. Du kan for eksempel benytte biblioteker som Redux for tilstandshåndtering.
- Live reload: Du ser endringene i applikasjonen umiddelbart mens du utvikler den. Du kan også velge å laste kun spesifikke deler av koden på nytt, og spare kompileringstid.
- Native opplevelse: React Native bruker de underliggende komponentene i operativsystemene (iOS og Android), noe som gir en naturlig opplevelse.
Flutter vs. React Native: Rask sammenligning
| Funksjon | React Native | Flutter |
| Språk | JavaScript | Dart |
| Skaper | Meta (tidligere Facebook) | |
| Åpen kildekode | Ja | Ja |
| Fellesskap | Stort og aktivt | Mindre, men voksende |
| Eksempler på apper | Wix, Soundcloud Pulse, Facebook og Facebook Ads | Alibaba, eBay, BMW, Crowdsource |
| Tredjepartsbiblioteker | Ja | Få, men økende |
| Statshåndtering | Ulike pakker | Ulike pakker |
| Rendering Library | React Native Rendering Library | Skia |
Flutter vs. React Native: Detaljert sammenligning
Selv om både Flutter og React Native brukes til å utvikle kryssplattformapplikasjoner, finnes det flere forskjeller.
#1. Språk
Flutter og React Native er basert på forskjellige programmeringsspråk.
React Native
Du kan bruke React Native med JavaScript eller TypeScript. En undersøkelse fra Stack Overflow i 2022 viser at JavaScript er det mest populære programmeringsspråket, med 65,36% av de spurte som foretrekker det.
Bildekilde: Stack Overflow
TypeScript, en utvidelse av JavaScript, kom på fjerdeplass i den samme undersøkelsen, med 34,83% som viste at de likte det.
Flutter
Flutter er basert på Dart. Dart er objektorientert og benyttes i diverse Google-produkter, inkludert Flutter Engine, Flutter-rammeverket og AngularDart. I den samme undersøkelsen foretrakk kun 6,54% å jobbe med Dart.
Bildekilde: Stack Overflow
Vinneren
Det er vanskelig å kåre en vinner, da JavaScript/TypeScript og Dart har hver sine fordeler og ulemper.
JavaScript/TypeScript har et stort fellesskap, som betyr et stort utvalg av tilgjengelige biblioteker.
Dart er et kompilert språk, som betyr at koden blir oversatt til maskinkode før kjøring. Dette gjør Dart raskere enn JavaScript/TypeScript-baserte applikasjoner.
#2. Komponenter og rendering
Måten et rammeverk gjengir komponenter har innvirkning på applikasjonens ytelse.
React Native
React Native sine UI-komponenter er basert på native plattformkomponenter (Android og iOS). Dette gjør dem responsive og raske. React Native tilbyr ulike komponenter som «View», «Image», «Text», «ScrollView», «Touchable» og «TextInput».
Utseendet på React Native-apper kan variere på ulike plattformer, da de bruker de underliggende operativsystemenes UI-komponenter.
Flutter
Flutter bruker et UI-komponentbibliotek som vedlikeholdes av Google. Disse komponentene er bygget med Skia-grafikkmotoren, noe som gjør dem raske og fleksible. Noen kjente Flutter UI-komponenter er Cupertino-widgets og Material Design-widgets.
Brukere har også muligheten til å lage egendefinerte widgets, enten ved å modifisere eksisterende eller designe dem fra bunnen av.
Applikasjoner bygget med Flutter har en konsistent brukergrensesnitt/UX, uavhengig av operativsystem.
Vinneren
Begge rammeverkene har gode UI-komponenter. Valget mellom dem avhenger av utviklerens erfaring, preferanser og smak.
#3. Biblioteker og fellesskapsstøtte
Tilgjengeligheten av biblioteker og fellesskapsstøtte er viktige faktorer i utviklingsmiljøet.
React Native
React Native er basert på populære programmeringsspråk, hvor JavaScript har 65 % støtte og TypeScript 35 % støtte.
JavaScript har eksistert i over to tiår og har et stort antall biblioteker fra fellesskapet. Alle React Native-bibliotekene er tilgjengelige på reactnative.directory.
Flutter
Flutter er basert på Dart, et språk som har under 10% popularitet. Plattformen har likevel et voksende fellesskap som utvikler nye biblioteker. Dart ble lansert i 2011. Alle Dart- og Flutter-pakker finnes på pub.dev-lageret.
Vinner
React Native vinner på grunn av tilgjengeligheten av biblioteker og fellesskapsstøtte.
#4. Ytelse
Moderne brukere legger stor vekt på applikasjoners ytelse.
React Native
React Native er basert på JavaScript, som er et tolket språk. JavaScript mangler et kompileringssteg. Dette betyr at en nettleser må lese koden, tolke og utføre den linje for linje.
Flutter
Flutter er basert på Dart, som er et kompilert språk. Et kompilert språk konverterer koden til maskinkode før den kjøres.
Vinner
Flutter vinner på ytelse, da det er basert på et kompilert språk. Forskjellen i ytelse er likevel ikke nødvendigvis merkbar i applikasjoner med enkle funksjoner.
#5. Statshåndtering
Statshåndtering er de metoder og teknikker du benytter for å kontrollere tilstanden til en applikasjon. For eksempel, når en bruker logger inn og legger inn data, endres tilstanden som må håndteres.
React Native
Det finnes flere tilnærminger for å håndtere tilstand i React Native-applikasjoner. Den første metoden er gjennom «Context», et innebygd API som tillater deling av tilstander mellom ulike komponenter. Context er egnet for små og mellomstore applikasjoner. For større apper kan man benytte state management biblioteker som MobX og Redux.
Flutter
Flutter benytter en kombinasjon av tilnærminger for å håndtere tilstand. For mindre applikasjoner kan man bruke pakker som Riverpod og Provider.
Flutter bruker også Business Logic Component (BLoC-mønster) for statshåndtering. Dette skiller forretningslogikken fra presentasjonslaget. Strømmer og hendelser brukes i denne tilnærmingen.
Vinner
Både React Native og Flutter har gode metoder for statshåndtering. Det finnes ingen klar vinner. Redux kan også brukes til å administrere tilstand i begge.
#6. Læringskurve
Hvor enkelt det er, eller hvor lang tid det tar, å lære et nytt rammeverk er viktig for både nybegynnere og erfarne utviklere. Selv om læringsevner varierer fra person til person, er noen språk/rammeverk enklere å lære enn andre.
React Native
React Native benytter JavaScript, som har mange tilhengere. Rammeverket ble opprettet i 2015 og har fått en stor tilhengerskare. Plattformen har over 23 000 forks og 109 000 stjerner på GitHub.
Dersom du allerede har kunnskap om JavaScript, bør det ikke være vanskelig å lære React Native. Ressurser for JavaScript og React Native er lett tilgjengelige, og du kan hente inspirasjon fra disse.
Flutter
Flutter benytter Dart. Flutter ble lansert i 2017 og er ikke like populært. Selv om det er lett å lære Dart/Flutter, kan det hende du ikke finner like mange ressurser for Dart, da det er et nisjespråk. Flutter har over 25 000 forks på GitHub.
Vinner
Det er vanskelig å kåre en vinner i denne kategorien. En person som allerede har kunnskap om JavaScript vil nok foretrekke React Native.
En utvikler med kunnskap om Dart vil trolig velge Flutter. Dersom utvikleren ikke har kjennskap til JavaScript eller Dart, vil valget av kryssplattformrammeverk være en personlig preferanse.
Kjente merker som bruker Flutter
Flutter har blitt brukt til å utvikle diverse Google-mobilapper. Rammeverket benyttes også av merker som:
- Alibaba Group
- Abbey Road Studios
- Google Play
- eBay
- CrowdSource
- 4 bilder 1 ord
Merker som bruker React Native
React Native har blitt brukt av mange store merker for deres Android- og iOS-apper. Noen av de største navnene er:
- Facebook Ads Manager
- Oculus
- Microsoft-apper (Microsoft Office, Skype, Microsoft Teams og Xbox Game Pass)
- Shopify, Shopify Inbox og Shopify Point of Sale
Når bør du unngå Flutter og React Native
Kryssplattformløsninger som Flutter og React Native kan spare mye tid og ressurser. De er likevel ikke ideelle for alle applikasjoner. Her er noen tilfeller der de ikke er anbefalt:
- Appen er avhengig av funksjoner i det underliggende operativsystemet: Appen din må kanskje bruke funksjoner som mikrofon som er spesifikke for et operativsystem.
- Du trenger en app med høy ytelse: En kryssplattformløsning er ikke optimal dersom du ønsker en veldig responsiv applikasjon med høy ytelse.
Konklusjon
Dersom du trenger en rask app, er Flutter det beste alternativet. Hvis du ønsker å utvikle en app med et stort fellesskap i ryggen, bør du vurdere React Native.
Valget mellom Flutter og React Native avhenger av din forståelse av det underliggende språket, hvilken app du ønsker å utvikle, samt dine personlige preferanser. JavaScript-utviklere vil nok foretrekke React Native, mens Dart-programmerere vil foretrekke Flutter.
Du kan også utforske React vs. React Native.