React Cordova vs React Native? Perché non entrambe? UTF8Map

Normalmente quando di parla di framework JavaScript AngularJS, EmberJS,.. ognuno ha il suo preferito. In questo post però, parlerò in particolare di React vs React Native.

*Stesso codice [UTF8Map](https://github.com/corso-javascript/react-native-web-utf8map) renderizzato su Web e nativo Android*, la differenza di usabilità si nota quanto più sono gli elementi presenti (e specialmente su smartphone economici meno potenti).

Perché se è vero che ormai molti smartphone, sopratutto Android, sono abbastanza buoni per eseguire un'applicazione Web o dentro una WebView Cordova PhoneGap, è anche vero che molte delle applicazioni di successo sono comunque fatte in nativo (Java, Objective-C, Swift,..). Fluidità, scorrevolezza, UX/UI, vengono "emulate nel web" con scorciatoie tipo Ionic, e inizialmente tutto sembra andare per il verso giusto, ma poi può capitare che l'applicazione non ce la faccia, ma ormai è troppo tardi, quindi si cerca di raggiungere dei compromessi per non aumentare i costi e doverla riscriverla in nativo.

React vs React Native

Facebook ha reso open source delle librerie realmente innovative, tuttavia rimangono diversi punti indefiniti e uno di questi è: se strutturo la mia applicazioni in componenti React posso usarli anche in React Native ? E qui c'é un grosso dipende, in generale se i componenti non usano CSS, Mediaqueries,.. potrebbero funzionare anche su React Native.

UTF8Map e React Native Web

In realtà una strada "non ufficiale Facebook", ma che suscita molto interesse è React Native Web (e anche React Web), ovvero usare lo stesso approccio di React Native e utilizzare il Web come una sorta di piattaforma, che come Android e iOS può avere delle proprie specificità.
Non tutte le funzionalità di React Native sono disponibili, tuttavia si può sempre scrivere del codice specifico per il Web, oppure implementarsi il proprio componente wrapper che mima le funzionalità delle piattaforme native.

Sembra incredibile? No, è già funzionante e per fare alcune valutazioni ho creato UTF8Map che mostra tutti i caratteri Unicode in una sorta di infinite scrolling e come potete provare voi stessi, dalla stessa code base è possibile renderizzare sul Web, su Android nativo o su iOS nativo. E volendo anche Cordova e inglobare la webapp.

Per i dettagli tecnici fate riferimento al mio repo UTF8Map su Github.

Memoria RAM occupata

Si riferisce quando l'applicazione è in esecuzione e quindi attiva.

• Cordova Web: 13Mb
• Android Nativo: 10Mb

Spazio Occupato

Si riferisce allo spazio occupato dell'applicazione installata.

• Cordova Web: 2,46Mb base, poi bisogna aggiungere il sito web remoto
• Android Nativo: 21,89Mb (release), 33Mb (debug)

Conclusione

Dai numeri non emerge l'enorme differenza di fluidità reale che si riesce ad ottenere, bisogna provare.

L'applicazione renderizzata in Android nativo risulta molto più fluida (soprattutto compilata in modalità release) e non perde gli eventi swipe/click.

PRO

• Performance, soprattutto in applicazioni ricche di elementi
• Poter sviluppare al 99% per nativo iOS senza avere Mac OS X (ovviamente poi vi servirà per testarlo sulla piattaforma effettiva)
• Miglioramento incrementale, potete definire dei componenti generici .js o componenti che sfruttano funzionalità messe a disposizione dalla piattaforma sottostante, in questo caso avranno estensione .android.js, .web.js o .ios.js.

CONTRO

• Errori non googlabili. Tra JS, il bridge React e la piattaforma nativa possono accadere degli errori di integrazione non immediati da capire.
• Dimenticatevi DOM e molte utility che utilizzano document.o window. o comunque bisogna ricordarsi che in nativo non ci sono.