Bedste Rammeværk til Cross-Platform Mobiludvikling?

Næsten alle har en smartphone i dag. I USA ejer 91% af voksne en, i Europa er tallet 89%, mens Deloitte forudsiger, at 75% af voksne i Indien vil have en smartphone inden 2026. Samlet set anslås der at være 4,8 milliarder smartphone-brugere på verdensplan, hvilket er et utroligt tal! For tech-startups og tech-virksomheder, der bygger forbrugerprodukter, er det derfor en grundlæggende forventning, at deres produkter kan bruges på smartphones, og at der findes en mobilapp til produktet.

Så hvordan bygger man mobilapps? Der er masser af valgmuligheder: du kan bygge en native mobilapp til iOS ved hjælp af Swift eller Objective C som programmeringssprog, lave en til Android ved hjælp af Java eller Kotlin, og selvfølgelig kan du udvikle en webapp til både desktop- og mobilwebbrugere. Alt dette løber op i tre separate kodebaser og masser af gentagelse af forretningslogik. Eller du kan gøre, hvad startups som den nye sociale medieplatform Bluesky gjorde: have én kodebase, der driver web-, native iOS- og native Android-apps. For Bluesky skrev en enkelt udvikler den indledende version af alle tre apps ved hjælp af React Native og Expo.

Cross-platform rammeværker og tilgange tilbyder en måde at bruge en enkelt kodebase til at drive flere native apps og en hjemmeside. For et årti siden var de fleste cross-platform teknologier i deres tidlige stadier, men tingene ændrer sig; i dag er de modne og robuste. Denne artikel dykker ned i de nuværende cross-platform udviklingstilgange og dækker økosystemet, de førende rammeværker og hvordan man vælger det rigtige.

Hvad er Cross-Platform Udvikling, og Hvorfor er det Vigtigt?

Cross-platform udvikling handler om at skrive kode én gang og derefter implementere den på tværs af flere operativsystemer, typisk iOS og Android. Dette står i kontrast til native udvikling, hvor man bygger en separat applikation for hvert operativsystem ved hjælp af specifikke sprog og værktøjer (f.eks. Swift/Kotlin). Hovedformålet med cross-platform er at spare tid, ressourcer og penge ved at undgå duplikering af udviklingsarbejde.

For startups og etablerede virksomheder betyder det, at de hurtigere kan bringe deres produkt på markedet, nå et bredere publikum fra starten og opretholde en mere ensartet brugeroplevelse på tværs af enheder. Forestil dig at skulle vedligeholde to separate teams, to separate kodebaser og to separate udviklingscyklusser for hver opdatering eller funktion – det er dyrt og ineffektivt. Cross-platform løsninger adresserer netop denne udfordring, hvilket gør dem til et attraktivt valg i det moderne app-landskab.

Landskabet for Cross-Platform Rammeværker

Hvad er de mest populære cross-platform rammeværker? Interessant forskning fra Appfigures kiggede på alle topapps i iOS App Store og Android's Google Play, kiggede ind i deres binære filer og kategoriserede dem efter det anvendte rammeværk. De mest populære rammeværker for iOS- og Android-apps er uden tvivl Flutter og React Native.

Anden forskning offentliggjort på Statista antyder også, at Flutter og React Native er de mest populære valg, efterfulgt af Cordova, Unity og Ionic. I 2023 blev Flutter brugt af 46% af respondenterne, og React Native af 35% i en undersøgelse af 30.000 respondenter.

Ledende: Flutter og React Native. Disse er de to mest populære rammeværker, men det kan være svært at identificere, hvilken der er den mest populære: på iOS er der flere React Native-drevne apps, og på Android overgår Flutter-apps React Native-apps. Der er dog simpelthen flere Android-apps end iOS-apps, hvilket er grunden til, at der samlet set er flere Flutter-apps end React Native-apps. React Native har eksisteret siden 2015, og Flutter siden 2017.

Krympende: Cordova og Ionic. Ifølge Statista-undersøgelsen har begge rammeværker mindre, men skrumpende markedsandele, hvor omkring 10-12% af undersøgelsens deltagere bruger dem. Deres brug er sandsynligvis mere almindelig hos virksomheder, der byggede cross-platform apps, før React Native og Flutter opstod, og som fortsat er tilfredse med at levere WebView-baserede applikationer.

