En arkitektur for innovasjon med React-Native (del 1): Expo

Kenneth og Inderjit — Foto: William Robin Walter

Vi skal igjennom en serie på 5 bloggposter se nærmere på hvordan et lite tverrfaglig team i Fremtind arbeider med konsept- og produktutvikling og benytter rammeverk som React-Native, Expo, styled-components og Storybook til å gjenbruke kode og komponenter på kryss av web- og mobilplattformene.

• → En arkitektur for innovasjon med React-Native (del 1): Expo
• En arkitektur for innovasjon med React-Native (del 2): Styled-components
• En arkitektur for innovasjon med React-Native (del 3): Storybook️
• En arkitektur for innovasjon med React-Native (del 4): Supernova Studio / FramerX / BuilderX
• En arkitektur for innovasjon med React-Native (del 5): Når er React-Native det riktige valget?

Skal man utvikle for flere plattformer kan man i verste fall ende opp med å utvikle flere helt separate og dupliserte tjenester i ulike programmeringsspråk hvor hver plattform krever spesialisert kunnskap å utvikle for. Dette øker kompleksiteten knyttet til prosjektstyring, utvikling og rekruttering betraktelig. Duplisering og koordinering blir en flaskehals som struper hastigheten man er i stand til å iterere på produktet.

Ønsker man å være konkurransedyktig ved å tilby de beste kundereisene på kryss av plattformene uten duplisering av både arbeid og utgifter må man tenke på disse utfordringene tidlig i prosessen.

Vi skal dele litt om hvordan vi har rigget oss for å tilrettelegge for kryssplattform og hurtig utvikling for flere flater.

React-what?

React er en moden teknologi som allerede er brukt i produksjon av selskaper som Facebook, Instagram, Netflix, Tesla & PayPal m.m. React er ikke bare et JavaScript-bibliotek, men en filosofi og tilnærming til utvikling av front-ends. React tilrettelegger for å bryte opp en kompleks app i små selvstendige komponenter.

Sommeren 2013 så noen av utviklerene i Facebook seg lei på den trege utviklingshastigheten og kompleksiteten ved å utvikle for flere plattformer. Facebook hadde da investert betydelige ressurser i sitt eget rammeverk for apputvikling på web: React.

Var det mulig å benytte React til mobil-utvikling uten problemene som web-views og andre kryssplattformløsninger hadde?

Lo and behold: 🔥🔥🔥React-Native🔥🔥🔥

React-Native er et UI-rammeverk som lar utviklere lage native- og web-applikasjoner basert på én felles kodebase skrevet i J̸a̸v̸a̸s̸c̸r̸i̸p̸t̸Typescript*. React-Native lar deg benytte dine Reactferdigheter til å rendre og manipulere native komponenter på lik linje som React hjelper deg manipulere DOM-elementer på web.

React-Native forsøker først og fremst å være et “Learn once, write anywhere” alternativ, men med den riktige set-upen kan man også få “deploy everywhere”😎

*Typescript er en sterkt typet dialekt av Javascript som egner seg bedre til større prosjekter. Det kommer på en god 4. plass over mest likte programmeringsspråk (Kilde). Javascript er for øvrig for sjette år på rad det mest brukte programmeringsspråket (Kilde).

React-Native + Expo = 🔥❤️🔥

En av de største styrkene til React-Native er tempoet man er i stand til å utvikle i, og noe som ikke blir snakket nok om er fordelen med å unngå siloer ved å dele erfaring og kunnskap, samt flytte ressurser mellom plattformene.

Med Expo er utvikling for flere plattformer og enheter også enklere. Expo hjelper deg sette opp en reverse proxy og synkroniserer appen fra utviklermaskinen til en eller flere enheter så man kan utvikle og se endringene umiddelbart på samtlige, forutsatt at man installerer Expo klientapplikasjonen på enheten.

Expo strømlinjeformer hele prosessen fra prototype til produksjon

Følgende er alt som skal til for å bygge mobilappen for iOS eller Android:

expo build:ios
expo build:android

Første gangen du kjører den vil den veilede deg igjennom prosessen med å sette opp alt, og automatisk opprette sertifikater og provisjoneringsprofiler (iOS) og keystore (Android) for deretter å bygge appen på en server v.h.a. Turtle. Etter et par minutter er resultatet en link til å laste ned en ferdigbygget app du kan installere direkte eller distribuere via f.eks. Firebase og App stores, uten at du må ha installert hverken Android Studio eller Xcode (ekstra hyggelig for de på Windows).

Når man skal brukerteste en tjeneste må man i mye større grad stole på hva brukerene gjør, enn hva de sier. Noen konsepter lar seg heller ikke brukerteste uten high-fidelity prototyper og alpha-apper for å se hvordan brukerene faktisk bruker løsningen i virkelighetsnære scenarioer (f.eks. chat, spill eller andre konsepter hvor interaksjon med andre er i fokus).

Man må verifisere hva brukerene faktisk gjør når de får (eller tror de får) verdiforslaget i hånda. Jo mer realistisk opplevelse du gir brukeren, jo mer nyttig og reel er tilbakemeldingene

Expo strømlinjeformer hele prosessen fra prototype til produksjon og gir oss muligheten til å utvikle og teste verdiforslag i hendene til brukeren raskere. Brukerene installerer kun Expo-klienten på deres enhet og kan kjøre appen fra deres egen mobil uten at man må utveksle UDIDs eller legge de til i TestFlight/Google målgrupper.

Noe som ikke blir snakket nok om er fordelen med å unngå siloer ved å dele erfaring og kunnskap, samt flytte ressurser mellom plattformene

Med et designsystem og kryssplattform komponentbibliotek til grunn er ett eller flere små team i stand til å arbeide med høy autonomi og effektivitet for alle plattformene. Man kan på kort tid gå fra en prototype på èn plattform til full-skala utvikling for alle plattformene når du har verifisert product-market-fit.

Overordnet arkitektur

Expo strømlinjeformer hele veien fra prototyping til produksjon med React-Native for samtlige plattformer (web, Android, iOS). Expo gjør det enkelt å komme i gang, og tilbyr en mulighet til å konvertere prosjektet til et selvstående prosjekt om appen krever integrasjon med native funksjonalitet utover det Expo tilbyr.

Ready, set, code 🚀

I fortsettelsen vil vi dele litt om hvorfor og hvordan du kan integrere et designsystem, hvordan du lager et kryssplattform komponentbibliotek, hvordan du kan sette opp en tilsvarende set-up i et monorepo og hvordan man integrerer dette med CircleCI for den ultimate utviklingsflyten!

I mellomtiden kan jeg anbefale bloggen til William Candillon for å se hva man kan få til med React-Native

“Can it be done in React Native?” — a case for declarative gestures and animations

og hvordan TasteSpace utviklet en app på 24 timer

Week 3: Building a mobile app in 24 hours using Expo Snack and CLI

Test ut en React-Native + Expo app her:

Åpne den i en ekstern fane og se forhåndsvisning i nettleseren, eller kjør den på din egen mobiltelefon (last ned Expo i app store/play store, trykk “Run on your device” og følg instruksjonene) og få bakoversveis når du endrer teksten i nettleseren og umiddelbart ser det oppdatere seg på mobilen din:

Får du også overtenning av innovasjon, IoT og mulighetene datafangst + maskinlæring gir til å forutsi og forebygge? Se hvilke stillingsutlysninger som er åpne hos Fremtind her.