HAgnostic News, un’app React Native per la piattaforma Web, Android e iOS

React e React Native rivoluzionano completamente il modo di fare app per Android e iOS, tuttavia è sempre necessario sviluppare almeno 2 applicazioni, una nativa e l’altra web o no?

HAgnostic News è disponibile per Web, Android e iOS (source Github)

In realtà, grazie a React Native Web è possibile fare un’applicazione agnostica multipiattaforma che viene renderizzata nativamente per ogni piattaforma.

Il vantaggio principale è avere una singola applicazione che riutilizza quanto più possibile il nostro codice, ma allo stesso tempo può sfruttare le funzionalità native che ogni sistema operativo ci mette a disposizione.

In realtà questa condivisione di codice sorgente può anche non essere totale, ma può limitarsi ai soli componenti che si vuole riutilizzare o in alternativa avere un progetto agnostico e riscrivere in modo incrementale dei componenti affinché si adattino meglio alla piattaforma nativa.

HAgnostic News

In questa applicazione d’esempio che utilizza le API di Hacker News, il 99% del codice è condiviso e si fa riferimento a delle funzionalità native solo per attivare dei componenti disponibili solo in una piattaforma (es. StatusBar, che è disponibile solo su Android). In alternativa si sarebbe potuto creare un file componente.android.js affinché in fase di building venisse preferito a quello standard.

Differenze rispetto ad un’app web React

Molte tecnologie alle quali ci si è abituati funzionano in modo diverso:

client side routing e links, non è possibile usare <a href=".." />bisogna utilizzare Linking di React Native e quindi ha meno senso fare server side rendering (SSR) per il SEO.
Animazioni/gradienti CSS, mediaqueries,canvas, eventi e tutte le tecnologie web DOM funzionano in modo diverso (ma in mancanza di alternative si possono fare componenti specifici per il Web).
React native -way, si hanno a disposizione dei componenti “standard” e c’é molta meno frammentazione rispetto al web e i vari Bootstrap, jQuery plugin e possibili problemi che si possono incontrare nella loro integrazione.

Differenze rispetto ad un’app React Native

Fintanto che non si utilizzi dei componenti nativi che non possono emulati nel Web è possibile sviluppare utilizzando il browser che è molto più veloce rispetto un simulatore o device nativo.

Per concludere, React Native è pronto per il Web? E la risposta è “non ufficialmente”. Tuttavia se la vostra applicazione non ha la priorità di essere indicizzata, perché ha contenuti privati oppure perché ha il focus sull’interazione, React Native Web è sicuramente un’approccio da tenere in considerazione.

Vi lascio con UTF8Map (del quale ho già scritto) e altri esempi di Nicolas Gallagher che mostrano come l’approccio di React Native non sia solo per Android e iOS ma inizino ad essere interessanti anche per la piattaforma Web.