Vækstpotentiale: Kotlin Multiplatform (KMP). Denne teknologi har beskedne adoptionstakter, men ser ud til at vinde momentum. JetBrains investerer massivt i det, mens Kotlin-sproget er populært blandt native mobiludviklere, især Android-udviklere.

Hvem er Mest Populær? Flutter vs. React Native

Nye data fra 2024 Stack Overflow Developer Survey giver yderligere indsigt. Blandt cirka 6.500 respondenter, der arbejder med cross-platform mobiludvikling, er Flutter og React Native de mest populære med en betydelig margin, og har flere brugere end alle andre rammeværker tilsammen.

Hvis vi indsnævrer dataene til kun professionelle udviklere, bruges Flutter af lidt flere ingeniører, selvom forskellen måske er mindre end før. Men hvad sker der, hvis vi ser på brugen per land? I lande som USA, Storbritannien, Canada og Australien tenderer udviklere mod React Native. Omvendt, i Tyskland og Indien foretrækkes Flutter ofte mere. Denne geografiske præference er interessant og kan skyldes faktorer som lokale udviklerfællesskaber, uddannelsesinstitutioner eller store virksomheders valg i regionen.

Selvom Flutter driver flere apps, genererer React Native-apps mere omsætning. Appfigures sporede alle apps udgivet i et år og fandt, at Flutter blev brugt af 11% af apps udgivet i 2024, mens 7% brugte React Native. Til trods for færre brugere genererede React Native-byggede apps samlet set mere nettoomsætning ($287M) end Flutter-apps ($283M), efter Apple og Googles 30% nedskæringer. Dette kunne tyde på, at React Native ofte vælges til apps med stærkere monetiseringsmodeller eller til større virksomheder.

Dyk Ned i React Native

React Native fremstår som det mest populære cross-platform rammeværk på de amerikanske og britiske markeder. Hvad er de sandsynlige årsager til denne popularitet?

• Intet behov for frontend-udviklere at lære et nyt sprog: Udviklere, der kender JavaScript eller TypeScript, vil have ingen problemer med at komme i gang med React Native, og udviklere, der arbejder med React, vil finde overgangen særligt let. Som vi ved, er React det mest populære frontend-rammeværk, med omkring 70% af frontend-udviklere, der bruger det i 2024, ifølge State of Frontend 2024-undersøgelsen.
• Nem at ansætte til: Reacts popularitet betyder, at det er lidt lettere at ansætte folk med denne færdighed, end for native iOS- eller Android-udviklere. Udfordringen med at ansætte native udviklere var en af grundene til, at Coinbase flyttede til React Native i 2021.
• Expo:Expo-rammeværket er bygget til at forenkle udvikling med React Native og er især nyttigt for teams. Det bidrog til at øge adoptionen af React Native; uden Expo skal udviklere opsætte både Android Studio og Xcode, administrere emulatorer og simulatorer og administrere den native kode. React Natives egen dokumentation anbefaler at bruge Expo, når man starter, da det uden det gør arbejdet flere gange mere komplekst. Det meste af Expo er open source, men nogle tjenester som Expo Application Services (EAS) har betalte niveauer.

React Native blev open sourced af Facebook i 2015. Som navnet antyder, giver dette rammeværk mulighed for at skabe cross-platform apps ved hjælp af syntaks, der ligner React-applikationer. React Native-primitiver renderes til native platform UI-elementer, hvilket betyder, at den kompilerede app bruger de samme native UI-elementer som native iOS- og Android-apps.

Kendte Apps Bygget med React Native

Nogle populære apps bygget med denne teknologi inkluderer:

