Dal prototipo all’app: un player radio in React Native

Dopo anni di tentativi, esperimenti e studi, finalmente abbiamo trovato una valida alternativa allo sviluppo nativo di applicazioni mobile: le app ibride in React Native.

Che cos’è React Native?

React Native è un linguaggio ibrido che si basa sul Javascript. La particolarità di React Native rispetto ad altri linguaggi ibridi basati sul Javascript è appunto la compilazione. La compilazione del progetto avviene in nativo, in questo modo l’app comunicherà direttamente con il dispositivo e non passa per webview strane o altre particolarità che rallentano l’esperienza dell’utente. La semplicità del codice Javascript inoltre permette anche a sviluppatori non troppo avanzati di approcciarsi rapidamente allo sviluppo di app più o meno complesse e quindi di supportare sviluppatori più “skillati”.

Il prototipo

Partiamo da un semplice prototipo in Sketch o XD dove lo sviluppatore dovrà appunto appoggiarsi per sviluppare il progetto. Colori, icone, animazioni e molto altro potranno essere consultate rapidamente e in pochi click.

L’esportazione di icone e immagini

Le app di oggi si basano essenzialmente su icone e sfumature su immagini e quant’altro. Si consiglia, per una maggiore rapidità di sviluppo, l’esportazione delle varie icone all’interno di un unico file font, in questo modo sarà possibile utilizzarle rapidamente attraverso semplici componenti React Native.

Lo sviluppo

Iniziamo quindi con lo sviluppo. Per interfacciarsi con i componenti nativi del nostro dispositivo (audio, video, fotocamera ecc.) React Native utilizza delle librerie che comunicano con il nostro device. Sarà quindi possibile trovare player audio, player video, librerie per gestire la fotocamera oppure componenti più semplici già “pre-compilati” come slider, swiper, liste e altri migliaia di componenti. In React Native è possibile applicare differenziazioni grafiche e funzionali in base al sistema operativo del dispositivo con controlli abbastanza rapidi. Tutte le modifiche effettuate possono essere testate rapidamente e senza riavvii dell’emulatore in modo da consentire uno sviluppo rapido su entrambe le piattaforme.

“Sì ok la reattività, ma la compatibilità?”

Grazie alla possibilità di interfacciare l’applicazioni a librerie native sviluppate ad-hoc i problemi di compatibilità con altri dispositivi come smartwatch, inCar o Chromecast sono totalmente eliminati, poichè è possibile estendere il pacchetto come meglio si crede.

In tempi relativamente brevi e con risorse relativamente ristrette è quindi ora possibile sviluppare un player radio più che competitivo con un player radio nativo. Risparmiando tempo di sviluppo sarà quindi possibile sviluppare un maggior numero di app o dedicare maggior tempo alla qualità e ai bugfix dei tuoi ultimi prodotti sviluppati.

Un esempio di Radio Player in React Native?
NBC ’70’80 Hits per iOS
NBC ’70’80 Hits per iOS
Radio Studio Più per iOS
Radio Studio Più per Android

Go to Technology Pusher