Kuidas struktureerida reaalaja rakendust skaala jaoks

Siin on näidisprojekt, mis tutvustab selles artiklis käsitletud mõisteid.

Arutleme lähenemisviisi suurte React Native rakenduste arhitektuurile - ma arvan, et see on suurepärane.

React Native (RN) abil õppimine ja ehitamine on olnud vähehaaval huvitav, kiire innovatsioonitempo ja ökosüsteemi muutustega (ärge unustage, meil pole veel versiooni 1.0!).

Alustasin purustatavate mänguasjade ehitamisega ja peagi kasvasin suure (ettevõtte mastaabis) rakenduse ehitamiseks - ja siis jäin takerduma. Kuhu mida paigutada? Kuidas ühendada erinevaid süsteemi komponente? ja kõik need küsimused, mis on seotud lahenduse kujundamisega algusest peale.

Enne kui hakkame tutvuma rakenduse üksikasjadega, toon välja tööriistad, mis seda arhitektuuri valikut mõjutasid:

  • reageerima - navigeerimine rakenduses
  • redux - rakenduse olekuhaldus
  • redux-thunk - toimingute asünkroonse edastamise lubamine
  • jest - Javascripti testimine
  • uuesti valimine - Reduxi valijakogu
  • axios - Http klient
  • fastlane - automaatikatööriist

Kuidas ma õppisin rakendusmooduleid struktureerima.

Ülaltoodud struktuur (tüübipõhine) oli olnud minu eelmine varasemate kergete rakenduste jaoks, kuna seda on lihtne põhjendada, samuti tundusid rakenduse komponendid väga nähtavad, nii et ma hakkasin sellest välja. Kuna rakenduse ulatus hakkas kasvama, leidsin, et hõlmasin eelmääratud kaustadesse rohkem faile ja pidin ühe funktsiooni või paranduse kallal töötama läbi kaustade (moodulite). Mõne aja pärast sai iga moodul failidega ülespuhutud. Ka kaustade navigeerimine, valides rakenduse voo teadvust, sai tuska. See lähenemisviis muutus selgelt teostamatuks.

Parem lähenemisviis:

Kuna muud ülaltoodud failid ja kaustad (mõned kärbitud) on tavaliselt osa vaikse reageti loomuliku algpaigalduse osadest, keskenduksime src-kaustale:

kiirtee/

Nagu te ehk märkasite, on see kaust src-ga samal tasemel. See sisaldab juurutamise konfiguratsiooniloogikat ja muid väljalaskega seotud ülesandeid. Lisateavet leiate fastlane'i veebisaidilt.

src /

Nagu ülaltoodud ekraanipildist näha, arutame selle struktuuri tagamaid

api /

See kaust sisaldab välise API-kommunikatsiooniga seotud loogikat, sealhulgas:

  • konstandid.js - kuhu on salvestatud kõik nõutavad staatilised väärtused.
  • helper.js - korduvkasutatava loogika salvestamiseks.
  • üksikute funktsioonide failid - iga funktsioonifail sisaldab konkreetse funktsiooni API-side loogikat.

varad /

Nii nagu nimigi viitab, sisaldab see rakenduses kasutatavaid staatilisi faile (nt pilte).

komponendid /

Selles kataloogis paigutatakse jagatud komponendid, mida kasutatakse funktsioonide vahel. Selle näiteks (nagu ülal näidatud) on paigutuskomponent, mida kasutatakse rakenduse komponentide mähkimiseks ja selle üldise paigutuse määramiseks.

Omadused/

Põhiosa sellest arhitektuurist: funktsioonide kaust koosneb kõigi rakenduste funktsioonide moodulist.

Uurime / moodulit lähemalt:

/ toimingud

Nagu enamikus reageeri / reageeri natiivsetes rakendustes. see kaust sisaldab selle funktsiooni toimingu loojaid.

/ komponendid

Siin asetame uurimisfunktsiooni komponendid ja nendega seotud stiilid

/ konteinerid

Funktsiooni redutseerimisega seotud loogika on siia paigutatud. Selle kasutusjuhu jaoks eksporditakse üks konteiner (tähistab ekraani), nii et paigutasime selle indeksifaili.

/Containers/index.js näeb välja järgmine:

Igal funktsioonil on reduktor, mis muudab oma olekut rakenduse olekust. Hiljem ühendatakse kõik reduktorid, kasutades reduxi funktsiooni combReducers.

/ valijad

See võib mõnele meist tunduda pisut kummaline, kuid meie arhitektuuri seda segmenti mõjutab uuesti valimise pakett, mis võimaldab meil tõhusalt arvutada meie rakenduse olekust tuletatud andmeid.

