PWA vs React Native: uno sguardo dettagliato

Analogamente a PWA e Flutter, PWA e React Native sono tra gli approcci più popolari per lo sviluppo di applicazioni multipiattaforma in questo momento. E quando si ricerca su questo argomento, è comprensibile sentirsi confusi quando si cerca di decidere il giusto percorso di sviluppo per la propria attività. In questo articolo, analizzeremo i dettagli di ciascun approccio di sviluppo, da quello che sono, i loro casi d'uso e le specifiche su come ogni approccio di sviluppo può essere vantaggioso per la tua azienda.

I brevi dettagli

Ecco i rapidi riepiloghi di ciascun approccio di sviluppo, nonché i casi d'uso a cui si riferiscono.

App Web progressiva (PWA)

Definizioni

Progressive Web App (PWA) è una soluzione emergente per lo sviluppo di applicazioni basate sul Web . Fondamentalmente, le PWA si basano su operatori del servizio e manifest di app Web per fornire esperienze simili alle app, che includono funzionalità precedentemente esclusive delle app come notifiche push, disponibilità offline, installabilità e così via.

Casi d'uso ed esempi

A causa della loro natura basata sul Web, le PWA sono più adatte per i siti Web la cui preoccupazione principale è fornire esperienze più coinvolgenti e indipendenti dalla connettività, o semplicemente per i siti Web che desiderano raggiungere un pubblico più ampio.

A partire da ora, le PWA stanno vedendo un'ampia adozione nel settore dell'e-commerce in cui sono necessarie funzionalità come le notifiche push e la disponibilità offline per migliorare i tassi di conversione degli acquisti e costruire una base di clienti più fedeli.

 Letture consigliate: 12 migliori esempi di app Web progressive (PWA) nel 2021

Reagire nativo

Definizioni

React Native è un framework per lo sviluppo di applicazioni true native multipiattaforma basate su JavaScript. Le app create con React Native possono interagire con le API native tramite il paradigma dell'interfaccia utente dichiarativa di React e JavaScript, e ciò significa che una singola base di codice React può essere utilizzata per mantenere due piattaforme (iOS e Android), il tutto senza compromettere l'esperienza degli utenti.

Casi d'uso ed esempi

È difficile definire un caso d'uso specifico per React Native, poiché viene utilizzato per creare vari tipi di app come app di social media popolari (ad es. Facebook, Instagram, Pinterest, ecc.) o app di comunicazione digitale (ad es. Skype, Discord , Tencent QQ, ecc.). Per un elenco di app create con React Native, dai un'occhiata alla vetrina delle app React Native.

Entrando nello specifico

Nella parte seguente, analizzeremo le specifiche di ciascun approccio di sviluppo, nonché approfondimenti su come ogni approccio di sviluppo può adattarsi al piano della tua attività.

Lingua

Le PWA si affidano alle tecnologie web per offrire esperienze simili a quelle delle app. Quindi linguaggi web come HTML, CSS e JavaScript sono ancora i linguaggi principali che compongono una PWA, mentre le app React Native usano React.js (una libreria JavaScript) come linguaggio principale.

Questo è il motivo per cui scavando nel codice di un'app React Native, dovresti vedere che condivide alcune somiglianze con i linguaggi Web, con l'unica grande differenza che le app React Native utilizzano componenti nativi anziché componenti Web per creare l'interfaccia utente.

Interfaccia utente

Poiché le PWA si basano sulle tecnologie Web e vengono eseguite sul motore del browser , l'interfaccia utente di una tipica PWA potrebbe non sembrare nativa agli occhi esperti. Tuttavia, per gli utenti tipici, le differenze tra l'interfaccia utente simile a un'app di PWA e l'interfaccia utente dell'app nativa sono al massimo minime.

Un'app React Native, invece, è in grado di fornire vere esperienze native , grazie all'uso di componenti nativi, che includono componenti specifici della piattaforma come <DatePickerIOS> e <ProgressViewIOS> per iOS, o <ViewPagerAndroid> e <ToastAndroid> per Android.

Prestazione

La performance è un argomento delicato, poiché è difficile arrivare alla verità su questo. Tuttavia, da quando entrambi gli approcci di sviluppo utilizzano pesantemente JavaScript, puoi aspettarti prestazioni abbastanza simili su tutte le estremità, con un leggero vantaggio appartenente a React Native, poiché è più strettamente integrato con il sistema in uso e non deve comunicare tramite un browser.

Tuttavia, il fatto che le PWA risiedano nell'ambiente del browser non significa che funzioni come il tuo sito web medio. Grazie al metodo di memorizzazione nella cache avanzato impiegato nelle PWA, non ci sono più i singhiozzi occasionali durante il caricamento tra le pagine come si trovano nei siti Web/app Web medi; e insieme al fatto che le PWA sono essenzialmente applicazioni a pagina singola migliorate, le prestazioni percepite delle PWA sono il più vicino possibile a una vera esperienza di app nativa.

Un esempio è Temoorst, il marchio con sede in Kuwait nel settore dei beni usa e getta. Con SimiCart come fornitore di soluzioni preferito, il marchio ha optato sia per un'app nativa che per una PWA per i migliori ROI possibili e l'aspetto delle prestazioni di PWA è ancora qualcosa che il marchio non si aspettava. In un test alla cieca, ti sarà difficile trovare differenze di prestazioni e visive tra la loro PWA e la loro app React Native.

Per testare la differenza di prestazioni tra un'app React Native e una PWA, ti invitiamo a provare le app Temoorst. Le app stesse sono testimonianze di come potrebbe apparire un'app React Native o una PWA ben ottimizzate quando vengono spinte al massimo.

• App React Native : Google Play Store | App Store di Apple
• PWA : https://temoorst.com/

Sicurezza

A causa del maggiore livello di integrazione con il dispositivo in uso, un'applicazione React Native è naturalmente più sicura e meno soggetta a vulnerabilità. Per aggiungere più livelli di sicurezza in un'app React Native, ci sono vari approcci da utilizzare durante il processo di sviluppo, come ad esempio:

• Pinning SSL: per proteggere le connessioni da app a server
• Portachiavi/informazioni sensibili: fornisce un'archiviazione locale sicura insieme all'autenticazione biometrica/del volto
• Jscrambler: previene la manomissione del codice aggiungendo un livello di autodifesa

Poiché le PWA risiedono nell'ambiente del browser e sfruttano il browser per la maggior parte delle sue capacità, la maggior parte del lavoro di sicurezza viene svolto dal browser stesso. Rispetto a un normale sito Web, una PWA è più sicura poiché il componente principale della PWA, il service worker, viene eseguito solo su HTTPS, il che significa che la comunicazione tra lato client e lato server è sempre crittografata.

I service worker funzionano solo su HTTPS. Poiché gli addetti ai servizi possono intercettare le richieste di rete e modificare le risposte, gli attacchi "man-in-the-middle" potrebbero essere molto dannosi.

Introduzione al Service Worker

Rilevabilità

È qui che brillano le PWA. Le PWA non solo sono disponibili sul Web ed esposte ai motori di ricerca, ma sono anche pubblicabili negli app store. Google, Microsoft e persino Samsung si sono tutti uniti al carrozzone per spingere per una maggiore adozione delle PWA abbracciando le PWA riconfezionate nei loro app store. Microsoft Store, ad esempio, fa anche un ulteriore passo avanti e prevede di ripopolare automaticamente il proprio app store con PWA di qualità indicizzate dai propri crawler Bing:

Il Microsoft Store, alimentato dal crawler di Bing, indicizzerà automaticamente l'app Web progressiva di qualità selezionata

Benvenuto alle app Web progressive su Microsoft Edge e Windows 10

