Share
Strumenti, librerie e servizi sono una parte importante della vita di ogni sviluppatore, indipendentemente dall'ambiente in cui ti stai sviluppando. E React Native non fa eccezione. In questo articolo, ti guiderò attraverso alcuni dei migliori framework, librerie, componenti, strumenti di sviluppo e servizi web dell'interfaccia utente che ti renderanno uno sviluppatore React Native più felice e produttivo.
Visual Studio Code è un editor di testo che integra funzionalità di integrazione IntelliSense, debug e Git. Ciò che lo rende davvero buono per lo sviluppo di React Native è la sua estensione di strumenti React Native. Ciò consente di eseguire comandi React Native dalla tavolozza comandi, aggiungere IntelliSense per React Native API e eseguire il debug del codice all'interno dell'editor stesso.
Per ulteriori informazioni su come impostare Visual Studio Code per React Native, controlla questo post del blog: VSCode per React Native.
Se stai usando Atom, puoi installare il plugin Nuclide. Questo plugin è stato creato appositamente per lavorare con i progetti React Native, Flow e Hack. Ha un debugger integrato e un elemento di ispezione con tutte le funzionalità a cui sei abituato in Chrome Developer Tools. Supporto flusso significa che ottieni automaticamente completamento automatico, digitazione e diagnostica del codice.
Se vuoi esplorare più opzioni IDE e editor, controlla questo post sul blog Top 10 degli editor di React Native.
Gli strumenti di sviluppo hanno un ampio raggio d'azione, quindi raggrupperò ogni strumento in base al suo obiettivo:
Quando si tratta di SDK per React Native, niente batte Expo. Expo ti consente di prototipare facilmente un'app senza bisogno di Android Studio o Xcode. Include un set di componenti e librerie per accelerare lo sviluppo.
Il flusso di lavoro di Expo è costituito da quanto segue:
Non è necessario collegare il telefono al computer. È sufficiente eseguire la scansione del codice QR sul terminale utilizzando l'app client di Expo e verrà eseguita automaticamente l'app. Se stai usando Genymotion, anche Expo lo supporta.
L'unico svantaggio quando si utilizza Expo è che non è possibile includere alcun pacchetto personalizzato che utilizza la funzionalità nativa del dispositivo. Expo include già una serie di pacchetti nativi comunemente usati come la fotocamera, Facebook e la mappa. Ma se hai bisogno di utilizzare un pacchetto che non supportano già, dovrai "espellere" la tua app. A quel punto la tua app sarà come se fosse stata creata con reagire-nativo init, e perderai anche la possibilità di eseguirlo utilizzando l'app client di Expo.
Controllare la qualità del tuo codice è importante, ed è per questo che esistono strumenti come ESLint. In poche parole, uno strumento di sfilacciatura ti consente di essere più coerente con il tuo codice controllandolo in base a una guida di stile. Un esempio di guida di questo tipo è la Guida allo stile JavaScript di Airbnb che specifica le regole su come scrivere il codice JavaScript. Lo strumento linting quindi controlla il tuo codice rispetto a quelle regole per garantire che siano state seguite. C'è anche una guida di stile per i progetti React.
Se stai usando Sublime Text, ecco un buon tutorial su come puoi configurarlo in modo che tu possa avere un feedback in tempo reale sulla qualità del tuo codice mentre stai codificando: Sublime Linting per React ed ES6. Se stai usando un altro editor o IDE, assicurati di cercare un plugin corrispondente che usi ESLint.
Se si desidera aggiungere la digitazione statica al progetto, è possibile utilizzare Flow. Flow aggiunge la digitazione statica su JavaScript senza dover apportare modifiche alla base di codice esistente. Questo perché Flow cerca di inferire il tipo ogni volta che è possibile. Per i nuovi progetti, tuttavia, si consiglia di specificare esplicitamente il tipo per sfruttare appieno i vantaggi dell'utilizzo di Flow.
Per iniziare a utilizzare Flow, ecco un tutorial su come puoi configurare Flow per i tuoi progetti React Native.
Enzyme è un'utility di test per React che consente di affermare, manipolare e attraversare l'output del componente. Fornisce metodi come poco profonde () rendere "superficialmente" i tuoi componenti, trova() attraversare il componente reso, e aspettarsi() per affermare gli oggetti di scena o il contenuto reso all'interno del componente.
È possibile seguire questa guida per utilizzare l'enzima per testare componenti in React Native per rendere l'app React Native testabile con l'enzima. Se sei nuovo nell'enzima, puoi leggere questo tutorial su Testing React Components con Enzyme e Mocha.
Reactotron è un'app desktop che consente di eseguire il debug di app React e React Native. Alcune delle sue funzioni principali includono l'ispezione, la modifica e l'iscrizione allo stato dell'app, il monitoraggio delle richieste HTTP effettuate tramite l'app, il benchmarking delle prestazioni dell'app e gli errori di tracciamento. Se stai usando Redux, puoi persino inviare azioni e tracciare saghe da Reactotron.
Snowflake è un boilerplate per lo sviluppo React Native full stack. Include tutto, dal front-end al back-end dell'app. Quindi, se vuoi solo uno strumento che ti aiuti a iniziare rapidamente, potresti trovare utile Snowflake. Puoi leggere le note per ulteriori informazioni su quali pacchetti e strumenti sono utilizzati per metterlo in ordine.
In alternativa, puoi usare Ignite. È uno strumento da riga di comando che include anche un boilerplate, generatori, guida di stile per componenti dell'interfaccia utente, strumento di test API e altro ancora.
React Native è già dotato di componenti dell'interfaccia utente che è possibile utilizzare per l'interazione dell'utente. Il problema è che hanno solo lo stile più basilare affinché ciascun componente possa essere distinto per quello che è (ad es. Pulsante, casella di controllo). Se si desidera aggiungere stili personalizzati, è necessario scrivere il proprio codice CSS.
È qui che entra in gioco NativeBase. Permette alla tua app di avere un aspetto veramente nativo implementando lo stesso design utilizzato nelle app native Android (Material Design) e iOS (Human Interface Guidelines). Immediatamente, ottieni componenti personalizzati come i pulsanti di azione mobili, i filatori e, meglio ancora, i componenti del modulo.
React Native ha un'enorme comunità dietro di esso, quindi ci sono molte librerie e componenti che è possibile utilizzare. Potremmo passare tutto il giorno a parlare di queste cose, quindi per mantenere le cose brevi, mi concentrerò sulle seguenti aree:
React Navigation ti consente di implementare facilmente la navigazione nelle tue app React Native utilizzando i navigatori integrati come Stack Navigator, Tab Navigator e Drawer Navigator. Ma non è tutto: oltre alla navigazione in-app, include anche il deep linking, l'integrazione con Redux e l'integrazione web. Questo lo rende una libreria davvero robusta per implementare la navigazione.
MobX fornisce la funzionalità per aggiornare e gestire lo stato dell'app utilizzato da React. Ciò che lo rende un buon candidato per la gestione dello stato in React è la sua semplicità e testabilità. Ha anche una breve curva di apprendimento, quindi cose come le funzioni asincrone e i valori calcolati sono già gestiti dietro le quinte.
Per applicazioni più grandi e più complesse, si consiglia comunque di eseguire Redux. Questo perché MobX è molto liberale, non diversamente da Redux, che fornisce linee guida rigorose su come lo stato dovrebbe essere gestito. Quindi è una scelta più saggia per i progetti più grandi con più persone che lavorano su di loro.
React Native ha già incorporato un'API di animazione. Infatti, non ci sono solo una, ma due API per lavorare con l'animazione: API animata e LayoutAnimation. Questi due sono molto potenti ma possono essere ingombranti, specialmente se tutto ciò che si vuole fare è applicare animazioni di base come spostare un oggetto su e giù o farlo rimbalzare. In questi casi, componenti come Animatable sono utili.
Ecco un elenco di componenti e librerie comunemente usati nei progetti React Native. Questi sono compatibili con dispositivi Android e iOS:
È possibile creare app senza server e facilitare la distribuzione delle app React Native utilizzando i servizi Web. Ci sono una miriade di servizi web là fuori, ma mi concentrerò sulle seguenti aree:
Realm è un database in tempo reale focalizzato sulle app mobili. Include funzionalità quali sincronizzazione dei dati a due vie, funzionalità offline e push dei dati. Il Realm Mobile Database è open-source e multipiattaforma, il che significa che è possibile ospitare Realm Object Server sul proprio server e quindi utilizzare gratuitamente la libreria Realm JavaScript.
Non tutte le funzionalità sono disponibili nell'edizione per sviluppatori, ma nella maggior parte dei casi d'uso si dovrebbe andare bene solo con la versione per sviluppatori perché include le funzionalità principali come il Database degli oggetti, la sincronizzazione in tempo reale e l'autenticazione. Ecco un confronto tra ciò che ottieni per ogni edizione: Prodotti di reame e prezzi.
Se Realm è troppo per le tue esigenze, puoi sempre restare con l'API AsyncStorage fornita con React Native.
Fabric è un servizio all-in-one che ti consente, tra le altre cose, di aggiungere analisi nella tua app. C'è risposte, che ti fornisce statistiche in tempo reale su come viene utilizzata la tua app. Questo include il numero di utenti attivi, la lunghezza della sessione e la percentuale di mantenimento. C'è anche Crashlytics, che ti offre potenti funzionalità di segnalazione degli arresti anomali. Tutto avviene in tempo reale e puoi visualizzarlo nella dashboard in tempo reale di Fabric. Puoi utilizzare la libreria Fabric per configurare facilmente Fabric per la tua app React Native.
Se preferisci utilizzare una soluzione collaudata come Google Analytics, c'è anche una libreria che ti permette di farlo.
Non c'è davvero alcuna concorrenza quando si tratta di implementare le notifiche push nelle app. Firebase Cloud Messaging (precedentemente noto come Google Cloud Messaging) ti consente di inviare notifiche push a entrambe le app Android e iOS. È possibile utilizzare il pacchetto react-native-fcm per comunicare con FCM dalla propria app.
CodePush consente di distribuire gli aggiornamenti del codice alle app mobili direttamente sui dispositivi degli utenti. CodePush funge da repository centrale in cui è possibile distribuire le modifiche a HTML, CSS, JavaScript e risorse come le immagini. Il codice CodePush corrispondente nell'app estrarrà quindi queste modifiche. Questo è ottimo per spingere le correzioni dei bug all'app senza bisogno di caricarle nell'app store e aspettare che gli utenti aggiornino l'app. È possibile utilizzare questo pacchetto per estrarre gli aggiornamenti da CodePush all'interno dell'app React Native.
Bitrise è un servizio di consegna continua per lo sviluppo di app mobili. Ti consente di eseguire i test, creare l'app e inviarla automaticamente ai dispositivi degli utenti ogni volta che si distribuisce il codice.
Bitrise si integra con un sacco di servizi in ogni fase del tuo flusso di lavoro di sviluppo. Ad esempio, quando si preme verso le filiali di rilascio su GitHub, Bitrise riceve una notifica di tale push attraverso i webhook. Inizierà quindi a eseguire i test. Una volta superati i test, inizia il processo di creazione. Se si tratta solo di una "versione soft" (ad esempio modifiche al codice JavaScript), le modifiche possono essere distribuite agli utenti tramite CodePush. Ma se ci sono modifiche al codice nativo (ad esempio, hai aggiunto un plugin Camera), allora Bitrise può anche creare un APK o IPA file e distribuilo su Google Play o iTunes Connect.
Fastlane è una raccolta di strumenti che automatizzano il processo di generazione e rilascio per le app Android e iOS. Per iOS, gestisce attività come l'esecuzione dei test, la generazione di schermate, la firma del codice e il rilascio dell'app nell'app store. Include anche strumenti di test beta come Pilot e Boarding. Pilota ti permette di caricare la tua app su iTunes Connect e gestire i beta tester TestFlight direttamente dalla riga di comando. L'imbarco crea una pagina di registrazione per i beta tester TestFlight.
Gli strumenti sono più orientati verso l'implementazione iOS, ma puoi anche trarre vantaggio se stai distribuendo app Android. Attualmente, ci sono solo due strumenti disponibili per la distribuzione di Android: Fornitura e Screengrab.
Fornitura ti consente di automatizzare il caricamento di asset come l'icona dell'app, la grafica promozionale e gli screenshot della tua app. Ti consente anche di aggiornare le tue app esistenti su Google Play Store.
Screengrab, d'altra parte, automatizza la generazione di screenshot per più dispositivi. Ogni schermata può anche essere localizzata se l'app supporta più lingue.
Questo è tutto! In questo articolo, hai appreso alcuni degli strumenti, delle librerie e dei servizi che puoi utilizzare durante lo sviluppo di app React Native. E tu? Quali sono i tuoi strumenti utili per lo sviluppo di app in React Native?
E mentre sei qui, dai uno sguardo ad alcuni dei nostri altri post sullo sviluppo di app React Native!
Accentsconagua