Strumenti per React Native Development

() translation by (you can also view the original English article)

Strumenti, librerie e servizi sono una parte importante della vita di ogni sviluppatore, a prescindere dall'ambiente in cui si sta sviluppando. E React Native non fa eccezione. In questo articolo, ti accompagno attraverso alcuni dei migliori framework dell'interfaccia utente, le librerie, i componenti, gli strumenti di sviluppo e i servizi web che ti renderanno un sviluppatore nativo React Native più felice e più produttivo.

Editori di testo e IDE

Visual Studio Code è un editor di testo che dispone di funzionalità integrate di intelliSense, debug e Git. Ciò che rende veramente buono per lo sviluppo nativo di React è la sua estensione React native tools. Ciò consente di eseguire i comandi React Native dalla palette dei comandi, aggiungere IntelliSense per React Native API e il codice di debug all'interno dell'editor stesso.

Per ulteriori informazioni su come impostare il codice Visual Studio per React Native, consulta questo post sul blog: VSCode for React Native.

Se stai utilizzando Atom, puoi installare il plugin Nuclide. Questo plugin è stato specificamente creato per lavorare con progetti React Native, Flow e Hack. È dotato di un ispettore di debug e di un elemento integrato con tutte le funzionalità in cui si è abituati in Chrome Developer Tools. Supporto di flusso significa che si ottiene dalla casella l'autocompletamento, il tipo di suggerimenti e la diagnostica di codice.

Se vuoi esplorare più opzioni di IDE e editor, controlla questo post sul blog su Top 10 Editor per React Native.

Strumenti di sviluppo

Gli strumenti di sviluppo hanno un ampio campo di applicazione, quindi raggruppererò ciascun strumento in base al suo focus:

SDK
qualità del codice
test
il debug

SDK

Quando si tratta di SDK per React Native, niente batte Expo. Expo ti consente di prototipare facilmente un'applicazione senza bisogno di Android Studio o Xcode. Esso include un insieme di componenti e librerie per aiutarti a velocizzare lo sviluppo.

Il flusso di lavoro Expo è costituito da:

Creare un nuovo progetto utilizzando creare-reagire-nativo-app.
Scrivi il codice nel tuo editor di testo preferito.
Esegui l'applicazione utilizzando l'applicazione client Expo.

Non è necessario collegare il telefono al computer. È sufficiente eseguire la scansione del codice QR del terminale utilizzando l'applicazione client Expo e verrà eseguito automaticamente l'applicazione. Se usi Genymotion, Expo lo supporta anche tu.

L'unico svantaggio quando si utilizza Expo è che non è possibile includere alcun pacchetto personalizzato che utilizza la funzionalità nativa del dispositivo. Expo include già un certo numero di pacchetti nativi comunemente utilizzati come la fotocamera, Facebook e la mappa. Ma se avete bisogno di utilizzare un pacchetto che non supportano già, quindi dovrete "espellere" l'app. A quel punto la tua app sarà come se è stato creato con init reagire-nativi, e si perde anche la possibilità di eseguirlo utilizzando l'applicazione client di Expo.

Qualità del codice

Controllare la qualità del codice è importante e per questo motivo esistono strumenti come ESLint. In poche parole, uno strumento di linting ti permette di essere più coerenti con il tuo codice controllandolo contro una guida di stile. Un esempio di tale guida di stile è la Guida in linea di JavaScript di Airbnb che specifica le regole su come scrivere il codice JavaScript. Lo strumento linting controlla quindi il codice contro queste regole per assicurarsi che siano state seguite. C'è anche una guida di stile per i progetti React.

Se utilizzi il testo Sublime, ecco un buon tutorial su come è possibile configurarlo in modo da poter avere feedback in tempo reale sulla qualità del codice durante la codifica: Sublime Linting for React e ES6. Se stai utilizzando un altro editor o IDE, assicuratevi di cercare un corrispondente plugin che utilizza ESLint.