A partire da ora, Apple App Store è l'unico mercato di app popolare rimasto in cui PWA sembra non riuscire a raggiungere. Questo perché Apple ha chiarito nelle sue linee guida di revisione che per essere approvata, l'app deve essere "oltre un sito Web riconfezionato" - e questa è una discussione completamente diversa di per sé, su come Apple stia attivamente scoraggiando lo sviluppo di il Web per paura di danneggiare i loro profitti.
Rispetto alle PWA, la rilevabilità delle app create con React Native non è così impressionante, ma la natura multipiattaforma del framework significa che con una singola base di codice, puoi comunque rendere la tua app rilevabile sia su Google Play Store che su Apple App Store. E considerando che gli utenti iOS sono la maggioranza in alcuni paesi (inclusi gli Stati Uniti) e che le PWA non possono essere pubblicate su Apple App Store, questo dovrebbe essere un motivo sufficiente per optare per lo sviluppo di app React Native al fine di servire dove la maggior parte dei tuoi utenti sono...

Accessibilità hardware

Poiché le app React Native sono vere applicazioni native, godono di un accesso molto più ampio alle API native. Ciò significa che anche l'accesso di basso livello all'hardware del dispositivo (ad esempio, l'accesso a NFC (Near Field Communication), l'elenco dei contatti, ecc.) e l'accesso sistemico (ad esempio, l'accesso alle impostazioni di sistema, ai registri, ecc.) sono possibili e possono essere sfruttati per migliorare l'esperienza dell'utente.
E poiché la PWA si basa sulle API Web per la sua accessibilità hardware, una PWA è naturalmente più limitata nel modo in cui può utilizzare le risorse del sistema. Nella migliore delle ipotesi, ovvero se il browser in uso supporta tutte le più recenti API di accesso hardware, una PWA può avere accesso a varie funzionalità hardware precedentemente esclusive delle app native come geolocalizzazione, accesso a fotocamera e microfono, realtà aumentata (con WebXR API del dispositivo).

 Letture consigliate: Progressive Web App (PWA) e Hardware Access

Costi di sviluppo

In termini di costi di sviluppo, i progetti React Native tendono ad essere costosi a causa dell'alto livello di complessità coinvolto. Ad esempio, è comune che un progetto React Native di base abbia un costo fino a $ 15.000 , mentre un progetto PWA di base dovrebbe costare solo circa $ 1000 - $ 10.000. Tuttavia, rispetto ad altri framework di app native, React Native rimane una soluzione conveniente grazie alla sua architettura indipendente dalla piattaforma. Con un'unica base di codice React Native, puoi pubblicare la tua app sia su Google Play Store che su Apple App Store, riducendo significativamente i costi totali di sviluppo senza danneggiare l'esperienza dell'utente.

E sebbene in genere sia più economico dei progetti React Native, il costo di sviluppo di un progetto PWA può variare in modo significativo in base al percorso di sviluppo che scegli di seguire. Ad esempio, se decidi di utilizzare l'architettura headless (che è una soluzione più flessibile e scalabile rispetto all'architettura tradizionale), puoi aspettarti un aumento significativo dei costi di sviluppo della tua PWA a causa del livello più elevato di competenza tecnica richiesta nel processo .

Conclusione

Poiché si tratta di due percorsi di sviluppo per esigenze molto specifiche, scegliere tra React Native e PWA può essere una decisione difficile. Una PWA è leggera, con processi di aggiornamento e installazione semplici e le caratteristiche e le funzionalità fornite da PWA dovrebbero essere più che sufficienti per l'utente medio dell'app. Tuttavia, a causa delle attuali restrizioni che Apple impone ai propri App Store, potrebbe essere una buona idea investire in una buona app React Native se la maggior parte dei tuoi utenti mobili è su iPhone.

Per i commercianti Magento che desiderano creare app React Native multipiattaforma o PWA senza testa, qui su SimiCart offriamo soluzioni convenienti per aiutarti a ottenere un vantaggio competitivo rispetto ai tuoi concorrenti.