Tässä ovat suosikki hakkereini tuotantotason sovellusten luomiseen React Native -sovelluksen avulla

Luottakaa minuun, kun sanon tämän, React Native on vaikea. Eikä se ole tavanomaista kovaa siitä, mikä mielestämme kova on. Se on vaikeaa työskennellä yleensä. Tässä blogiviestissä käsittelen joitain vinkkejä ja vinkkejä ja lopulta hyviä käytänteitä, joita olen ottanut käyttöön yhdessä React Native -koodissa koodatun sovellukseni kanssa: codedamn Android (tai codedamn iOS).

Nopea häpeämätön pistoke: Jos olet aloittamassa React Native -tapahtuman käytöllä, tässä on minun 95%: n alennuskurssi siitä, kuinka aloitat sen kanssa: React Native - Ensimmäiset vaiheet

Hei! Nimeni on Mehul. Olen opiskelija, youtuber, fullstack-kehittäjä, sovelluskehittäjä ja osaan ottaa käyttöön myös palvelimia. Äskettäin päätin käynnistää kehittäjille suunnatun alustan (arvasit sen oikein, kovaa). Jotta se olisi todella nopea mobiililaitteilla, menin React Native -sovelluksen mukana. Osittain siksi, että en ole toistaiseksi suuri Swift- ja Xcode-fani. Mutta tuskin tiesin, että olisin vuorovaikutuksessa natiivikoodin kanssa enemmän kuin luulin. Aloitetaan joka tapauksessa tiedoista, jotka haluan mainita.

Huomaa: Tämän artikkelin kirjoittamishetkellä React Native oli v0.57-rc4. Tarkista, ovatko jotkut asiat jo saatavilla / korjattu viimeisimmässä React Native -versiossa!

# 0: Tiedä mitä teet

Ymmärrä, että Reaktinen alkuperäismaailma on tällä hetkellä yksinäinen maailma. Saatat joutua itsesi ongelmaan, johon kukaan ei ole tähän mennessä joutunut vastaamaan (tai et osaa googletaa sitä oikein). Pidä VCS aina kotimaisen projektisi kanssa ja tee säännöllisesti muutoksia (kaikki hienot lapset kutsuvat sitä CI: ksi). Se auttaa sinua palaamaan takaisin viimeiseen työkopioon melko nopeasti menettämättä paljon koodia.

Yhtä tärkeää on tietää mitä teet. Saatat lopettaa projektisi kokonaan, jos et tiedä. Jos et käyttänyt VCS: tä, niin olet pulassa.

# 1: Päivitä JSC

JSC (JavaScriptCore) on webkit-pohjainen JavaScript-moottori, jota React Native käyttää Android-alustoilla JavaScript-koodisi arvioimiseksi. Älä kerro, että ajattelet React Native -sovelluksen muuttavan JavaScriptin natiivikoodiksi. Se ei ole! ;-)

Mitä JS kirjoitat, se suorittaa edelleen JavaScriptinä vain JSC Androidilla. Ongelma on React Native -laivoissa, joilla on erittäin vanha JSC-versio. Tämä tarkoittaa, että sinun on käytettävä babel-muunnoksia laajasti. Joskus löytyy niin ilkeitä virheitä, että vedät hiuksesi joka kerta, kun istut koodaamaan, JSC: n vanhemman version takia.

Olen oppinut sen kovalla tavalla tuhlaamalla päivän virheenkorjausta. Sovelluksen suorituksen välillä tapahtui tuntematon satunnainen virhe. Tutkittuaan lokit jonkin aikaa, tulin siihen tulokseen, että sovellus kaatuu jossain, missä babel käyttää Symbol.iterator -sovellusta käännetyssä JS-koodissa.

Symbolit ovat nyt ES6-asia. Babel ei kääntänyt tätä eteenpäin, ja JSC oli niin vanha, että se ei pystynyt pitämään yllä näitä yksinkertaisia ​​asioita ja kaatui. Tuhlasin melkein päivän takana tajuamalla, että JSC-päivitys oli parempi ratkaisu kuin muut hajanaiset hakkerit.

JSC: n päivittäminen on melko yksinkertaista. Seuraa tätä github-repoa, ja sinun pitäisi olla käynnissä ja nopea.

# 2: Asenna Redux oikein

Redux voi olla tuskaa asentaa oikein. Ja asettamalla sen oikein, tarkoitan integrointia syvästi sovellukseesi. Olipa kyseessä omat reduktorisi vai onko se React-navigointi. Reagoivan navigoinnin määrittäminen Reduxilla on hieno ratkaisu pitkällä aikavälillä, vaikka React-navigointisivu varoittaa tästä:

Helvetti Puhumme täällä yritys- ja tuotantotason sovelluksista. Tallenna navigointitilasi Reduxiin ja saat erittäin hienon hallinnan tilaasi.

