Christopher Kvarme og Vegard Norvik er del av teamet som utvikler React Native-app for SOL. Foto: Ole Petter Baugerød Stokke
Christopher Kvarme og Vegard Norvik er del av teamet som utvikler React Native-app for SOL. Foto: Ole Petter Baugerød StokkeVis mer

Derfor lagde SOL ny app i React Native

- Det var et enkelt valg, forteller utviklerne som lagde en splitter ny app på fire måneder. Og de har noen gode råd til hvordan du får til det samme.

Høsten 2017 holdt SOL-teamet arbeidsmøte med hele staben. Temaet var hvordan leserne kunne få mer kontroll over innholdet de konsumerte.

Mulighet til å abonnere på kategorier, bestemme når på døgnet viktige nyheter skulle mottas og bestemme relevante lokale nyheter var alle behov som måtte dekkes fremover.

Det ble besluttet at den eksisterende SOL-appen måtte byttes ut.

Den nye SOL-appen, bygd med React Native, kjører på både Android og iOS. Foto: Ole Petter Baugerød Stokke
Den nye SOL-appen, bygd med React Native, kjører på både Android og iOS. Foto: Ole Petter Baugerød Stokke Vis mer

Fra webview til native

Den eksisterende SOL-appen baserte seg på å vise alt gjennom et webview. Det vil si at appen egentlig er en nettside, designet med menyer og navigasjon for å ligne en vanlig app.

Christopher Kvarme og Vegard Norvik er to av utviklerne teamet som fikk ansvar for å bygge en helt ny SOL-app.

- For SOL er det viktig å være tidlig ute med nyheter, og da er app med varsler viktig. Vi kom frem til at det var lettere å legge til rette for økt personalisering i appen gjennom å satse på en skikkelig native app, forteller Christopher.

Native-app er viktig for SOL. Det mener Christopher Kvarme, en av utviklerne bak SOLs nye React Native-app. Foto: Ole Petter Baugerød Stokke
Native-app er viktig for SOL. Det mener Christopher Kvarme, en av utviklerne bak SOLs nye React Native-app. Foto: Ole Petter Baugerød Stokke Vis mer

React Native

Teamet bestemte seg raskt for å satse på rammeverket React Native, som lar deg utvikle med samme kodebase for iOS og Android. React Native baserer seg på det ekstremt populære rammeverket React, utviklet av Facebook.

React har tatt utviklingsverdenen med storm og har på kort tid blitt et av de mest populære frontend Javavascript-rammeverkene.

- Alt i SOL er React, og hele teamet kan det, så for oss var det et enkelt valg forteller Christopher.

For SOL var tidspress også en faktor. De måtte levere en app raskt.

Forventningen var at rammeverket skulle være gjenkjennelig for en Javascript-utvikler med kjennskap til React, og samtidig modent nok til å kunne brukes i produksjon.

Modent nok

For mye fikling i Xcode og Android Studio var frykten.

For selv om React Native er et populært rammeverk, er det fortsatt svært ungt. Det ble ikke tilgjengelig for eksterne utviklere før 2015 og er fortsatt i beta i 2018.

Vegard Norvik synes det var lett å lære React Native. Foto: Ole Petter Baugerød Stokke
Vegard Norvik synes det var lett å lære React Native. Foto: Ole Petter Baugerød Stokke Vis mer

Heldigvis viste det seg at det var lite å frykte.

- React Native er helt likt som vanlig React. Man skriver «view» istedenfor «div», men ellers er det veldig mye av det samme. Bruker man stil-rammeverk som Styled Components kan man til og med skrive CSS. Selv om ikke all CSS er støttet, forteller Vegard.

«Gikk til helvete»

Utvikling gikk for det meste på skinner, men enkelt skjær i sjøen dukket opp underveis.

I React Native finnes det for eksempel flere rammeverk som prøver å gjenskape måten navigering fungerer i iOS og Android. Teamet prøvde flere uten hell, før de landet på React Navigation, som de konkluderte med var «det minst dårlige».

- Menyen gjorde at ting gikk til helvete. Plain setup var OK i mange rammeverk, men det var vanskelig å få dem til å funke med våre behov. React Navigation var den minst dårlige, forteller Vegard.

Expo, et verktøy for hurtig utvikling av React Native-apper, måtte de også gi opp. Siden SOL allerede hadde et bestemt uttrykk, var det behov for å bruke komponenter som krevde endring av native-kode. Noe Expo ikke legger opp til.

