Ny arkitektur: Nå har React Native blitt mye raskere

Noe av det som gjorde at React Native-apper kunne føles mindre "snappy" enn 100 % native-apper er tatt bort og byttet ut med en helt ny arkitektur.

React Native har fjernet en asynkron "bro" som har vist seg å være en flaskehals. 📸: Kurt Lekanger
React Native har fjernet en asynkron "bro" som har vist seg å være en flaskehals. 📸: Kurt Lekanger Vis mer

Kryssplattform eller ikke, det er et spørsmål mange utviklere stiller seg når de skal utvikle apper til mobiltelefoner. Mange velger gjerne kryssplattform for å slippe å måtte kode i to forskjellige programmeringsspråk – med andre ord; spare tid og penger. Mens andre igjen mener ingenting slår en ekte native-opplevelse:

– Vi har tidligere hatt en hybrid-app, men mange var ikke fornøyd med den. Så da gikk vi over til native, uttalte Posten.no til kode24 da vi besøkte dem.

Ytelse og responsivitet har vært ett av argumentene native-tilhengere har brukt mot kryssplattformløsninger som React Native. Ting virker ikke like "snappy" som i apper som er laget fra bunnen av i Kotlin på Android eller Swift på iOS.

Det er imidlertid ikke sikkert ytelsesargumentet holder lenger: React-teamet meldte nemlig forrige uke at de nå er klare med en ny versjon av React Native som bruker en helt ny arkitektur i bunnen.

React-teamet har jobbet med den nye arkitekturen helt siden 2018, og den er nå standard fra og med React Native 0.76.

Fjerner "broen"

Med den nye arkitekturen, som har fått navnet "New Architecture" (!), er den største flaskehalsen i React Native fjernet: broen ("bridge").

For å forklare litt nærmere: React Native har til nå hatt en bro, som er et asynkront kommunikasjonslag som ligger mellom JavaScript-koden og native-plattformen. Dermed kan utvikleren definere brukergrensesnitt og applikasjonslogikk med JavaScript/React-kode, og så vil broen sørge for å kommunisere med Android- eller iOS-enhetens plattformspesifikke funksjoner og UI-elementer.

Den ferdige appen blir altså på sett og vis en native-app der du bruker native UI-komponenter og har tilgang til API-ene til Android- eller iOS-plattformen – men det er et "oversetterlag" som gjør at du kan skrive i JavaScript/React.

Broen i "gamle" React Native viste seg å være en flaskehals. Fra React Native 0.76 kan JavaScript-koden din kommunisere direkte med plattform-native metoder skrevet i C++. 📸: reactnative.dev
Broen i "gamle" React Native viste seg å være en flaskehals. Fra React Native 0.76 kan JavaScript-koden din kommunisere direkte med plattform-native metoder skrevet i C++. 📸: reactnative.dev Vis mer

Siden kommunikasjon over broen var asynkron, måtte JavaScript-koden vente på svar fra native-plattformen før den kunne fortsette – dette kunne føre til forsinkelser og ytelsesproblemer i noen tilfeller.

Broen er nå byttet ut med noe de kaller JavaScript Interface (JSI), som gir React Native en direkte kobling mellom JavaScript-koden din og native plattformspesifikk kode skrevet i C++. Og alt skjer synkront.

Kort fortalt: JavaScript-kode kan nå direkte kalle metoder i native-plattformen, uten å sende meldinger frem og tilbake asynkront via JSON.

Gjør ting som ikke tidligere var mulig

React Native-teamet skriver i en tidligere bloggpost om den nye arkitekturen at fjerning av broen til fordel for JSI gjør det mulig å ta i bruk løsninger som ikke tidlig var mulig å bruke. Det tok rett og slett for lang tid å serialisere og sende data frem og tilbake over broen.

JSI gjør det for eksempel mulig å bruke et populært kamerabibliotek, VisionCamera, til å prosessere bilder fra et kamera i sanntid.

– En typisk framebuffer er 10 MB, som tilsvarer grovt regnet 1 GB med data i sekundet, avhengig av antall bilder i sekundet. Sammenlignet med serialiseringskostnaden ved å bruke broen, håndterer JSI den mengden data lett, skriver React Native-teamet.

Med den gamle arkitekturen var det vanskelig for apper å oppnå 60 FPS (bilder i sekundet) pålitelig.

Den nye arkitekturen betyr i tillegg til bedre ytelse også at React Native får støtte for mye moderne React-funksjonalitet som blant annet Suspense og useLayoutEffect.

Fjerning av broen skal også forbedre oppstartstiden til React Native-apper. Du kan lese mer om alle endringene her.

Et selskap som valgte React Native er gavekort-appen Glede. Les om hvorfor de valgte nettopp denne løsningen fremfor å utvikle native-apper fra bunnen av: