Sviluppo app: React Native semplifica
8 minuti di lettura
React Native è un software che aiuta a semplificare, ridurre complicazioni e costi dello sviluppo delle app, risolvendo alcune problematiche.
I software per lo sviluppo di applicazioni per smartphone sono infatti molteplici e rispondono a diverse necessità degli sviluppatori.
L’idea di fondo è di prendere la parte più condivisa e standard di ogni sistema operativo, quindi il browser, e costruirci sopra una applicazione che si comporta e visualizza più o meno allo stesso modo. Più o meno, perché come ben sappiamo, anche se son stati fatti enormi passi avanti, ogni browser ha le proprie differenze e i risultati devono essere verificati.
Cordova, in sintesi, permette di creare un’applicazione web tramite html/css/javascript e di farla di girare all’interno di un browser nel dispositivo in modo “trasparente” per l’utilizzatore. Per poter accedere invece alle funzionalità hardware del dispositivo, come ad esempio la fotocamera o il gps, devono essere presenti delle librerie, scritte nel linguaggio specifico del dispositivo, e che “parlano” in modo comune alla applicazione web.
Il problema principale di questa soluzione sono le performance e la velocità di risposta dell’UI, migliorata molto dall’aumento di potenza dei dispositivi mobile, ma che rimane vincolata dal collo di bottiglia del render della pagina del browser.
Cos’è React? React è un framework javascript realizzato da Facebook per migliorare lo sviluppo e le performance della UI del proprio social network. L’obiettivo principale era di ridurre al minimo le fasi di render del browser creando un DOM parallelo a quello reale e cercando di ottimizzare al meglio le modifiche da apportare.
Cerchiamo di fare un piccolo esempio: al click di un pulsante si aggiunge un’immagine al DOM, si effettuano delle verifiche, si decide che l’utente non deve vederla e si rimuove. In questa operazione avremmo quindi effettuato due render della pagina, una per ogni cambiamento, per poi tornare alla situazione iniziale. Utilizzando React invece l’operazione di aggiunta e rimozione rimane solo a livello di DOM virtuale, visto che alla fine il DOM reale non è cambiato, non viene effettuato nessun render.
Il sito di React Native recita ingannevolmente “Build native mobile apps using JavaScript and React”, cerchiamo di capire perché e come viene fatto un passo ulteriore rispetto a Cordova.
Di base React Native può essere utilizzato, essendo in Javascript, all’interno di un’applicazione Cordova apportando le migliorie che abbiamo appena illustrato. In React Native si separa invece l’UI mantenendo la parte di programmazione in Javascript e un sistema di librerie molto simile a Cordova.
Partendo dal sistema di template JSX di React, React Native crea l’interfaccia utilizzando componenti nativi dei sistemi operativi con un miglioramento di performance e un’esperienza dell’utente più omogenea nell’utilizzo del dispositivo. Le applicazioni quindi non sono realmente “native” ma cercano di emularne il più possibile l’interfaccia e l’esperienza dell’utente. L’aspetto più interessante rispetto a Xamarin è quindi che con React Native è possibile riutilizzare molto più codice e conoscenze all’interno di progetti differenti e di utilizzare un ecosistema molto più aperto.
Anche se non tecnologicamente superiore, React Native ha avuto per questi motivi uno sviluppo molto rapido ed ha ad oggi forse l’ecosistema più attivo e in fermento nel panorama.
I software per lo sviluppo di applicazioni per smartphone sono infatti molteplici e rispondono a diverse necessità degli sviluppatori.
- Ogni sistema operativo (Android, iOS, Windows) per smartphone è sviluppato utilizzando il proprio linguaggio di programmazione e i propri strumenti.
- Sviluppare un’app per differenti sistemi richiederebbe quindi differenti team per lo sviluppo iniziale, correzione di problemi e mantenimento nel tempo. Se guardate al passato molte applicazioni nascevano per un solo sistema operativo e potevano rimanere “esclusive” per anni.
- Avere team diversi, oltre a far lievitare i costi, complica tutte le fasi, una funzionalità può arrivare mesi prima da una parte e un bug esserci solo in un specifico sistema operativo.
CORDOVA
Uno dei primi a dare una risposta interessante, ancora molto utilizzato, è Cordova, su cui è basato PhoneGap (acquistato qualche anno fa da Adobe).L’idea di fondo è di prendere la parte più condivisa e standard di ogni sistema operativo, quindi il browser, e costruirci sopra una applicazione che si comporta e visualizza più o meno allo stesso modo. Più o meno, perché come ben sappiamo, anche se son stati fatti enormi passi avanti, ogni browser ha le proprie differenze e i risultati devono essere verificati.
Cordova, in sintesi, permette di creare un’applicazione web tramite html/css/javascript e di farla di girare all’interno di un browser nel dispositivo in modo “trasparente” per l’utilizzatore. Per poter accedere invece alle funzionalità hardware del dispositivo, come ad esempio la fotocamera o il gps, devono essere presenti delle librerie, scritte nel linguaggio specifico del dispositivo, e che “parlano” in modo comune alla applicazione web.
Il problema principale di questa soluzione sono le performance e la velocità di risposta dell’UI, migliorata molto dall’aumento di potenza dei dispositivi mobile, ma che rimane vincolata dal collo di bottiglia del render della pagina del browser.
- https://phonegap.com/app/
XAMARIN
Un’altro approccio è utilizzato da Xamarin, nata come azienda/progetto separato e comprato e integrato completamente da Microsoft. In questo caso si parte da codice scritto in C# che viene compilato e interpretato dal “cuore” di Xamarin che in base al sistema operativo si interfaccia al dispositivo. Questo approccio permette sicuramente di avere delle performance più elevate ma chiude lo sviluppo dell’applicazione in un recinto molto alto. Tutto il codice scritto sarà difficilmente riutilizzabile in progetti esterni e si ha bisogno di un team di sviluppo con conoscenze molto specifiche e difficilmente spendibili in altri campi. Il target ideale è quindi un’azienda ben strutturata, con un progetto chiaro da sviluppare probabilmente internamente. L’elenco degli utilizzatori di Xamarin può chiarire il concetto.REACT NATIVE
Per parlare di React Native abbiamo bisogno di fare una piccola digressione su React.Cos’è React? React è un framework javascript realizzato da Facebook per migliorare lo sviluppo e le performance della UI del proprio social network. L’obiettivo principale era di ridurre al minimo le fasi di render del browser creando un DOM parallelo a quello reale e cercando di ottimizzare al meglio le modifiche da apportare.
Cerchiamo di fare un piccolo esempio: al click di un pulsante si aggiunge un’immagine al DOM, si effettuano delle verifiche, si decide che l’utente non deve vederla e si rimuove. In questa operazione avremmo quindi effettuato due render della pagina, una per ogni cambiamento, per poi tornare alla situazione iniziale. Utilizzando React invece l’operazione di aggiunta e rimozione rimane solo a livello di DOM virtuale, visto che alla fine il DOM reale non è cambiato, non viene effettuato nessun render.
Il sito di React Native recita ingannevolmente “Build native mobile apps using JavaScript and React”, cerchiamo di capire perché e come viene fatto un passo ulteriore rispetto a Cordova.
Di base React Native può essere utilizzato, essendo in Javascript, all’interno di un’applicazione Cordova apportando le migliorie che abbiamo appena illustrato. In React Native si separa invece l’UI mantenendo la parte di programmazione in Javascript e un sistema di librerie molto simile a Cordova.
Partendo dal sistema di template JSX di React, React Native crea l’interfaccia utilizzando componenti nativi dei sistemi operativi con un miglioramento di performance e un’esperienza dell’utente più omogenea nell’utilizzo del dispositivo. Le applicazioni quindi non sono realmente “native” ma cercano di emularne il più possibile l’interfaccia e l’esperienza dell’utente. L’aspetto più interessante rispetto a Xamarin è quindi che con React Native è possibile riutilizzare molto più codice e conoscenze all’interno di progetti differenti e di utilizzare un ecosistema molto più aperto.
Anche se non tecnologicamente superiore, React Native ha avuto per questi motivi uno sviluppo molto rapido ed ha ad oggi forse l’ecosistema più attivo e in fermento nel panorama.