Se si desidera aggiungere la digitazione statica al progetto, è possibile utilizzare Flow. Flow aggiunge la digitazione statica al di sopra di JavaScript senza dover apportare modifiche al codice base esistente. Ciò è perché Flow cerca di dedurre il tipo quando è possibile. Per i nuovi progetti, però, è consigliabile specificare esplicitamente il tipo per raccogliere tutti i vantaggi di utilizzare Flow.

Per iniziare a utilizzare Flow, ecco un tutorial su come impostare Flow per i progetti React native.

Test

Enzyme è un'utilità di test per React che consente di affermare, manipolare e attraversare l'output del componente. Fornisce metodi come la shallow() per rendere "superficiale" i componenti, find() per attraversare la componente renderizzata e expect() di asserire i puntelli o il contenuto reso all'interno del componente.

È possibile seguire questa guida a Utilizzare l'enzima per i componenti di test in React Native per rendere la tua applicazione React Native testabile con l'enzima. Se sei nuovo all'enzima, puoi leggere questo tutorial su Testing React Components con Enzyme e Mocha.

Debug

Reactotron è un'applicazione desktop che consente di eseguire il debug di applicazioni React e React Native. Alcune delle sue funzioni principali includono l'ispezione, la modifica e l'abbonamento allo stato dell'applicazione, il monitoraggio delle richieste HTTP effettuate nell'applicazione, il benchmarking delle prestazioni dell'applicazione e gli errori di monitoraggio. Se stai utilizzando Redux, puoi anche inviare azioni e tenere traccia di saghe da Reactotron.

Boilerplates e UI Frameworks

Snowflake è un boilerplate per lo sviluppo delle naturali React native. Comprende tutto dal front-end alla back-end dell'app. Quindi, se vuoi solo uno strumento che possa aiutarti ad avviare rapidamente, potrai trovare utile il Snowflake. È possibile leggere le note per ulteriori informazioni su quali sono i pacchetti e gli strumenti utilizzati per farlo.

In alternativa, è possibile utilizzare Ignite. È uno strumento di riga di comando che include anche un boilerplate, generatori, guida di stile per i componenti dell'interfaccia utente, API Test Tool e altro ancora.

React Native è già dotato di componenti UI che è possibile utilizzare per l'interazione con gli utenti. Il problema è che hanno solo lo stile più fondamentale in modo che ogni componente sia distinto per quello che è (ad esempio, pulsante, casella di controllo). Se si desidera aggiungere stili personalizzati, è necessario scrivere il proprio codice CSS.

Questo è dove entra NativeBase. Consente all'applicazione di avere un look e una sensazione veramente nativi, attuando lo stesso design utilizzato nelle applicazioni nativi Android (Material Design) e iOS (Human Interface Guidelines). Al di fuori della casella, vengono creati componenti personalizzati come i pulsanti di azione a galleggiante, gli spinner e, meglio di tutti, i componenti di modulo.

Librerie e Componenti

React Native ha una comunità enorme dietro di essa, quindi ci sono un sacco di librerie e componenti che è possibile utilizzare. Potremmo trascorrere tutto il giorno a parlare di questi, per mantenere le cose corte, mi concentrerò sulle seguenti aree:

navigazione
gestione dello stato
animazioni
comunemente utilizzati componenti e librerie

Navigazione

React Navigation consente di implementare facilmente la navigazione nelle tue applicazioni React Native tramite l'utilizzo dei suoi navigatori integrati, quali il Navigatore di Stack, il Navigatore Tab e il Navigatore del cassetto. Questo non è tutto: però, oltre alla navigazione in-app, include anche un collegamento profondo, un'integrazione Redux e un'integrazione web. Questo lo rende una libreria veramente robusta per implementare la navigazione.

Gestione dello Stato

MobX fornisce le funzionalità per aggiornare e gestire lo stato app utilizzato da React. Ciò che lo rende un buon candidato per la gestione dello stato in React è la sua semplicità e la sua ottenibilità. Ha anche una breve curva di apprendimento, quindi le cose come le funzioni asincrona ei valori calcolati sono già gestiti dietro le quinte.

