's Picture

React Native - Ytterligare en halvdan hybridlösning?

Postad av Martin Almgren

Det finns ett team på Expressen som kan nästan allting om native-utveckling. Det är inte vårt team. Vi är tre utvecklare vars primära fokus är webb. Ändå så har vi just internlanserat en prototyp av vår första native-app.

När jag började i mitt nuvarande team hade jag inte arbetat i React över huvud taget. Den råa mängden experimentella EcmaScript 2015-funktioner och tredjepartsbibliotek gjorde att exempel efter exempel kändes som en återvändsgränd. Efter att ha lusläst specifikationen för EcmaScript 2015/2016 klarnade allt och flådiga funktioner såsom spread operators, class och arrow functions blev självklarheter. Än tydligare blev det när jag insåg att majoriteten av de tredjepartsbibliotek som gång på gång refererades inte var särskilt komplexa, i många fall inte mer än några rader kod.

Teamet påbörjade arbetet med att bygga en proof-of-concept för att validera att React var rätt teknik för vårt use-case. Vi satte upp ett arbetssätt baserat på end-to-end-tester med hjälp av zombie.js. I en stund av ren briljans lyckades vi komma över nycklarna till Expressens hemliga utbildningslokal som snabbt blev vårt hackerfäste. Vi tog inspiration från ett av våra systerteam som också jobbar med React och spenderade den kommande veckan med att mob-programmera framför en 50"-TV. Genom att iterativt jobba framåt med ett test för varje sak vi byggde fick vi ett naturligt och behovsdrivet sätt att lära oss grunderna i React och Redux.

När vi visade resultatet av vår POC för våra UX-kollegor så uppstod en ganska klassisk fråga - ska vi ha en app eller inte? Vi bollade frågan under en veckas tid, diskuterade skalappar, nativeappar och allting däremellan. Vi läste på om React Native, ett ramverk som låter utvecklaren definiera native-komponenter och bygga native-appar för iOS och Android i JavaScript, och diskuterade vidare. Var vi än vände oss så var det svårt att få klara svar - var React Native ett hållbart spår?

Jag har tidigare provat andra hybridramverk utan större framgång, men jag kunde inte släppa känslan av att React Native faktiskt var annorlunda. Så kom det en kväll efter jobbet, när jag i ett rent infall av cowboykodande fick för mig att forcera in React Native. Jag skapade en egen branch och, utan att någonsin ha skrivit en rad kod React utan mina kollegor vid min sida, byggde Expressens första native-app i JavaScript. Koden var inte vacker, men appen fungerade och den kändes på riktigt native!

När jag visade appen för teamet följande dag kunde vi konstatera att användarupplevelsen i prototypen byggd med React Native överträffade den första prototypen vi hade skapat i React. Kanske var det här ett sätt för oss att snabbt skapa testbara prototyper med rätt användarupplevelse trots allt! Vi justerade vår arbetshypotes och tog React Native som huvudspår.

Min snabba konvertering av projektet från React till React Native hade dock lämnat sina spår - all form av struktur och konsekvens var borta och vi hade 50 testfall som fallerade utan hopp om räddning.

Vad som inte dödar honom, gör honom starkare.

Precis som i Nietzsches gamla ordspråk så var det dock i grunden något positivt. React Native ställde nya krav på vår kod och som följd hittade vi en rad svagheter i projektet. Våra vyer var för stora, vi hade komplexitet på fel ställen och vi hade inte strukturerat projektet på ett hållbart sätt. Eftersom zombie.js är väldig specifikt för webb så var våra vackra end-to-end-tester tyvärr dödsdömda. Efter några dagars städande så började vi dock komma på fötter igen, vi hade brutit upp vyerna i presentations- och logikkomponenter, börjat modularisera funktionalitet, tester och stilmallar samt sett att våra tekniska diskussioner kring vyernas komposition bidrog till de övergripande UX-diskussionerna.

Såhär en vecka senare så ser vår nuvarande arbetshypotes ut att kvarstå - vi fortsätter bygga i React Native tills användarbehovet eller tekniken tvingar oss till ren webb. Vi har snart extraherat ut all logik från vy-komponenterna och kan då relativt enkelt gå tillbaka till att bygga en ren React-app.

Så, vad tycker vi om React Native?
 

PROS
  • Webbutvecklare kan skapa native-appar.
  • Du kan plocka in native-utvecklare om du verkligen måste göra något som inte finns inbyggt i React Native.
  • Vy-lagret är faktiskt native, något som dessutom körs i en separat process från JavaScript-logiken.
  • Om du har React- och native-kompetens i huset så har du den kompetens som krävs för att förvalta appen.
  • Om du har strukturerat projektet på rätt sätt så är mängden kod som skiljer iOS-, Android- och webbappen inte mer än ca. 10%.
  • Facebook står bakom React (och React Native)

 

CONS
  • Version 0.20 och 1 000 öppna issues på github känns inte helt stabilt.
  • Få kommersiellt framgångsrika exempel att titta på.
  • Relativt begränsad information på google.
  • Facebook står bakom React (och React Native)

 

PS. Missa inte vår nästa bloggpost, följ oss på Twitter!

Till startsidan