Mutta muista, että suurella voimalla tulee suuri vastuu. Kun navigointisi on niin hieno, varmista, että olet asettanut sen oikein. Tai muuten sovelluksesi kaatuu satunnaisesti. Alun perin käyttöönotto tulee olemaan tuskaa, mutta luota minuun sen ajan arvoinen.

Lue Reduxista ja sen integroinnista reaaliavigointiin täältä.

# 3: Käytä saatavissa olevia automaatiotyökaluja, kuten pikaliikennettä

Fastlane on loistava komentoriviohjelma automatisoimaan monia yleisiä tehtäviä, joita törmäät. Se muistuttaa enemmän ajan optimointia kuin koodin optimointia. Mielestäni se ansaitsee paikan täällä, koska se säästää paljon aikaa, kun se on asennettu oikein.

Kassalle pikakuvaus täällä: https://fastlane.tools/

# 4: Suorita virheiden käsittely oikein

Älä odota, että käyttäjät pingottavat sinua tarkalleen kuinka sovellus kaatuu. Monimutkaisempien sovellusten yhteydessä on vaikea löytää erityisiä vaiheita, jotka johtavat sovelluksen kaatumiseen. Käytän sentry.io-sovellusta virheiden käsittelyyn sovelluksissani, ja pidän siitä henkilökohtaisesti paljon. Se voi liittyä rakennusvaiheisiisi ja jopa lähettää lähdekartan heidän palvelimilleen, jotta näet todellisen koodin, ei satunnaisen roskan kaatumisjäljissä.

Sentry on saatavana osoitteessa https://sentry.io/

# 5: Tee virheenkorjausta oikealla tavalla!

Käytätkö vielä tuota hienoa kromi-tarkistuskonsolia React Native -sovellusten vianetsintään? Entä Redux? Toinen välilehti? Entä jos haluat tyhjentää sovelluksesi asynk-tallennustilan? Pakota sovellus lopettamaan ja tyhjentämään tiedot? Vaikuttaa liian tylsältä etenkin, kun olet aktiivisesti kehittämässä sovellusta. Käytä sen sijaan erillistä erillistä virheenkorjainta reagoimaan natiiviin. Paras osa? Se on ilmainen!

Tässä on React Native -vianmäärityksesi: https://github.com/jhen0409/react-native-debugger

5 nopeaa vinkkiä:

  • Pidä tiedostorakenne järjestettynä. On erittäin tärkeää skaalata hakemuksesi.
  • Vältä expo-sovelluksen käyttöä sovelluksillesi. PLEASE NO. Vaikka käytät sitä, huomaat, että sinulla on jossain vaiheessa poistettava, ja sitten onnea selvittää kaikki sotku. Se ei ole mahdotonta, se syö paljon aikaa myöhemmin. Muista, että expo on hyvä, mutta puhumme pitkäaikaisista yritystoimintaan tai yritystoimintaan liittyvistä sovelluksista eikä kissan ikäsovelluksista (joille expo olisi hyvä).
  • VARMISTA luoda paketti-lock.json-tiedosto (jos käytetään npm). Valitat sitä myöhemmin, kun olet vahingossa poistanut node_modules-kansiosi ja ymmärtämättä, että npm: n paketti välittää semanttista versiointia.
  • Älä käytä erittäin raskaita käyttöliittymäkirjastoja React Native -sovelluksen kanssa. Se hidastaa suorituskykyä jopa tuotannossa. En suosittele NativeBase-sovellusta jo nyt, vaikka käyttöliittymän kannalta se näyttääkin erittäin hienolta. Suorituskyky on kallis. Saatavana on paljon parempia vaihtoehtoja, kuten reagoiva alkuperäispaperi.
    Kiitos kommentista Andre Bielille. Muista tarkistaa tämä doc-sivu huolellisesti, jos olet kyllästynyt hitaisiin RN-sovelluksiin ja / tai profiloimaan niitä. Se on kultakaivos: https://facebook.github.io/react-native/docs/performance.html
  • Hyödynnä React Nativen korvaamista JS-paketista lennossa lähettämättä sovellusta uudelleen sovelluskauppoihin, joissa käytetään CodePush-tekniikkaa.
  • Nauti ainakin natiivikoodin perusteista molemmilla alustoilla. Varsinkin rakennustiedostot Androidille ja pod-tiedostot iOS: lle. Nämä ovat joitain tiedostoja, joihin vietät suurimman osan viettämisajastasi natiivi-aikaan.

Aion jatkossakin kirjoittaa blogiviestejä React Native -sivustossa viestisarjana, katsotaanpa!

Kysymyksiä?

Kysy alla olevista kommentteista! Autan mielelläni.