Om du är här kanske du undrarHur kan React Native och Expo hjälpa mig att bygga min nästa mobilapplikation snabbare?.
Som praktikanter på Imaginary Cloudfick vi i uppdrag att utveckla en applikation som på något sätt var användbar för den situation världen för närvarande står inför, coronaviruspandemin. På grund av detta måste vi anta nya rutiner för hur vi hanterar gemensamma utrymmen på företaget. Eftersom vi nu har begränsningar för hur många personer som får vistas i samma rum beroende på dess storlek, måste vi minska spridningen av viruset genom att gruppera personer som delar samma arbetsområde.
Det är också vår avsikt med denna applikation att öka medvetenheten genom att visa varningsmeddelanden och att kunna spåra tillgängligheten för ett rum utan att behöva besöka det.
Som ett resultat av dessa begränsningar var vårt mål att lösa problemet genom att utveckla en app med React Native och Expo. Vi var inte bekanta med något av dessa, vilket du kanske inte heller är, så oroa dig inte – med lite läsning och övning förstår du hur de fungerar och varför de är ett bra val för mobilutveckling. Det är därför vi tycker att det är viktigt att dela med oss av vår resa och några lärdomar från vår erfarenhet.
Det här inlägget kan hjälpa dig att lyfta ditt nästa projekt, och vi hoppas att det kan ge vägledning för dina nästa steg och visa vilka fördelar det innebär. I det här blogginlägget kommer vi att prata om dessa två ramverk, hur de hänger ihop och varför de kan spara tid, även om du inte är bekant med mobilutveckling. Men låt oss börja med själva grunderna i dessa tekniker.
React Native är ett ramverk med öppen källkod för att bygga inbyggda appar med React skapat av Facebook och släpptes 2015. Det låter dig använda inbyggda UI-komponenter och ger full tillgång till plattformens inbyggda funktioner via ett JavaScript-bibliotek. React Native gör det enkelt att utveckla för både Android och iOS samtidigt, eftersom koden kan delas mellan plattformar.
Dessutom kombinerar ramverket användarupplevelsen från inbyggda plattformar med utvecklarens kunskap om att bygga med React för webben, vilket stödjer den eftersträvade filosofin: ”Lär dig en gång, skriv var som helst”.
Expo är ett ramverk och en plattform för universella React-applikationer. Det tillhandahåller en uppsättning verktyg och tjänster som förenklar utveckling och testning av React Native-appar, vilket gör det enkelt att köra koden direkt på din telefon. Dessutom erbjuder Expo ett mer robust och utvecklarvänligt arbetsflöde.
Att ställa in utvecklingsmiljön kan variera beroende på din erfarenhet av mobilutveckling, men det är inga problem.
Om du är nybörjare på att utveckla mobilapparär det enklaste sättet att komma igång att använda Expo CLI.
Om du redan är bekant med mobilutvecklingkanske du föredrar att använda React Native CLI.
Vi kommer att gå igenom installationen för nya mobilutvecklare, för även om du redan har erfarenhet är Expo ett riktigt smidigt ramverk som är lätt att lära sig.
Det finns två verktyg som du behöver för att utveckla appar med Expo: Ett lokalt utvecklingsverktyg och en mobilklient för att öppna din app.
Som ett lokalt utvecklingsverktyg använder vi Expo CLI. Förutom kommandoradsgränssnittet (CLI) har det också ett webbaserat grafiskt användargränssnitt (GUI) som dyker upp i din webbläsare när du startar ditt projekt.
Du kommer att behöva Node.js för att installera Expo CLI. Efter installationen av Node.js kan du nu installera Expo CLI genom att köra följande kommando: undefined
När du har följt alla steg som vi har gått igenom här på bloggen är allt du behöver göra att köra följande kommando, för ett projekt som till exempel heter ”MyProject”: undefined
Du kanske undrar varför du ska välja React Native. Här går vi igenom några av fördelarna med att använda detta ramverk.
Enligt Google Trends, vilket syns i diagrammet ovan, har sökningar relaterade till React Native ökat stadigt, vilket visar på det växande intresset och efterfrågan på tekniken.
Enligt Stack Overflows undersökning från 2019 var React Native dessutom det sjätte mest populära ramverket bland utvecklare. Antalet frågor om React Native på Stack Overflow har också ökat kontinuerligt sedan ramverket lanserades.
Enligt vår erfarenhet gör Expo det mycket enkelt att köra och felsöka appar. Du kan enkelt köra din app för testning, kontrollera fel och felsöka. Detta är utan tvekan en av anledningarna till att Expos popularitet har ökat, vilket vi kan se i diagrammet nedan.
När installationen är klar och du vill se hur det går med din app behöver du bara köra följande kommando: undefined. Därefter öppnas ett fönster i din webbläsare. Du kan testa appen i simulatorer för både Android och iOS, men du kan även köra den på din egen enhet genom att installera Expo-klientappen och skanna QR-koden som visas i terminalen eller i Expo Dev Tools. Observera att Expo inte bara är ett ramverk utan också en plattform där du hittar användbar dokumentation, handledningar, exempel från communityn och även möjligheten att bidra på GitHub.
Du kanske undrar om det är möjligt att fortsätta ditt projekt utan att använda Expo på det. Ja, det är det. Om du har en dålig upplevelse av att utveckla din app med Explo CLI, du kan enkelt lämna den och flytta till ett React Native-projekt.
Vad är det här med React Native nake-projektet? Helt enkelt kommer ditt projekt att innehålla mapparna/katalogerna relaterade till operativsystemen (iOS och Android), så att du kan skapa dina egna inbyggda byggnader. Så, till exempel, om du vet att du så småningom kommer att behöva inkludera din egen ursprungliga kod i projektet, kan du mata ut expo som kör kommandot undefined på konsolen.
Att bygga en mobilapp kan upplevas som en komplex process. Därför arbetar Expo för att förenkla och påskynda hela arbetsflödet. I officiell dokumentationförklaras alla steg i detalj, och du får dessutom möjlighet att automatiskt generera det nyckellager och de referenser som krävs för din applikation.
Med nyckellagret kan du lagra kryptografiska nycklar i en säker behållare, vilket gör det svårare att extrahera dem från enheten. När nycklarna väl finns i nyckellagret kan de användas för kryptografiska operationer utan att nyckelmaterialet kan exporteras. Dessutom finns möjligheter att begränsa när och hur nycklar får användas, till exempel genom att låsa dem till specifika kryptografiska lägen. Du behöver alltså inte oroa dig för dessa detaljer, eftersom Expo automatiserar processen för att signera din app för både iOS och Android.
Vi hade vår första kontakt med dessa ramverk så snart vi började vår praktik på Imaginary Cloud. Här började vi arbeta med React Native och Expo som en del av att utveckla en mobilapplikation för ett internt projekt.
I början var det svårt att förstå hur man skulle arbeta med dessa tekniker eftersom vi precis började. Det var en ny värld för oss. Den tillgängliga dokumentationen, liksom hjälp från våra kollegor, var dock mycket viktiga aspekter i utvecklingen av detta projekt. Det är helt normalt om det finns några tvivel eller frågor angående dessa ramar i ett tidigt skede. Under utvecklingen försvinner dessa tvivel för att ge plats för kunskap och erfarenhet. Användningen av vissa React Native-bibliotek samt några förbyggda komponenter, sparade oss inte bara lite tid, men gjorde det också lättare för oss att göra arbetet.
Trots att React Native hjälpte oss att återanvända kod för Android och iOS fanns det vissa detaljer som vi var tvungna att ta hänsyn till på grund av skillnaderna mellan OS. Till exempel kan egenskapen linjehöjd för vissa teckensnitt inte vara densamma för båda plattformarna, annars skulle användarna märka olika stilar från iOS-appen och Android-appen.
Ett av de mest utmanande problemen vi mötte var hur man laddar teckensnitt i vår app. Vi försökte många olika tutorials, vi sökte mycket och vi förlorade lite tid på att försöka använda ett anpassat teckensnitt, men det slutliga resultatet var värt ansträngningen.
En annan av svårigheterna kom från användningen av förbyggda komponenter. React Native är känsligt för paket och deras versioner, och det är nödvändigt att komma ihåg att vissa saker fungerar i React Native men ännu inte stöds av Expo, så det är nödvändigt att leta efter andra lösningar.
Till exempel använde vi ett förbyggt väljarval men dess senaste version var inte kompatibel med Expo, mer exakt på Android, så vi behövde nedgradera den. Inte allt är lätt. Ibland måste du hitta ett annat sätt att nå dina mål. Ändå, som du antagligen märkte, kan React Native och Expo förenkla många saker och hjälpa dig att spara lite tid.
Sammantaget var vår resa med detta projekt mycket positiv. Eftersom det var vår första erfarenhet/tid att arbeta med React Native och Expo kände vi vissa svårigheter i början men när vi började veta mer om dessa tekniker blev det enklare och naturligt.
Vi lärde oss att det är möjligt att enkelt köra en applikation på vår egen enhet och att se ändringarna på koden nästan omedelbart, vilket slutade med att motivera den komfort vi kände när vi använde React Native med Expo. Dessutom hjälpte de olika API:erna de erbjuder oss att nå längre på våra mål. Expo-Notifications var till exempel användbara för oss och tillhandahöll viktiga funktioner i omfattningen av aviseringar.
Sammanfattningsvis ökade vår kunskap och det var ett mycket berikande projekt om hur man utvecklar en mobilapplikation med hjälp av dessa ramverk. Vi insåg dess fördelar och tillät oss att nå våra ursprungliga mål.
Vid Imaginärt moln vi arbetar inte bara med React Native, men med en bred teknisk stack. Om du behöver hjälp med att bygga en skalbar mobilapp väntar vi på dig! Skicka oss en rad här!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Webbutvecklare. Passionerad om serier och musik. Fotbollsentusiast. En drömmare som hoppas att en dag markera världen med något han har utvecklat.
People who read this post, also found these interesting:
