Att bygga en plattform agnostiker app (reagerar infödda och webb) đŸ“± đŸ’» đŸ–„ đŸ“ș

Bygga en plattform agnostiker app (reagerar infödda och webb) đŸ“± đŸ’» đŸ–„ đŸ“ș

NÀr jag kom till min nuvarande företaget , de hade en sÀrskild begÀran för mig, för att bygga upp en gemensam komponenter och affÀrslogik frontend-app för IOS, Android och Webben. Eftersom jag Àr en frontend-utvecklare som Àlskar nya omrÄden, jag kunde inte sÀga nej och jag var tvungen att hoppa pÄ chansen.

Vi har lite tur 🍀. Eftersom vĂ„r produkt behöver inte vara ett stöd för mĂ„nga web-specifika funktioner, har vi möjlighet att utveckla en app med en delmĂ€ngd av verktyg för vĂ„ra kunder. Vilket innebĂ€r att vi kan göra vad vi vill i bakgrunden. Jag skulle föreslĂ„ att du granskar dina krav, kontroll av huruvida dessa verktyg för att lösa alla dina behov innan du börjar att genomföra denna strategi till ditt projekt.

Efter lite grĂ€vande i artiklarna och försöker genomföra varje miljö i sin egen vĂ€rld.. jag hittade det för mig, den bĂ€sta utgĂ„ngspunkten var en stor reagera native-mall, som heter “starta om” https://github.com/react-everywhere/re-start som Ă€r baserad pĂ„ Reagera Infödda för Webben.

reagera-överallt mall hade nĂ„gra mycket anvĂ€ndbara lösningar, som det gjordes frĂ„n skapa-reagera-app och reagera-infödda i kombination ♻

Routing = reagera-router (react-router-dom || att reagera-router-infödda); paketet har nĂ€stan exakt samma router api för bĂ„da plattformarna. Allt du behöver göra Ă€r behöver – rĂ€tt enligt Plattform.OS variabel och export höger Router

importera { Plattform } frÄn "att reagera native';
const isWeb = Plattform.OS === 'web';
const RouterPackage = isWeb ? require('reagerar-router-dom") : require('reagera-router-native);
const Routern = isWeb ? RouterPackage.BrowserRouter :
RouterPackage.NativeRouter;
exportera Router.
exportera standard RouterPackage;

Kompilera och kör app. Webpack konfigurationer anvĂ€nds endast för webben (anvĂ€nder en utökad version frĂ„n skapa-reagera-app repo). PĂ„ den inhemska sidan, reagera-infödda gör sin egen sammanstĂ€lla sĂ„ det Ă€r samma sak som att köra en reagera-native app. đŸ“Č

naturligtvis inte allt fast sig i den frĂ€mre delen av tech. Jag hade nĂ„gra dagar dĂ„ jag satt dĂ€r hela dagen för att försöka ta reda buggar som jag aldrig hade sett förut đŸ˜” (XML, Objective-C och Java). Även om en anpassning för att bygga reagera native UI frĂ„n en bakgrund av css Ă€r inte den snabbaste bild 🎱.

Vissa frÄgor fortfarande mellan Infödda och Webb:

  • Babel
  • Test
  • Infödda funktioner/komponenter

namn=32f8>Babel som behövs för att kompilera till ES5 för webben,sĂ„ de konfigurationer som behövs för att vara Ă„tskilda för Infödda och Webb, om bĂ„da anvĂ€nder “att reagera native” förinstĂ€llda. Lyckligtvis Babel ‘ s förinstĂ€llda env funktion löser det hĂ€r problemet genom att ange din process.env.BABEL_ENV till önskad config.

