Share
Instrumentele, bibliotecile și serviciile reprezintă o parte importantă a vieții fiecărui dezvoltator, indiferent de mediul în care dezvoltați. Și reacția Nativă nu este o excepție. În acest articol, vă voi arăta prin unele dintre cele mai bune cadre UI, biblioteci, componente, instrumente de dezvoltare și servicii web, care vă vor face mai fericiți și mai productivi React Nativ developer.
Visual Studio Code este un editor de text care are built-in capabilități IntelliSense, depanare și integrare Git. Ceea ce o face foarte bine pentru dezvoltarea Reactivă nativă este extensia sa de instrumente Reactive Native. Aceasta vă permite să executați comenzi React Native din paleta de comandă, să adăugați API-uri IntelliSense pentru React Native și codul de depanare în editorul în sine.
Pentru mai multe informații despre cum să configurați Visual Studio Code pentru React Native, consultați acest post pe blog: VSCode for React Native.
Dacă utilizați Atom, puteți instala pluginul Nuclide. Acest plugin a fost creat special pentru lucrul cu proiectele React Native, Flow și Hack. Dispune de un built-in debugger și inspector de elemente, cu toate funcțiile în care sunteți obișnuit în Instrumentele de dezvoltare Chrome. Suportul fluxului înseamnă că nu mai aveți autocompletare, identificare de tip și diagnostice de cod.
Dacă doriți să explorați mai multe opțiuni pentru IDE și editor, consultați acest post pe blog pe Top 10 editori pentru React Native.
Instrumentele de dezvoltare au un domeniu larg de aplicare, așadar voi grupa fiecare instrument pe baza atenției sale:
Când vine vorba de SDK pentru React Native, nimic nu bate Expo. Expo vă permite să prototipați cu ușurință o aplicație fără a fi nevoie de aplicații Android Studio sau Xcode. Acesta include un set de componente și biblioteci pentru a vă ajuta să vă accelerați dezvoltarea.
Fluxul de lucru Expo este alcătuit din următoarele:
Nu este nevoie să conectați telefonul la computer. Pur și simplu scanați codul QR pe terminal utilizând aplicația client Expo și acesta va rula în mod automat aplicația. Dacă utilizați Genymotion, Expo acceptă și acest lucru.
Singurul dezavantaj în utilizarea Expo este că nu puteți include niciun pachet personalizat care să utilizeze funcționalitatea nativă a dispozitivului. Expo include deja un număr de pachete native utilizate în mod obișnuit, cum ar fi Camera, Facebook și Harta. Dar dacă trebuie să utilizați un pachet pe care nu îl suportă deja, atunci va trebui să "scoateți" aplicația. În acel moment, aplicația dvs. va fi ca și cum ar fi fost creată cu reactiv-nativ init, și veți pierde și abilitatea de a rula utilizând aplicația client Expo.
Verificarea calității codului dvs. este importantă și de aceea există instrumente precum ESLint. Pe scurt, un instrument de lustruire vă permite să fiți mai coerenți cu codul dvs., verificând-l pe un ghid de stil. Un exemplu al unui astfel de ghid de stil este ghidul de stil JavaScript al Airbnb, care specifică reguli privind modul în care codul JavaScript trebuie scris. Instrumentul de lustruire verifică apoi codul împotriva acestor reguli pentru a vă asigura că au fost urmăriți. Există, de asemenea, un ghid de stil pentru proiectele React.
Dacă utilizați un text Sublime, iată un tutorial bun despre modul în care îl puteți configura astfel încât să puteți avea feedback în timp real cu privire la calitatea codului în timp ce codificați: Sublime Linting for React și ES6. Dacă utilizați un alt editor sau IDE, asigurați-vă că căutați un plugin corespunzător care utilizează ESLint.
Dacă doriți să adăugați scriere statică în proiectul dvs., puteți utiliza fluxul. Flow adaugă scrierea statică în partea de sus a JavaScript-ului fără a fi nevoie să faceți modificări în codul dvs. existent. Acest lucru se datorează faptului că Flow încearcă să deducă tipul ori de câte ori este posibil. Cu toate acestea, pentru proiectele noi, vă recomandăm să specificați în mod explicit tipul pentru a profita pe deplin de utilizarea fluxului.
Pentru a începe să utilizați funcția Flow, iată un tutorial despre modul în care puteți seta proiectele Flow pentru proiectele dvs. Reactive Native.
Enzima este un utilitar de testare pentru React, care vă permite să afirmați, să manipulați și să traversați ieșirea componentelor dvs. Acesta oferă metode cum ar fi superficial() pentru a "redus" redarea componentelor, găsi() pentru a traversa componenta randată și aştepta() pentru a afirma elemente de recuzită sau conținutul redat în cadrul componentei.
Puteți urma acest ghid pentru utilizarea enzimei pentru a testa componentele în reacția Native pentru a vă face aplicația Nativă React testabilă cu enzima. Dacă sunteți nou în enzimă, puteți citi acest tutorial cu privire la Testarea componentelor reactive cu enzime și Mocha.
Reactotron este o aplicație desktop care vă permite să debugați aplicații React și React Native. Unele dintre caracteristicile sale cheie includ inspectarea, modificarea și abonarea la starea aplicației, urmărirea cererilor HTTP efectuate prin intermediul aplicației, compararea performanțelor aplicațiilor și erorile de urmărire. Dacă utilizați Redux, puteți chiar să expediați acțiuni și să urmăriți segmente din cadrul Reactotron.
Snowflake este o boilerplate pentru full-stack React Native development. Acesta include totul, de la front-end la partea din spate a aplicației. Deci, dacă doriți doar un instrument care vă poate ajuta să începeți rapid, puteți găsi utilitatea fulgului de zăpadă. Puteți citi notele pentru mai multe informații despre ce tipuri de pachete și instrumente sunt utilizate pentru ao pune.
Alternativ, puteți utiliza funcția Ignite. Este un instrument de linie de comandă care include, de asemenea, o boilerplate, generatoare, ghid stil pentru componente UI, API Testing Tool și multe altele.
Reacționează Native vine deja cu componente UI pe care le puteți utiliza pentru interacțiunea cu utilizatorul. Problema este că acestea au doar stilul cel mai de bază, pentru ca fiecare componentă să fie distinsă de ceea ce este (de exemplu, butonul, caseta de selectare). Dacă doriți să adăugați stiluri personalizate, trebuie să scrieți propriul cod CSS.
Aici intră NativeBase. Acesta permite aplicației dvs. să aibă un aspect cu adevărat nativ prin implementarea aceluiași design utilizat în aplicațiile native Android (Material Design) și iOS (Manual Interface Human). Din cutie, veți obține componente personalizate, cum ar fi butoanele de acționare plutitoare, rotoarele și cel mai bine, toate componentele de formă.
Reacționați Native are o comunitate uriașă în spatele ei, deci există o mulțime de biblioteci și componente pe care le puteți utiliza. Am putea petrece toată ziua vorbind despre acestea, așa că pentru a menține lucrurile scurte, mă voi concentra pe următoarele domenii:
React Navigare vă permite să implementați cu ușurință navigarea în aplicațiile dvs. Reactive Native prin utilizarea navigatorilor încorporați, cum ar fi Stack Navigator, Tab Navigator și Drawer Navigator. Totuși, asta nu este tot: în plus față de navigarea în aplicații, aceasta include și o legătură profundă, integrarea Redux și integrarea web. Aceasta face o bibliotecă foarte robustă pentru implementarea navigației.
MobX oferă funcționalitatea de a actualiza și gestiona starea aplicației utilizată de React. Ceea ce îl face un bun candidat pentru managementul de stat în React este simplitatea și testabilitatea acestuia. De asemenea, are o curbă scurtă de învățare, astfel încât lucrurile precum funcțiile asincron și valorile calculate sunt deja tratate în spatele scenei.
Pentru aplicații mai mari și mai complexe, Redux este încă recomandat. Acest lucru se datorează faptului că MobX este foarte liberal, nu spre deosebire de Redux, care oferă îndrumări stricte privind modul în care statul ar trebui să fie gestionat. Deci, este o alegere mai înțeleaptă pentru proiecte mai mari, cu mai mulți oameni care lucrează la ele.
Reacționează că Native are deja un API de animație încorporat în acesta. De fapt, nu există doar unul, ci două API-uri pentru a lucra cu animație: API animat și LayoutAnimation. Aceste două sunt foarte puternice, dar pot fi greoaie, mai ales dacă tot ce vrei să faci este să aplici animații de bază, cum ar fi mutarea unui obiect în sus și în jos sau făcându-l să sară. În astfel de cazuri, componente precum Animatable vin la îndemână.
Iată o listă de componente și biblioteci care sunt utilizate frecvent în proiectele Reactive Native. Acestea sunt compatibile cu dispozitive Android și iOS:
Puteți crea aplicații fără server și puteți facilita implementarea aplicațiilor dvs. Reactive Native utilizând serviciile web. Există o mulțime de servicii web acolo, dar mă voi concentra pe următoarele domenii:
Realm este o bază de date în timp real, cu accent pe aplicațiile mobile. Acesta include caracteristici cum ar fi sincronizarea datelor în două direcții, capabilitățile offline pentru prima dată și împingerea datelor. Baza de date Mobile Realm este open-source și cross-platform, ceea ce înseamnă că puteți găzdui Realm Object Server pe propriul server și apoi utilizați gratuit biblioteca JavaScript Realm.
Nu toate caracteristicile sunt disponibile în ediția de dezvoltatori, dar în majoritatea cazurilor de utilizare ar trebui să fie bine doar cu ediția de dezvoltatori, deoarece include caracteristicile centrale, cum ar fi Baza de date Obiect, Sincronizarea în timp real și Autentificare. Iată o comparație a ceea ce obțineți pentru fiecare ediție: Produsele Realm și prețurile.
Dacă Realm este prea mult pentru nevoile dvs., puteți păstra întotdeauna cu AsyncStorage API care vine cu React Native.
Fabric este un serviciu all-in-one care vă permite, printre altele, să adăugați analize în aplicația dvs. Există Răspunsuri, care vă oferă statistici în timp real cu privire la modul în care este utilizată aplicația dvs. Aceasta include numărul de utilizatori activi, lungimea sesiunii și rata de retenție. Există, de asemenea Crashlytics, care vă oferă capabilități puternice de raportare a accidentelor. Totul se întâmplă în timp real și îl puteți vedea în tabloul de bord Fabric în timp real. Puteți folosi biblioteca Fabric pentru a configura cu ușurință Fabric pentru aplicația dvs. React Nativă.
Dacă preferați să aveți o soluție testată precum Google Analytics, există și o bibliotecă care vă permite să faceți acest lucru.
Nu există nicio concurență atunci când vine vorba de implementarea notificărilor push în aplicații. Firebase Cloud Messaging (cunoscut anterior sub numele de Google Cloud Messaging) vă permite să trimiteți notificări push la aplicațiile Android și iOS. Puteți utiliza pachetul reactant-nativ-fcm pentru a comunica cu FCM din aplicația dvs..
CodePush vă permite să implementați actualizările de cod la aplicațiile mobile direct pe dispozitivele utilizatorilor. CodePush acționează ca un depozit central unde puteți implementa modificări în HTML, CSS, JavaScript și în active, cum ar fi imaginile. Codul CodePush corespunzător din aplicație va trage apoi aceste modificări. Acest lucru este minunat pentru a împinge soluțiile de eroare la aplicație, fără a fi nevoie să le încărcați în magazinul de aplicații și să așteptați ca utilizatorii să actualizeze aplicația. Puteți utiliza acest pachet pentru a descărca actualizări de la CodePush în aplicația dvs. React Nativă.
Bitrise este un serviciu de livrare continuă pentru dezvoltarea aplicațiilor mobile. Vă permite să executați testele, să construiți aplicația și să o împingeți automat la dispozitivele utilizatorilor dvs. de fiecare dată când implementați codul.
Bitrise se integrează cu o grămadă de servicii în fiecare pas al fluxului dvs. de lucru pentru dezvoltare. De exemplu, atunci când vă împingeți la sucursalele dvs. de lansare pe GitHub, Bitrise este notificat de acest împingere prin webhooks. Apoi va începe să ruleze testele. Odată ce testele au trecut, procesul de construire începe. Dacă este doar o versiune soft (de ex. Modificări la codul JavaScript), atunci modificările pot fi implementate către utilizatori prin CodePush. Dar dacă există modificări la codul nativ (de ex. Ați adăugat un plugin Camera), atunci Bitrise poate construi și un APK sau IPA fișier și implementați-o în Google Play sau iTunes Connect.
Fastlane este o colecție de instrumente care automatizează procesul de construire și lansare pentru aplicațiile Android și iOS. Pentru iOS, se ocupă de activități cum ar fi rularea testelor, generarea capturilor de ecran, semnarea codului și eliberarea aplicației în magazinul de aplicații. De asemenea, include instrumente beta de testare, cum ar fi Pilot și Boarding. Pilot vă permite să încărcați aplicația în iTunes Conectați-vă și să gestionați testerele beta TestFlight beta chiar de la linia de comandă. Împărțirea creează o pagină de înscriere pentru testatorii beta TestFlight.
Instrumentele sunt mai bine orientate spre implementarea iOS, dar puteți beneficia de asemenea dacă desfășurați aplicații Android. În prezent, există doar două instrumente disponibile pentru implementarea Android: Supply și Screengrab.
Livra vă permite să automatizați încărcarea de materiale, cum ar fi pictograma aplicației, grafica promoțională și capturile de ecran ale aplicației dvs. De asemenea, vă permite să actualizați aplicațiile existente în Magazin Google Play.
Screengrab, pe de altă parte, automatizează generarea de capturi de ecran pentru mai multe dispozitive. Fiecare captură de ecran poate fi de asemenea localizată dacă aplicația dvs. acceptă mai multe limbi.
Asta e! În acest articol, ați învățat despre unele instrumente, biblioteci și servicii pe care le puteți utiliza atunci când dezvoltați aplicații Reactive Native. Și tu? Care sunt instrumentele dvs. go-to când vine vorba de dezvoltarea de aplicații în React Native?
Și în timp ce sunteți aici, verificați câteva dintre celelalte postări despre dezvoltarea aplicațiilor Reactive Native!
Accentsconagua