Her er mine yndlingshacks til at oprette apps på produktionsniveau med React Native

Stol på mig, når jeg siger dette, React Native er hårdt. Og det er ikke det sædvanlige hårde ved, hvad vi synes hårdt er. Det er svært med hensyn til at arbejde med generelt. I dette blogindlæg vil jeg gennemgå nogle tip og tricks og til sidst den bedste praksis, jeg har brugt til en af ​​mine apps, der er kodet i React Native: kodedamn Android (eller kodetamn iOS).

Hurtigt skamløst stik: Hvis du kommer i gang med React Native, her er mine 95% rabat på, hvordan man kommer i gang med det: React Native - The First Steps

Hej! Jeg hedder Mehul. Jeg er studerende, youtuber, fuldstackudvikler, appudvikler og kan også distribuere servere. For nylig besluttede jeg at lancere en udviklerfokuseret platform (du gættede det rigtigt, kodetamn). For at få det rigtigt hurtigt på mobile enheder gik jeg med React Native. Dels fordi jeg ikke er nogen stor fan af Swift og Xcode indtil videre. Men lidt vidste jeg, at jeg ville interagere mere med indfødt kode, end jeg troede. Lad os begynde med de oplysninger, jeg vil nævne.

Bemærk: På dette tidspunkt, hvor denne artikel blev skrevet, var React Native på v0.57-rc4. Kontroller, om nogle af tingene allerede er tilgængelige / rettet i den nylige React Native-version!

# 0: Ved hvad du laver

Indse, at den reagerede indfødte verden er en ensom verden lige nu. Du kan komme dig selv i et problem, som ingen har stået over for lige nu (eller du ikke er i stand til at google det ordentligt). Hold altid VCS i gang med dit oprindelige projekt og forpligt jævnligt dine ændringer (alle de seje børn kalder det CI). Det hjælper dig med at vende tilbage til den sidste arbejdskopi temmelig hurtigt uden at miste en masse kode.

Det er lige så vigtigt at vide, hvad du laver. Du kan muligvis ende med at bryde dit projekt helt, hvis du ikke er opmærksom. Hvis du ikke brugte en VCS, ja, er du i problemer.

# 1: Opgrader din JSC

JSC (JavaScriptCore) er en webkit-baseret JavaScript-motor, der bruges af React Native på Android-platforme til at evaluere din JavaScript-kode. Fortæl mig ikke, at du troede, at React Native konverterer JavaScript til en oprindelig kode. Det gør det ikke! ;-)

Uanset hvilken JS, du skriver, udføres stadig kun som JavaScript af JSC på Android. Problemet er React Native ship med en meget gammel version af JSC. Dette betyder, at du skal bruge babeltransformationer i vid udstrækning. Nogle gange er der bugs, så grimme, at du trækker dit hår, hver gang du sidder for at kode, på grund af en ældre version af JSC.

Jeg lærte det på den hårde måde efter at have spildt en dag med fejlsøgning. Der opstod en ukendt tilfældig dødelig fejl mellem udførelsen af ​​appen. Efter at have studeret logfilerne i lang tid kom jeg til en konklusion om, at appen styrtede et sted, hvor [Symbol.iterator] bruges i den transpilerede JS-kode af babel.

Nu er symboler en ES6-ting. Babel transponerede ikke dette yderligere, og JSC var så gammel, at det ikke var i stand til at holde op med enkle ting som disse og styrtede ned. Jeg spildte næsten en dag bag ved at finde ud af, at JSC-opgradering var en bedre løsning end andre ujævn hacks.

Opgradering af din JSC er temmelig ligetil. Følg denne github-repo, og du skal være i gang på kort tid.

# 2: Setup Redux korrekt

Redux kan være en smerte ved installationen korrekt. Og ved at konfigurere det korrekt, mener jeg at integrere det dybt med din app. Uanset om det er dine egne reducere, eller om det er React navigation. Opsætning af reaktionsnavigation med Redux er en stor beslutning på lang sigt, selvom React-navigationssiden giver en advarsel om dette:

Pokker nr. Vi taler om apps til virksomheder og produktionsniveau her. Gå videre og gem din navigationsstat i Redux og få meget fin kontrol over din tilstand.

Men husk, med stor kraft kommer stort ansvar. Med en sådan fin kontrol over din navigation skal du sørge for, at du konfigurerer den korrekt. Ellers går din app tilfældigt ned. Det vil være smertefuldt at indstille det oprindeligt, men stol på mig, det er værd at tiden er.

Læs om Redux og dens integration med reaktionsnavigation her.

# 3: Brug tilgængelige automatiseringsværktøjer som fastlane

Fastlane er et fantastisk kommandolinjeværktøj til at automatisere mange almindelige opgaver, du vil støde på. Det ligner mere tidsoptimering snarere end kodeoptimering. Jeg synes, det fortjener et sted her, fordi det sparer meget tid, når installationen er korrekt.

Checkout fastlane her: https://fastlane.tools/

# 4: Foretag fejlhåndtering korrekt

Forvent ikke, at dine brugere ping dig nøjagtigt, hvordan appen går ned. Med mere komplekse apps er det vanskeligt at finde specifikke trin, der fører til app-nedbrud. Jeg bruger sentry.io til fejlhåndtering på mine apps, og jeg personligt kan godt lide det. Det kan tilslutte sig dine build-trin og endda uploade sourcemapet til deres servere, så du kan se den faktiske kode, ikke tilfældigt affald i dine crashspor.

Vagtpost er tilgængelig på https://sentry.io/

# 5: Fejlfinding på den rigtige måde!

Bruger du stadig den smarte krominspektorkonsol til at debugge dine React Native-apps? Og hvad med Redux? En anden fane? Hvad hvis du vil rydde async-lageret på din app? Tvinge til at stoppe appen og rydde data? Virker for trættende, især når du aktivt udvikler applikationen. Brug i stedet en selvstændig dedugeret debugger til at reagere native. Bedste del? Det er gratis!

Her er din React Native debugger: https://github.com/jhen0409/react-native-debugger

5 hurtige tip:

  • Hold din filstruktur organiseret. Det er meget vigtigt at skalere din ansøgning.
  • Undgå at bruge expo til dine apps. VÆR SØD AT LADE VÆRE. Selv hvis du bruger det, vil du indse, at du SKAL skubbe ud på et tidspunkt, og så held og lykke med at finde ud af alt det rod. Det er ikke umuligt, det vil spise meget af din tid senere. Husk, at expo er godt, men vi taler om langsigtede forretnings / start-relaterede apps og ikke en kattealder-app (hvor ekspo ville være godt).
  • Sørg for at oprette en package-lock.json-fil (hvis du bruger npm). Du vil fortryde det en stor tid senere, når du ved en fejltagelse fjerner din mappe med node_moduler og indser, at der ikke er nogen pakke på npm, der er interesseret i semantisk versionering.
  • Brug ikke meget tunge UI-biblioteker med React Native. Det bremser ydelsen selv i produktionen. Jeg anbefaler ikke NativeBase lige nu, selvom det ser meget fancy ud med hensyn til UI. Det er dyre med ydelsen. Der er meget bedre muligheder, som f.eks.
    Tak til Andre Biel for kommentaren, så sørg for at gennemgå denne dokumentside grundigt, hvis du er træt af langsom RN-apps og / eller profilerer dem. Det er en guldgruve: https://facebook.github.io/react-native/docs/performance.html
  • Udnyt React Native's erstatning af JS-bundt på farten uden at indsende appen igen til app-butikker ved hjælp af teknologier som CodePush.
  • Bliv komfortabel med mindst det grundlæggende i native code på begge platforme. Især build-filer på Android og pod-filer på iOS. Dette er nogle filer, som du vil bruge det meste af din tid på on-native tid på.

Jeg vil fortsætte med at skrive blogindlæg på React Native som en række indlæg, måske, lad os se!

Spørgsmål?

Spørg væk i kommentarerne nedenfor! Jeg hjælper gerne.