• Discord: Den sociale platform flyttede til React Native i 2016 for iOS, og i 2018 genopbyggede to ingeniører iOS-appen i React Native på et tidspunkt, hvor appen allerede havde millioner af daglige brugere. Teamet ventede med at flytte til Android af præstationsmæssige årsager, indtil de i 2022 flyttede Android-appen til React Native; de deler den samme kodebase og bevarer iOS- og Android-specifik UI for hver platform. Det er værd at bemærke, at Discord ofte vælger cross-platform teknologier: deres desktop-apps til Windows, Mac og Linux er baseret på Electron; en cross-platform desktop-teknologi baseret på JavaScript, HTML og CSS.
• Coinbase: Flyttede til React Native i 2021, hvor de havde 56 millioner brugere og $1,8 mia. i omsætning. Flytningen fra native til RN involverede migrering af mere end 200 skærme og omskoling af mere end 30 native-only ingeniører. Interessant nok hævdede Coinbase, at flytningen til RN reducerede deres koldstartstid fra 3,8 sekunder til 2,5 sekunder (stadig ret meget, for at være fair!), og forbedrede pålideligheden ved at øge crash-fri raten fra 99,4% til 99,7%. En stor motivation syntes at være at bygge mere med færre ingeniører og skabe mere konsekvente app-oplevelser på tværs af platforme. Virksomheden betegnede overgangen som en succes: den reducerede antallet af kodebaser fra 3 (iOS, Android og Web) til 2 (React Native og React Web), og webingeniører kunne arbejde på mobilappen, og mobilingeniører på webappen.
• Shopify: Gik all-in på React Native for fem år siden. For nylig reflekterede virksomheden over, hvordan det gik, og delte: mere produktivitet takket være én kodebase, der driver iOS og Android og fungerer på tværs af begge apps; ydeevne og pålidelighed (alle sider har sub-500ms indlæsningstider, og crash-fri rater er over 99,9% – begge er imponerende tal!); TypeScript for the win (brug af TypeScript gør det nemt for udviklere at overføre mellem React og React Native). Der er ulemper: debugging er værre end for native apps, og opdatering til nye React Native-versioner kan være smertefuldt. Shopify beskæftiger mere end 2.000 softwareingeniører og er en af de største teknologivirksomheder, der er gået all-in på denne teknologi. At det virker for dem fem år senere, er en stærk tillidserklæring.
• Meta, Microsoft og Amazon: Er ikke kendt for udelukkende React Native-apps, men bruger masser af RN-funktionalitet i deres apps. Meta, React Natives skaber, bruger det i høj grad til Facebook, Instagram, Ads Manager, Messenger og Meta Horizon. Microsoft bruger både React og React Native i produkter som Windows, XBox, Microsoft Office, Microsoft Teams og andre apps. Amazon bruger også RN i dele af Amazon Shopping, Amazon Alexa og Amazon Photos, samt Amazons Kindle-enhed, hvis startskærm nu renderes med React Native.

Dyk Ned i Flutter

Flutter blev lanceret i 2017 af Google som en løsning til cross-platform udvikling. Oprindeligt målrettede det Android-udviklere, hvilket gjorde det muligt for dem at skrive kode én gang for separate Android- og iOS-native applikationer.

Flutter bruger programmeringssproget Dart, et stærkt typet sprog med lignende syntaks som C# og Java. En klar ulempe ved Flutter er kravet om at lære Dart. Dette er dog let at samle op, især med erfaring med Java eller Kotlin.

Hvor React Native bruger native elementer, bruger Flutter sin egen rendering-motor kaldet Impeller. Dette designvalg betyder, at Flutter tilbyder en konsekvent UI-oplevelse på tværs af iOS og Android – og endda web! Rendering-motoren og det valgte programmeringssprog er de største forskelle i forhold til React Native og native udvikling. Jordan Bonnet, medstifter af fluo.dev, opsummerer forskellen således:

• Native Apps: Bruger specifikke sprog (Swift/Kotlin) og platformens egne UI-komponenter. Høj ydeevne og fuld adgang til enhedens funktioner, men kræver separate kodebaser.
• React Native: Bruger JavaScript/TypeScript og et "bro"-lag til at konvertere React-komponenter til native UI-elementer. Giver en "native følelse" med en enkelt kodebase.
• Flutter: Bruger Dart og sin egen rendering-motor til at tegne UI'en direkte på skærmen. Dette sikrer pixel-perfekt ensartethed på tværs af platforme og giver ofte en meget høj ydeevne.

Ydeevne: Hvor Flutter udmærker sig. På grund af sin direkte rendering-motor er Flutter ofte kendt for sin fremragende ydeevne, der til tider kan matche native apps. Dette er en stor fordel for apps med komplekse animationer eller intens grafik.

Andre Cross-Platform Tilgange og Rammeværker

Udover React Native og Flutter findes der flere andre tilgange til cross-platform udvikling, hver med sine egne styrker og svagheder:

Native-First Tilgange

