React Native – the basics

Vid det här laget har nog de flesta, om inte alla, i tech-branschen hört talas om facebooks JavaScript-ramverk, React. Men en av de saker som jag tycker är coolast med React är att det finns två olika typer, React JS, som är skapad för webben och React Native som är gjord för smartphoneapplikationer. Jag tänkte i detta blogginlägg ge en kort introduktion till React Native och skillnaderna mellan React Native och React JS.

Kort sammanfattat så är React Native ett JavaScript-ramverk som används för att skriva appar. En stor skillnad mellan React och vanlig “vanilla” JavaScript är att projektet inte delas upp i tre delar (JavaScript, HTML och CSS). React Native skrivs istället, som React JS, i JSX som är som en mix av JavaScript och HTML-liknande markup. Det tillåter att UI:t istället är uppdelat i komponenter som är fristående, återanvändbara delar. Detta gör det lättare för flera personer att jobba på samma kod och koden blir mer återanvändbar.

Nästan alla komponenter man skapar i React kommer att behöva hantera något som kallas states eller props. Props är variablerna som överförs från en överordnad komponent till en underordnad komponent. Komponenter kan anpassas när de skapas utifrån de props som skickas in. Detta kan påverka hur komponenten fungerar, ser ut och dess innehåll. States är också variabler, men med skillnaden att de inte skickas som parametrar utan istället initialiserar och hanterar komponenten dem internt. Genom att använda States kan React-komponenter sin output över tid som svar på användarens agerande, nätverkssvar och annat. Med State och props sätts egenskaper på komponenterna.

För att rendera interaktiva UI:s så måste DOM:en (beskrivningen för hur sidan ska se ut) uppdateras vilket är prestandamässigt dyrt och om det görs för ofta kan det göra appen märkbart långsammare. Det React JS gör för att komma runt detta är att använda en virtuell DOM. Den virtuella DOM:en är ett lager mellan utvecklarens beskrivning av hur saker ska se ut och arbetet som görs för att faktisk rendera sidan. Den möjliggör att de nödvändiga skillnaderna kan räknas ut i minnet genom att jämföra den gamla virtuella DOM:en med den nya. Sedan renderas endast de nödvändiga skillnaderna om i webbläsarens “riktiga” DOM. React Native fungerar på samma sätt, bara att istället för att rendera till en webbläsares DOM anropar den Objective-C APIer för att renderar till iOS komponenter, eller Java APIer för att rendera till Android komponenter, detta görs med hjälp av den så kallade bryggan.

Ytterligare en skillnad mellan React JS och React Native är att React JS renderar vanliga HTML-element medan React Native använder React-komponenter, <div><span><li><img> blir istället <View><Text><FlastList><Image>. Det finns även plattformsspecifika komponenter t.ex. .

Fördelar

• Lättare för webbutvecklare att skriva appar: Om man redan kan React JS eller bara JavaScript är det mycket lättare att skriva appar i React Native jämfört med att lära sig Swift eller Kotlin från början. Om man istället kan Java så är det självklart lättare att lära sig skriva Android appar.
• Appen kan byggas till både iOS och Android: Detta är en stor fördel med React Native eftersom samma team kan göra appen både till iOS och Android. Dock är det oftast inte så enkelt att man bara kan bygga exakt samma kod till båda operativsystemen. Dels kommer viss design behöva göras om då det finns olika guidelines för iOS och Android, men även en del funktionalitet kommer behöva göras om då t.ex. Keychain är en användbar grej i iOS som inte finns i Android.
• Båda de två föregående punkterna kan minska resursbehovet: En utvecklare som kan React kan skriva kod för web, Android och iOS
• Bättre prestanda än med webbvyer: Till skillnad från andra sätt att skriva appar med JavaScript så renderar React Native appar med riktiga mobil UI komponenter och inte webbvyer, vilket leder till bättre prestanda och ger apparna tillgång till native UI element så som popups och telefonens hårdvara.
• Går att skriva i alla textediterare: Man måste inte använda Xcode eller Android Studio vilket kan vara skönt om man är van vid andra editerare.

Nackdelar

• React Native är fortfarande ett nytt språk: React Native är inte lika utvecklat som React JS. Detta kan ses som en fördel med att det är ett väldigt modernt språk som konstant utvecklas men det innebär också att det förändras snabbt och saker blir också snabbt utdaterade.
• Koden översätts vilket kan orsaka buggar, och göra debugging svårare: Alltid när man lägger till ett extra steg där något kan gå fel blir det svårare att debugga.
• Samma kod kan uppföra sig olika på iOS och Android: Ibland vet man att detta är fallet t.ex. Colour attributet på den inbyggda knappkomponenten. På Android används den för att byta bakgrundsfärg medan på iOS byter den textfärgen på knappen.
• Native språken är mer anpassade till hårdvaran: Även om React Native har hög prestanda kommer den aldrig ha lika hög prestanda som Native språken. Det kommer inte heller vara lika anpassat till hårdvara såsom sensorer. T.ex på iOS så kompileras React Native komponenter till Objective-C men Apple har skrivit om all sin kod till Swift.
• React Native kräver att facebooks utvecklare har skrivit en “översättning” av iOS/Android-funktionen: Exempelvis ‘Dark mode’, vilket finns i iOS och Android, existerar då inte automatiskt i React Native. Inte förrän någon har valt att skapa den ‘bryggan’. Det betyder att det inte finns samma utbud av funktioner/ komponenter. Men om det skulle vara så att man saknar något går det att skriva komponenter i Native-språken som sen kan anropas av React Native.

Sådant som kan vara bra att tänka på

• Det finns paket som inte är gjorda av React men som är mer eller mindre nödvändiga, t.ex. Redux som hanterar variabler.
• Npm har många paket som kan förenkla utvecklingen men om man har specifika krav är det ofta ändå värt att skriva en egen komponent
• Det är skillnader mellan iOS och Android appar, t.ex. navigeringen i appen. Max 70% av koden går att återanvända mellan operativsystemen, vilket betyder att minst 30% kommer behöva skrivas specifikt till ett av operativsystemen
• För den ovana kan det vara krångligt att tänka om i komponenter istället för sidor
• Kom ihåg att testa på olika skärmstorlekar

Om du vill läsa mer om övergången från React till React Native så kan du hitta mer om det i Abenezer blogginlägg Övergången från React till React Native.