«- Xcode er et monster, men den er din venn.»

React Native baserer seg nemlig på at native-koden skal være gjemt bort i komponenter, som utvikleren ikke skal trenge se på.

Selv om teamet måtte gjøre enkelte endringer i native-koden, blant annet da forsiden krevde gradient over bilder, ble de ikke avskrekket av Xcode.

- Xcode er et monster, men den er din venn. Vi har primært måttet bruke Xcode til å pushe til app store, forteller Christopher.

Lagde egne løsninger

I starten var målet at appen skulle bruke mest mulig plattformspesifikk native-funksjonalitet på iOS og Android.

- Vi skulle blant annet implementere bokmerking inne i appen. Først implementerte vi det via den innebygde delings-funksjonaliteten, men vi fant ut at det ble for kronglete for brukeren. Derfor valgte vi å implementere vår egen løsning, forteller Christopher.

Bieffekten ble at testing og utvikling faktisk gikk lettere. Det er nemlig ingen mulighet for å kjøre, eller teste, iOS-apper med mindre man har tilgang på macOS.

Dermed kan det lønne seg å begrense bruk av iOS-spesifik native-funksjonalitet hvis ikke alle utviklere kjører macOS.

Christopher Kvarme kjører macOS og har derfor tilgang til å bygge iOS apper med Xcode. Foto: Ole Petter Baugerød Stokke
Christopher Kvarme kjører macOS og har derfor tilgang til å bygge iOS apper med Xcode. Foto: Ole Petter Baugerød Stokke Vis mer

Hemmelighet bak suksessen

Appen gikk live for iOS og Android i desember 2017, knappe fire måneder etter teamets første møte med React Native. Da hadde de allerede lagt bak seg en smertefri betatest-runde på både Android og iOS-enheter.

En stor hemmelighet bak suksessen var bruken av plattformen Firebase. En platform med tjenester for apper og web-applikasjoner, som støtter både Android og iOS.

Firebase ga et system for å implementere varsler på tvers av plattformer, og en ypperlig måte å samle data om bruk.

- Firebase hjalp blant annet i testing på Android, siden vi kunne se hvilken telefoner som hadde problemer. Det gjorde at vi kunne gi ut en app som kjørte på det meste uten å kræsje, forteller Vegard.

Anbefaler debug-verktøy

Debug-verktøyene Sentry og Reactotron anbefaler de to utviklerne også på det varmestene.

React Native har nemlig en tendens til å gi veldig kryptiske feilmeldinger. Reactotron gir deg blant annet muligheten til å åpne den konkrete linjen hvor en feilmelding oppstår i editoren din, og den støtter populære editorer som blant annet Visual Studio Code.

Miljøet rundt React Native berømmer de også. De fikk stort sett hjelp med alt de spurte om, uansett rammeverk.

- Styr unna Google-treff som er over ett år gammelt. De beskriver gjerne kode som er utdatert, tipser Vegard.

Vegard Norvik utvikler fra Windows, men har opplevd få problemer med samarbeid på tvers av utviklingsplatformer. Foto: Ole Petter Baugerød Stokke
Vegard Norvik utvikler fra Windows, men har opplevd få problemer med samarbeid på tvers av utviklingsplatformer. Foto: Ole Petter Baugerød Stokke Vis mer

Ikke gira på Flutter

For Christopher og Vegard er fortsatt React Native det beste valget for apper av typen SOL trenger. Selv om Google banker på døren med sin egen konkurrent, native-rammeverket Flutter, har det ikke oppnådd samme appellen hos de to utviklerne.

- Vi er ikke så veldig gira på å lære programmeringsspråket Dart, og det må du kunne for å bruke Flutter, forteller Vegard.

SOL-utviklerne har til slutt noen konkrete råd for de som vurderer å bygge en native-app rundt tjenesten sin.

- Apper føles som en førsterangs-borger på plattformen, i forhold til en webapplikasjon, mener de.

- Men ikke bygg en app bare fordi du vil gi brukerne dine push-varsler. Push er ikke nok. Tenk på hva native-funksjonalitet gir. Ikke bare gjenskap det du har på web.

(Vi gjør oppmerksom på at tjenesten SOL og kode24 begge er en del av Scandinavia Online AS.)