// innan du kör processen.env.BABEL_ENV = "test" eller "test:native' 
// eller vad du config behov innan babel börjar
// och den huvudsakliga skillnaden Àr att webb-config
// behov av "att reagera native-web/babel" plugin
{
"presets": ["reagerar infödda'],
"miljö": {
"test": {"plugins": ["att reagera native-web/babel"]},
"utveckling-web": {"plugins": ["att reagera native-web/babel"]},
"produktions-web": {"plugins": ["att reagera native-web/babel"]},
"test:native": {},
"utveckling": {},
"produktion": {}
}
}

Jest och test var en stor förutsĂ€ttning för vĂ„rt nya projekt och var verkligen viktigt för oss och det var diskuterat att vi skulle vilja göra TDD som tidigt i projektet som möjligt, sĂ„ vi var tvungna att fĂ„ det att fungera ⚙

Rendering Native Komponenter för Provning inte fungerade frÄn start, sÄ efter ett tag insÄg jag att jag var tvungen att skilja skÀmt testa config för infödda och webb. Detta var lÀtt med sina --config cli möjlighet att passera vÀgen till config-filen.

$ skÀmt --config". /sökvÀg/till/jest/config'

Huvudsakliga skillnaderna mellan configs:

// Native-config
{
coverageDirectory: 'coverageNative',
förinstÀllning: 'reagerar infödd',
}
// Webb-config - gjort native bygga krasch :/
{
"moduleNameMapper": { "^reagera-native$": "reagera-native-web" },
}

Mitt största problem med provning (det tog mig lĂ€ngst tid att lösa) var ögonblicksbild av kollisioner. Om du inte har provat Ögonblicksbild tester med skĂ€mt, jag rekommenderar det 😍

jag var tvungen att separera bilder, istĂ€llet för att duplicera snapshots tester för varje plattform med mĂ„nga if-satser. OcksĂ„, varje ögonblicksbild som skĂ€mt inte anvĂ€nder, anser att det Ă€r förĂ„ldrat och kommer att ta bort det pĂ„ uppdatera 😣. SĂ„ alla mina Native bilder skulle tas bort nĂ€r jag uppdaterar Webben ögonblicksbilder.

kopiera ögonblicksbild test

jag slutade att skriva ett manus för att vÀxla bilder mellan tre mappar innan varje plattform testas. Vilket gjorde att alla mina komponent mapp strukturer för att se ut sÄ hÀr i slutet:

Knappen/
/__native_ögonblicksbilder__
/__ögonblicksbilder__
/__web_ögonblicksbilder__
Button.js
Button.test.js

Aktivera mig att skriva ögonblicksbild tester en gÄng i varje test kostym, i stÀllet för tvÄ gÄnger med plattformen namn i ögonblicksbild header

resten av testerna var nÀstan samma som web testa, tack för att reagera och bra verktyg frÄn Enzym, Jest och reagera-test-renderaren. Du i princip testa JS och reagera som du normalt skulle göra. HÀr Àr en del av ett exempel med Enzymet:

nÄgra smÄ skillnader Àn normalt web component provning

Efter ett tag att vi behövde lite Infödda funktioner och komponenter.Eftersom vi ville ha stöd för flera sprÄk, vi behövde ett sprÄk picker (som en dropdown).

I NĂ€tet, en enkel <vĂ€lj> – taggen och Reagera Native du har en infödd Valda komponenten. Eftersom detta Ă€r baserat pĂ„ reagera hemma, och för att skapa html-taggar Ă€r en bit bakĂ„t men genomförbart med createElement – funktion:

WebPicker komponent, sammanstÀlla till en select-taggen

NativePicker komponent, sammanstĂ€llningen till ios-och android –

Ett ord av försiktighet: Dessa verktyg Ă€r inte allt lĂ€tt att montera och du kommer att behöva grĂ€va i Xcode och Android Studio frĂ„n tid till tid och se andra sprĂ„k, som du kanske inte kĂ€nner till, om du kommer frĂ„n webben. För mig var det en utmaning och nĂ„got som jag Ă€r glad att jag tog pĂ„ 🙂.

Detta Ă€r en fantastisk Ă„lder i Frontend, dĂ€r en webbutvecklare som kan gĂ„ över med goda prestanda till olika plattformar och klienter med samma affĂ€rslogik. Jag hoppas att vi kommer att se mer av dessa verktyg och anvĂ€nda fall, ocksĂ„ för att jag Ă€lskar att höra frĂ„n min javascript vĂ€nner att de gör serversidan, TV apps-Skrivbordet och sĂ„ pĂ„ med JS ❀