Cristian Maraglino

Cristian Maraglino

20/08/2024

Esplorare React Native come Framework

React Native
Sviluppo Mobile
Multipiattaforma

Nel vasto panorama dello sviluppo software, la personalizzazione e l'accelerazione del processo sono ora più accessibili, grazie all'emergere di nuovi framework. Tra le opzioni disponibili, React Native ha catturato la mia attenzione negli ultimi mesi mentre lavoravo allo sviluppo di un'app mobile multipiattaforma per iOS e Android. In questo articolo, condivido le mie esperienze e conoscenze su React Native, esplorando le sue origini, i suoi usi e le sfide affrontate.

Perché React Native?

Quando si lavora a progetti con scadenze strette, bilanciare il tempo di sviluppo e la qualità del prodotto diventa cruciale. Cercavo un modo per sviluppare un'app per iOS e Android senza dover creare due basi di codice separate. In questa ricerca, React Native è emerso come una soluzione promettente, permettendo di scrivere un'unica base di codice per entrambe le piattaforme.

React Native offre una soluzione promettente per sviluppare app mobili multipiattaforma con un'unica base di codice, bilanciando il tempo di sviluppo e la qualità del prodotto.

Origini e storia di React Native

React Native è un framework open-source creato da Facebook (ora Meta) che permette di sviluppare applicazioni mobili utilizzando JavaScript o TypeScript con il framework React. L'evoluzione di React Native è segnata da diverse pietre miliari significative:

  • 2013: Introduzione di React, un framework per lo sviluppo di interfacce utente per il web.

  • 2015: Annuncio ufficiale di React Native alla conferenza F8 e rilascio su GitHub come progetto open-source, consentendo lo sviluppo di app mobili native utilizzando la stessa base di codice di React per il web.

  • 2017: Introduzione di 'React Native Fabric', una revisione architettonica importante per migliorare le prestazioni e la flessibilità.

  • 2020: Rilascio di 'Hermes', un motore JavaScript ottimizzato per React Native, migliorando le prestazioni delle app Android.

  • 2021: Meta continua a investire nel framework, ampliando il supporto e migliorando l'integrazione con altre tecnologie.
  • Usi e applicazioni di React Native

    Oggi, React Native è ampiamente adottato dalle principali aziende globali per lo sviluppo di applicazioni mobili:

  • Facebook e Instagram (Meta): utilizzano React Native per parti delle loro app mobili.

  • Airbnb: ha utilizzato ampiamente React Native in passato, anche se si è parzialmente allontanato per motivi specifici.

  • Skype e Microsoft Teams: entrambe le app sono sviluppate da Microsoft utilizzando React Native.

  • Uber Eats e Walmart: utilizzano React Native per le loro piattaforme di e-commerce e consegna.

  • Tesla: adotta React Native per alcune funzionalità delle sue app mobili.

  • Il framework rimane popolare grazie alla sua capacità di combinare l'esperienza utente delle app native con l'efficienza dello sviluppo multipiattaforma.

    Le principali aziende si affidano a React Native per le sue prestazioni.

    La mia esperienza con React Native

    Iniziare con React Native ha richiesto familiarizzarsi con gli strumenti necessari e configurare il progetto. La documentazione è abbondante e la comunità è attiva, anche se le informazioni possono essere a volte contraddittorie. Ho trovato utili il supporto della comunità e le guide ufficiali, anche se la varietà di approcci può essere una fonte di confusione.

    Uso dei componenti e Material Design

    React Native offre una vasta gamma di componenti per costruire interfacce utente. Che si tratti di componenti base, personalizzati o di terze parti, lo sviluppo modulare è un punto di forza chiave. L'integrazione con Material Design, utilizzando librerie come React Native Paper, migliora ulteriormente la coerenza e la personalizzazione dell'interfaccia utente.

    Componenti in React Native:

    I componenti di React Native offrono flessibilità e personalizzazione per costruire app mobili:

  • Componenti Base: View, Text, Image, ScrollView... Corrispondono agli elementi nativi di iOS e Android.

  • Componenti Personalizzati: creati per soddisfare esigenze specifiche dell'app.

  • Componenti di Terze Parti: librerie esterne che offrono elementi predefiniti.

  • I componenti possono essere senza stato (stateless) o con stato (stateful). I componenti senza stato sono funzioni che ricevono dati tramite props senza gestire uno stato interno, mentre i componenti con stato mantengono e gestiscono uno stato interno, consentendo interfacce utente dinamiche e interattive.


    Ad esempio, una barra di ricerca che esegue ricerche dinamiche basate su parametri esterni (come cercare appartamenti o posti auto) potrebbe essere implementata come un componente con stato, gestendo internamente il testo inserito dall'utente e i risultati della ricerca.


    Alternativamente, un versatile componente CustomInput potrebbe essere utilizzato come campo numerico, inserimento password o inserimento email regolando alcune proprietà. Questo componente sarebbe senza stato, basandosi interamente sui dati passati tramite props, rendendolo facilmente riutilizzabile in diverse parti dell'app.


    Material Design e React Native: Material Design, sviluppato da Google, fornisce linee guida visive e comportamentali per interfacce utente coerenti e coinvolgenti. Le librerie per implementare Material Design in React Native includono:


  • React Native Paper: offre una vasta gamma di componenti conformi a Material Design, con supporto per temi personalizzati.

  • React Native Material UI: offre componenti basati su Material Design, sebbene meno completi rispetto a React Native Paper.

  • Integrare Material Design in React Native migliora la coerenza dell'interfaccia utente, riduce i tempi di sviluppo e consente la personalizzazione dei temi.

    Sviluppo e Debugging Efficaci

    Quando si inizia un progetto in React Native, possono essere utilizzate varie modalità e strumenti:

  • React Native CLI: lo strumento ufficiale per creare e gestire progetti, offrendo il controllo completo sull'ambiente di sviluppo.

  • Expo CLI: una soluzione per avviare progetti senza configurazioni complesse, include hot-reloading e supporto multipiattaforma.

  • EAS (Expo Application Services): una suite di strumenti per gestire build, distribuzione e aggiornamenti OTA.

  • Metro Bundler: il bundler predefinito per React Native, gestisce la creazione e la distribuzione dei bundle JavaScript.

  • Visual Studio Code + React Native Tools: estensione per il debug e la gestione delle build direttamente dall'editor.

  • Ignite CLI: un toolkit avanzato con configurazione preimpostata e funzionalità pronte all'uso.

  • Bitrise / App Center: piattaforme CI/CD per automatizzare build, test e distribuzione.

  • Scegliere il metodo giusto per il tuo progetto può essere una sfida. La mia esperienza è stata caratterizzata da una certa confusione iniziale, ma nel tempo ho trovato le soluzioni più adatte alle mie esigenze.

    Preparazione di un Bundle per il Rilascio

    Creare un bundle per rilasciare un'app React Native richiede spesso l'uso di IDE nativi:

  • Xcode (per iOS): necessario per configurare le impostazioni di build, gestire i certificati di firma e creare file IPA.

  • Android Studio (per Android): utilizzato per configurare i file gradle, gestire le chiavi di firma e creare file APK o AAB.

  • Expo EAS Build può semplificare alcuni aspetti, ma gli IDE nativi rimangono cruciali per configurazioni avanzate e la pubblicazione finale.

    Conclusione

    React Native offre vantaggi significativi, ma non è privo di sfide. La varietà di approcci e strumenti può essere opprimente, e migliorare l'esperienza richiede una buona documentazione e formazione.

    Se stai cercando di risparmiare tempo nello sviluppo, è essenziale scegliere con cura il metodo e gli strumenti. Altrimenti, lo sviluppo nativo può essere preferibile per una documentazione più centralizzata e prestazioni ottimali. La scelta dipende dalle esigenze specifiche e dalla tua esperienza con il framework.