• Kotlin Multiplatform (KMP): Udviklet af JetBrains, giver KMP udviklere mulighed for at dele forretningslogik mellem iOS og Android, mens UI'en stadig bygges native. Dette giver en god balance mellem kode-genbrug og native ydeevne/look-and-feel. Det er særligt attraktivt for teams med stærk Kotlin-ekspertise.
• Swift-baserede rammeværker (Skip, Scade): Disse forsøger at udvide Swift-sproget til at understøtte Android-udvikling, hvilket appellerer til iOS-udviklere, der ønsker at genbruge deres Swift-færdigheder.
• .NET MAUI (C#): Efterfølgeren til Xamarin.Forms, .NET MAUI tillader udviklere at bygge native apps til iOS, Android, macOS og Windows fra en enkelt C#-kodebase. Det er et stærkt valg for teams med baggrund i Microsofts .NET-økosystem.
• NativeScript (JavaScript): Giver udviklere mulighed for at bruge JavaScript, TypeScript eller Angular til at bygge native apps. Det adskiller sig ved at give direkte adgang til native API'er uden at skulle skrive native kode.
• Unity: Selvom det primært er kendt for spiludvikling, kan Unity også bruges til at bygge interaktive 2D- og 3D-apps til mobil. Det er ideelt for grafiktunge applikationer, men måske overkill for en simpel CRUD-app.

Web-Baserede Rammeværker

Disse rammeværker pakker en webapplikation ind i en native "skal" (WebView), hvilket gør, at den kan installeres som en app. De er gode for teams med stærk webudviklingskompetence, men kan lide under ydeevne- og brugeroplevelsesbegrænsninger sammenlignet med ægte native eller mere avancerede cross-platform løsninger.

• Cordova (tidligere PhoneGap): En af de ældste cross-platform rammeværker. Den tillader udviklere at bygge mobilapps ved hjælp af HTML, CSS og JavaScript. Appen kører inden i en WebView.
• Capacitor: En moderne og mere fleksibel tilgang til hybrid app-udvikling, skabt af Ionic-teamet. Den fungerer som et native runtime for webapps og giver nem adgang til native enhedsfunktioner.
• Ionic: Bygger oven på Cordova eller Capacitor og leverer et omfattende sæt UI-komponenter og værktøjer til at bygge apps, der ligner native apps, ved hjælp af webteknologier.
• Progressive Web Apps (PWA): Selvom det ikke er et "rammeværk" i samme forstand, er PWA'er websteder, der kan opføre sig som apps (installeres på hjemmeskærmen, fungere offline osv.). De er en god mulighed for at levere en app-lignende oplevelse uden at skulle udvikle en separat app.

Sådan Vælger du det Rigtige Rammeværk

Valget af det rigtige rammeværk afhænger af flere faktorer, herunder dit teams eksisterende færdigheder, projektets krav til ydeevne og UI-kompleksitet, samt budget og tidslinje. Her er en mental model til at identificere nøgleforskelle:

• Teamets Færdigheder: Hvis dit team primært består af webudviklere med erfaring i React og JavaScript/TypeScript, er React Native ofte det mest naturlige valg. Hvis dit team har erfaring med Java, Kotlin eller C#, kan Flutter (Dart er let at lære) eller .NET MAUI være mere passende.
• Ydeevnebehov: For apps, der kræver maksimal ydeevne, komplekse animationer eller intens brug af enhedens hardware (f.eks. spil, avancerede billedbehandlingsapps), kan native udvikling stadig være det bedste, men både Flutter og React Native er i stand til at levere høj ydeevne for de fleste applikationer. Flutter har en lille fordel på grund af sin egen rendering-motor.
• UI-Konsistens: Hvis en pixel-perfekt, ensartet UI på tværs af alle platforme er altafgørende, er Flutter ofte det foretrukne valg, da det tegner UI'en direkte. React Native benytter sig af native komponenter, hvilket kan medføre små forskelle i udseende mellem iOS og Android.
• Adgang til Native Funktioner: Begge React Native og Flutter giver god adgang til native enhedsfunktioner (kamera, GPS, etc.). I sjældne tilfælde, hvor en helt unik native feature skal bruges, kan det kræve specialudvikling eller et native modul.
• Økosystem og Fællesskab: Begge rammeværker har store og aktive fællesskaber, omfattende dokumentation og mange tredjepartsbiblioteker. React Natives økosystem er muligvis mere modent på grund af dets længere eksistens.

I sidste ende vælger de fleste teams enten React Native eller Flutter til nye cross-platform projekter. Begge er robuste, understøttes af store teknologivirksomheder (Meta og Google) og har vist sig at kunne levere succesfulde, højtydende apps. Dit valg bør primært afhænge af dit teams eksisterende ekspertise og de specifikke krav til din app.

Ofte Stillede Spørgsmål (FAQ)

Hvad er hovedforskellen mellem native og cross-platform app-udvikling?

Native app-udvikling involverer at skrive separat kode for hver platform (f.eks. Swift/Objective-C for iOS og Java/Kotlin for Android), hvilket giver optimal ydeevne og adgang til enhedens funktioner, men er dyrere og mere tidskrævende. Cross-platform udvikling bruger en enkelt kodebase til at bygge apps til flere platforme, hvilket sparer tid og ressourcer, men kan kræve kompromiser med hensyn til ydeevne eller "native følelse".

Er cross-platform apps lige så gode som native apps?

Moderne cross-platform rammeværker som React Native og Flutter er så avancerede, at de fleste brugere ikke vil bemærke en forskel i ydeevne eller brugeroplevelse for de fleste applikationer. For meget komplekse spil eller apps, der kræver ekstremt lavt niveau hardwareadgang, kan native stadig have en fordel, men for 90% af apps er cross-platform et fremragende valg.

Hvilket sprog skal jeg lære for React Native?

For React Native skal du lære JavaScript eller TypeScript. Hvis du allerede har erfaring med React for webudvikling, vil overgangen til React Native være særligt let, da syntaksen og konceptet er meget ens.

Hvilket sprog skal jeg lære for Flutter?

For Flutter skal du lære Dart. Dart er et objektorienteret sprog, der er relativt nemt at lære, især hvis du har erfaring med sprog som Java, C# eller Kotlin.

Hvad er Expo, og hvorfor er det vigtigt for React Native?

Expo er et sæt værktøjer og tjenester bygget oven på React Native, der forenkler og fremskynder udviklingsprocessen. Det eliminerer behovet for at håndtere native Android- og iOS-miljøer direkte, hvilket gør det muligt for udviklere hurtigt at komme i gang og teste deres apps på rigtige enheder uden kompleks opsætning. Expo er særligt værdifuldt for hurtig prototyping og mindre teams.

Kan jeg bruge React Native til både iOS og Android?

Ja, absolut! React Native er designet til at bygge apps til både iOS og Android fra en enkelt JavaScript/TypeScript-kodebase. Du skriver koden én gang, og den kompileres til native UI-komponenter på begge platforme.

Kan jeg bruge Flutter til både iOS og Android?

Ja, det kan du. Flutter er et cross-platform UI-rammeværk, der giver dig mulighed for at bygge native kompilerede applikationer til mobil, web og desktop fra en enkelt Dart-kodebase. Det er kendt for sin evne til at skabe visuelt tiltalende og højtydende apps med en ensartet brugeroplevelse på tværs af platforme.

Hvilken rammeværk genererer mest indtjening?

Ifølge Appfigures' data fra 2024 genererede apps bygget med React Native samlet set en smule mere nettoomsætning ($287M) end apps bygget med Flutter ($283M), selvom der blev udgivet færre React Native-apps. Dette kan skyldes, at React Native i øjeblikket er mere populært på markeder som USA og Storbritannien, hvor der potentielt er et højere forbrug pr. app.

Valget mellem native og cross-platform udvikling er en strategisk beslutning for enhver virksomhed, der ønsker at lancere en mobilapp. Mens native stadig har sin plads, har de fremskridt inden for cross-platform teknologier som React Native og Flutter gjort dem til yderst levedygtige og attraktive alternativer. Med evnen til at spare tid og ressourcer, samtidig med at man leverer en høj kvalitet og ensartet brugeroplevelse, er det ikke overraskende, at disse rammeværker er blevet de foretrukne valg for et stigende antal virksomheder, fra startups til teknologigiganter.

Hvis du vil læse andre artikler, der ligner Bedste Rammeværk til Cross-Platform Mobiludvikling?, kan du besøge kategorien Mobiludvikling.