Selles arhitektuuris rühmitasime rakenduse valijad funktsioonipõhiselt, et muuta rakenduse erinevate aspektide vahelist suhtlust hõlpsasti põhjendatavaks. Lisateavet uuesti valimise toimimise kohta leiate siit.

/constants.js

See fail sisaldab funktsioonis kasutatud staatilisi väärtusi. Näide selle kohta, mida võiksime siia salvestada, on andmed ACTION_TYPES.

See on meie arhitektuuri veel üks komponent, mida reageerimispakett pisut mõjutab

Selle rakenduse ulatuse tõttu ei tugineks me selle.props.navigatsiooni abil välisele navigeerimisele, pigem ühendaksime rakenduse navigeerimise rakenduse üldise olekuga. See tähendab, et meie redux-toega pood oleks navigeerimise olekust teadlik.

Võimaldab uurida selle mooduli erinevate kataloogide rolle.

/ toimingud

See sisaldab loogikat paljude navigatsioonispetsiifiliste toimingute loojate jaoks, seega näeks toimingute / index.js sisu enamasti välja selline:

Nagu juba võisite tähele panna, impordime natiivse navigeerimise rakendamiseks objekti NavigationActions reageerimise-navigeerimise paketist; nad pakuvad ka tõeliselt suurepärast dokumentatsiooni!

/ konteinerid

Siin ühendame oma navigeerimisloogika rakenduse olekuga - kasutades mapStateToProps ja mapDispatchToProps. Selle konteinerikomponendi loogika näeks välja umbes selline:

Selle mooduli sisenemispunkt on fail index.js ja see näeb välja järgmine:

See sisenemispunkti navigaatorifailid toimivad juurnavigaatorina kogu rakenduse jaoks ja seda imporditakse eelmises jaotises olevasse faili /containers/index.js.

See koondab rakenduses kõik stseenide navigaatorid ja seob need sisenemisteekondadega. Lisaks liitmisele suundub see vajaduse korral ka üksikutele stseenidele (nagu ülaltoodud lõigust näha Splash-marsruudi korral).

Selle koodi ülaosas näeme, et muud stseenipõhine navigeerimine on imporditud. Stseeni navigaator võiks meeldida nii:

Teil võib olla mitu stseenipõhist navigaatorit, nagu teie rakendus seda nõuab. peamine on importida need vanema navigaatorisse ja luua ühendus asjakohase marsruudiga.

/ reduktorid

Kuna meie rakenduse navigatsiooniandmed võtavad nüüd osa rakenduse olekust, oleks meil vaja redigeerijat selle viilutuse värskendamiseks vastavalt käivitatud toimingutele. Võrreldes teiste meie rakenduse reduktoritega, on sellel spetsiaalne teostus nii algse oleku kui ka reduktori funktsiooni jaoks:

https://gist.github.com/anosikeosifo/f0df960c177dfb57c4f7ed5e4557704c

reduktorid /

See on rakenduse taseme reduktor. Selle ülesandeks on erinevate funktsioonitaseme reduktorite ühendamine, kasutades reduxi funktsiooni combReucers.

Reduktorid / index.js näevad välja järgmised:

stiilid /

Selles moodulis on meie rakendustaseme stiilid. millele viidatakse seejärel üksikkomponentides, kasutades allpool toodud näites näidatud React Native'i mitme stiili süntaksi:

...

index.js

See on rakenduse sisendfail, see mässib rakenduse koos meie varem arutatud paigutusega ja ühendab rakenduse poodiga, kasutades reduxi teenusepakkuja kõrgema järjekorra komponenti.

See näeb välja selline:

myStore.js

see sisaldab poe loomise loogikat.

Kuule, see pidi olema juba ammu läbi loetud!

Ehkki see pole kõikehõlmav *, loodan, et leiate sellest mõistliku ja abivalmis. Mul oleks hea meel, kui saaksite jagada oma mõtteid ja arvamusi nii selle kohta kui ka selle kohta, kuidas kavatsete suuremahulisi RN-i rakendusi rakendada.

  • Et keskenduda artikli põhieesmärkidele, vältisin laskumist erinevate __tests_-moodulite üksikasjadesse.

Lisaressursid:

  • Reaalne navigeerimine
  • Kuidas oma React rakendusi paremini korraldada?
  • React Native + MobX rakenduse struktureerimine õigel viisil
  • Reageerige põliselanikele Fastlase ja Crashlytics Beta abil

Algselt avaldati see veebisaidil www.uxenthusiast.com 30. detsembril 2017.

Kas peate palkama tipparendajaid? Rääkige Andelaga, et aidata teil skaleerida.
Kas otsite oma arendajakarjääri kiirendamiseks? Andela palkab praegu vanemaid arendajaid. Kandideeri kohe.