Per applicazioni più grandi e più complesse, Redux è ancora raccomandato. Questo è dovuto al fatto che MobX è molto liberale, non diversamente da Redux, che fornisce linee guida su come lo Stato deve essere gestito. Quindi è una scelta più saggia per progetti più grandi con più persone che lavorano su di essi.

Animazioni

React Native ha già una API di animazione incorporata. Infatti, non ci sono solo due, ma due API per lavorare con l'animazione: Animated API e LayoutAnimation. Questi due sono molto potenti, ma possono essere ingombranti, soprattutto se tutto quello che vuoi fare è applicare animazioni di base come spostare un oggetto in alto e in basso o farlo rimbalzare. In questi casi, i componenti come Animatable sono utili.

Componenti e librerie comunemente utilizzati

Ecco un elenco di componenti e librerie comunemente utilizzati nei progetti React Native. Questi sono compatibili con i dispositivi Android e iOS:

componenti in stile: consente di scrivere codice CSS per personalizzare i componenti React.
react-native-calendar: per mostrare un calendario con cui gli utenti possono interagire.
react-native-datepicker: per raccogliere date e orari.
react-native-progress: per creare barre e spinte di avanzamento.
react-native-spinkit: una raccolta di indicatori di carico.
icone vettoriali: consente di utilizzare le icone delle fonti di font dell'icona preferita, ad esempio Font Impressionante e Icone dei Materiali.
reagisci-native-swiper: trasforma una raccolta di immagini o contenitori in componenti di spostamento.
react-native-scrollable-tab-view: la navigazione a schede che è possibile scorrimento tra.
react-nativo-lightbox: per la visualizzazione di immagini in fullscreen pop-overs.
react-nativo-Mappe: consente di integrare Google Maps nelle tue applicazioni. Non tutte le funzionalità disponibili in Google Maps API sono disponibili, ma la funzionalità fornita dovrebbe essere sufficiente nella maggior parte dei casi.
SGListView: un'implementazione di memoria-friendly del componente ListView incorporato di reagire nativo. Se hai bisogno di mostrare liste enormi nella tua app, utilizzare questo invece di ListView.
FORMIK: consente di gestire forme in nativo reagire meno doloroso. Esso consente di ottenere valori passano allo stato di forma, validare i form e gestire la loro presentazione.
react-nativo-i18n: per l'implementazione di internazionalizzazione nelle tue app.
react-nativo-push-notifica: implementa le notifiche push locali e remoti.
InstantSearch: una raccolta di componenti per l'implementazione della ricerca.
react-nativo-fs: consente di accedere a file system nativo del dispositivo.
react-native-camera: un componente della fotocamera che consente di scattare foto e video dall'app.
react-native-video: per riprodurre video dal file system o da un URL.
react-native-sqlite-storage: per memorizzare e manipolare dati da un database SQLite.
react-native-store: un archivio chiave-valore basato su AsyncStorage.
react-native-webrtc: per l'implementazione di WebRTC.

Servizi web

È possibile creare applicazioni senza server e facilitare l'implementazione delle applicazioni natative React utilizzando i servizi web. Ci sono una serie di servizi web là fuori, ma mi concentrerò sulle seguenti aree:

database
analitica
le notifiche push
aggiornamenti del codice
integrazione continua

Database

Realm è un database in tempo reale con un focus sulle applicazioni mobili. Esso include funzionalità quali la sincronizzazione dei dati bidirezionali, le funzionalità offline e il push di dati. Il database Realm Mobile è open-source e cross-platform, il che significa che è possibile ospitare il Realm Object Server sul proprio server e quindi utilizzare gratuitamente la libreria Realm JavaScript.

Non tutte le funzionalità sono disponibili in developer edition, ma nella maggior parte dei casi d'uso si dovrebbe andare bene con solo developer edition perché include le funzionalità di base come l'oggetto Database, sincronizzazione in tempo reale e l'autenticazione. Ecco un confronto di quello che si ottiene per ogni edizione: Regno prodotti e Listino prezzi.

Se Realm è troppo per le tue esigenze, puoi sempre attaccare con l'API AsyncStorage fornita con React Native.

