App-magi med React Native

Denne uken var jeg i Barcelona i forbindelse med MediterraneaJS og presenterte React Native. Les mer hvis du vil vite hva det er og hvordan du bruker det til å lage apps for iOS (og etter hvert Android).

Jeg er kanskje en av de få som synes Objective C er helt ålreit. Det er i hvert fall ikke mange jeg snakker med som har mye positivt å si om språket.

Om man liker Objective C eller ei spiller for så vidt mindre rolle. Ankepunktet for mange utviklere er ulempen det er å bytte kontekst dersom man skal skrive en app for både Android, iPhone og web.

Det er her React Native kommer inn. Med ett er det nå mulig å skrive JavaScript og kjøre dette sømløst på iOS. Det er likevel ikke snakk om "Write once, run anywhere" slik man for eksempel en gang tiden så for seg utbredelsen av Java. Det er snarere snakk om å skrive i samme kontekst som man er i når man skriver for web, så derfor har Facebook stokket litt om på det og omtaler det som "Write ...".

Bak kulissene fungerer det slik at JavaScript-motoren i en iOS-app kjøres i en bakgrunnstråd og kommuniserer med hovedtråden via en kommunikasjonsprotokoll.

Dette har flere fordeler. Sett bort fra det åpenbare (at du er i JavaScript-kontekst), så er det mulig å jobbe i webmodus, med instant refresh, Chrome debugging og så videre. Ja, og det betyr: ingen kompilering.

De eneste gangene du faktisk må rekompilere appen er når du legger til ting som bilder eller egne Objective C-komponenter.

Du lurer kanskje på hvordan du kan komme i gang?

Du trenger: Mac med Xcode og en terminal med node. React Native installerer du via npm med følgende kommando "npm install --g react-native-cli". Dette installerer react-native på maskinen din, slik at du nå kan du sette opp en React Native-applikasjon. Det gjør du ved å skrive "react-native init minapp" (hvor "minapp" er navnet på din app).

[image omitted from archive]

Slik ser det ut etter at du har kjørt "react-native init".

Index.ios.js er JavaScript-filen som kontrollerer prosjektet, mens "uvapp.xcodeproj" er prosjektfilen til Xcode. Hvis du nå åpner "uvapp.xcodeproj" i Xcode og kjører den opp i simulatoren, vil du få opp en informasjonsside som viser at appen kjører og at du kan ta en "refresh" eller ta opp debug-menyen.

Hvis du kikker på index.ios.js vil du se at den har komponenter som "View", "Text" og en del andre. Du kan ikke skrive HTML-kode her, så om du setter inn <div>test</div> eller <p>test</p> vil appen gi en rød feilmelding. Dette er fordi komponentene er wrappere rundt native komponenter. Du kan tenke slik at <View> noenlunde tilsvarer <div> og <Text> noenlunde <p> og så videre.

[image omitted from archive]

React Native bruker en visningsmodell basert på "flexbox". Dette er en forholdsvis ny displaytype som også er tilgjengelig i nettleseren (men som ikke fungerer på eldre nettlesere som for eksempel Internet Explorer). Med flexbox har vi kommet et stort steg videre innen webside-utvikling, så forvent deg å høre mye om dette i årene fremover.