Analitica

Fabric è un servizio all-in-one che permette, tra le altre cose, di aggiungere analitica nella tua app. Ci sono risposte, che ti offre statistiche in tempo reale sull'utilizzo dell'app. Ciò include il numero di utenti attivi, la lunghezza della sessione e il tasso di ritenzione. Ci sono anche Crashlytics, che forniscono potenti funzionalità di crash reporting. Tutto succede in tempo reale, e puoi visualizzarlo nella dashboard di Fabric in tempo reale. È possibile utilizzare la libreria di Fabric per impostare facilmente il tessuto per l'applicazione React native.

Se preferisci aderire a una soluzione collaudata come Google Analytics, c'è anche una libreria che ti permette di farlo.

Le notifiche push

Non c'è davvero nessuna concorrenza quando si tratta di implementare notifiche push nelle app. Firebase Cloud Messaging (precedentemente noto come Google Cloud Messaging) consente di inviare notifiche push per Android e iOS app. Puoi utilizzare il pacchetto react-native-fcm per comunicare con FCM dalla tua app.

Aggiornamenti dei codici

CodePush ti consente di distribuire aggiornamenti di codice per applicazioni mobili direttamente ai dispositivi degli utenti. CodePush funge da repository centrale in cui è possibile distribuire modifiche in HTML, CSS, JavaScript e asset come immagini. Il codice CodePush corrispondente nell'applicazione tenterà quindi queste modifiche. Questo è ottimo per spingere correzioni di bug all'applicazione senza la necessità di caricarla nell'archivio di app e in attesa che gli utenti aggiornino l'applicazione. È possibile utilizzare questo pacchetto per estrarre aggiornamenti da CodePush all'interno dell'applicazione React Native.

Integrazione continua

Bitrise è un servizio di consegna continuo per lo sviluppo di applicazioni per dispositivi mobili. Consente di eseguire i test, creare l'app e spingerlo automaticamente sui dispositivi degli utenti ogni volta che distribuisci il codice.

Bitrise si integra con un gruppo di servizi in ogni fase del tuo workflow di sviluppo. Ad esempio, quando si spinge verso le fili di rilascio in GitHub, Bitrise viene avvisato di quel push attraverso i webhooks. Inizia quindi a eseguire i test. Una volta che i test passano, inizia il processo di creazione. Se è solo un "soft release" (ad esempio le 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 per la fotocamera), Bitrise può anche creare un file APK o IPA e distribuirlo a Google Play o iTunes Connect.

Fastlane è una collezione di strumenti che automatizzano il processo di creazione e rilascio per applicazioni Android e iOS. Per iOS, gestisce attività come l'esecuzione dei test, la generazione di schermate, la firma di codice e la pubblicazione dell'applicazione all'archivio di app. Include anche strumenti di test beta quali Pilot e Boarding. Pilot ti permette di caricare l'applicazione su iTunes Connect e di gestire i tester beta TestFlight direttamente dalla riga di comando. L'imbarco crea una pagina di iscrizione per tester beta TestFlight.

Gli strumenti sono più orientati alla distribuzione di iOS, ma è anche utile se stai distribuendo applicazioni Android. Attualmente sono disponibili solo due strumenti per l'implementazione Android: Supply e Screengrab.

L'offerta consente di automatizzare il caricamento di asset come l'icona dell'app, la grafica promozionale e gli screenshot dell'app. Consente inoltre di aggiornare le tue applicazioni esistenti sul Google Play Store.

D'altra parte, Screengrab automatizza la generazione di screenshot per più dispositivi. Ogni screenshot può anche essere localizzato se l'applicazione supporta più lingue.

Conclusione

Questo è tutto! In questo articolo, hai appreso alcuni strumenti, librerie e servizi che puoi utilizzare quando sviluppi applicazioni React Native. E tu? Quali sono i tuoi strumenti per la creazione di applicazioni in React Native?

E mentre sei qui, guarda alcuni dei nostri altri post sullo sviluppo di applicazioni React Native!