Contenuto
- PWA e app native: qual è la differenza?
- App Web progressive: creazione per il Web
- Punti di forza delle PWA
- Debolezze delle PWA
- React Native
- Punti di forza di React Native
- Debolezze di React Native
- NativeScript
- Punti di forza di NativeScript
- Punti deboli di NativeScript
Quale approccio dovresti adottare quando crei un'app? Dovresti intraprendere il percorso PWA / tecnologie web o dovresti diventare nativo e progettare per piattaforme specifiche? Entrambe le opzioni hanno i loro pro e contro e in questo articolo ci concentriamo su alcune delle scelte popolari utilizzate per creare app web e native.
Le PWA (Progressive Web Apps), note anche come web app, sono costruite con le più diffuse tecnologie web HTML, CSS e JavaScript e funzionano in un browser web. (Dai un'occhiata ad alcuni dei tag HTML essenziali per aiutarti con le tue build.) Le PWA sono effettivamente siti web per dispositivi mobili progettati per assomigliare a un'app e l'uso di API web offre loro funzionalità simili a un'app nativa.
Per ulteriori consigli sulla creazione di app, vedere il nostro post su come creare un'app o, se si tratta di un sito che si desidera creare, vedere questi principali costruttori di siti Web e servizi di hosting web.
PWA e app native: qual è la differenza?
Le Progressive Web App hanno il vantaggio di essere installabili e live su un dispositivo senza la necessità di un app store. Inoltre, parte del processo è rappresentato dal Web App Manifest che consente agli sviluppatori di controllare l'aspetto e il modo in cui viene avviata di un'app. Inoltre, i web designer / sviluppatori front-end avranno già le competenze necessarie per iniziare a creare immediatamente. Non è necessario imparare una nuova lingua, a differenza delle app native.
Le app native sono create pensando a un sistema operativo specifico, ad es. iOS e Android e utilizza un framework o un linguaggio per adempiere a tale scopo. Le applicazioni iOS in genere utilizzano Xcode o Swift e le app Android, JavaScript. Ma per questo articolo ci concentriamo su un paio di framework open source basati su JavaScript - React Native e NativeScript - che funzionano per entrambe le piattaforme.
I vantaggi delle app native è che in genere offrono funzionalità migliori in quanto fanno un uso migliore dell'hardware e del software di un dispositivo, sono più veloci e reattivi e si ottiene la garanzia della qualità attraverso le valutazioni negli app store. Ma significherà dover imparare a usare un framework o una libreria specifici.
Qui esaminiamo tre diverse opzioni - una per il web (PWA) e due per native (React Native, NativeScript) - per la creazione di un'app. Analizziamo come funzionano, cosa possono fare e analizziamo i loro punti di forza e di debolezza per aiutarti a decidere quale opzione dovresti scegliere per creare la tua app.
App Web progressive: creazione per il Web
Punti di forza delle PWA
- Le app funzionano anche nel browser
- Distribuzione: browser, negozi aziendali e app
- Può utilizzare React, Angular, Vue, vanilla o altri framework
Debolezze delle PWA
- Nessun accesso a tutte le API native
- Le capacità e la distribuzione in negozio su iOS e iPadOS sono limitate
- È in continua evoluzione
Le PWA sono l'attuale modello di progettazione per creare app ad alte prestazioni, offline e installabili utilizzando solo lo stack web: HTML, CSS, JavaScript e API dei browser. Grazie al service worker e alle specifiche del manifesto dell'app Web, ora possiamo creare un'esperienza di app di prima classe dopo l'installazione per Android, iOS, iPadOS, Windows, macOS, Chrome OS e Linux.
Per creare PWA, puoi utilizzare qualsiasi architettura: dal lato server, JavaScript vanilla, React, Vue, Angular o altri framework lato client. Può essere un'applicazione a pagina singola o un'applicazione Web multipagina e definiamo come supporteremo gli utenti offline.
In questo approccio, non abbiamo bisogno di impacchettare e firmare le risorse della nostra app: ospitiamo semplicemente i file in un server web e il service worker sarà responsabile della memorizzazione nella cache dei file nel client e di servirli dopo l'installazione. Ciò significa anche che se un'app deve essere aggiornata, è sufficiente modificare i file sul server e la logica del lavoratore del servizio sarà responsabile dell'aggiornamento sui dispositivi degli utenti senza l'intervento dell'utente o dell'app store.
In termini di distribuzione, il metodo più comune è il browser. Gli utenti installano l'app dal browser utilizzando la voce di menu Aggiungi alla schermata iniziale o Installa, accettando un invito all'installazione o utilizzando un'interfaccia utente di app Web personalizzata su piattaforme compatibili. Vale la pena notare che Apple rifiuta i PWA puri pubblicati nell'App Store e incoraggia gli sviluppatori web a distribuirli tramite Safari.
L'interfaccia utente è gestita esclusivamente dal runtime web, il che significa che il web designer è responsabile del rendering di ogni controllo sullo schermo. Se utilizzi un framework UI, come Ionic, o una libreria di Material Design, HTML e CSS imiteranno le interfacce native su Android o iOS ma non è obbligatorio.Quando si eseguono PWA, l'applicazione delle tecniche di performance web è obbligatoria per mantenere una buona esperienza utente.
In termini di capacità, una PWA avrà accesso solo alle API disponibili nel motore del browser su quella piattaforma e non può essere estesa con codice nativo, ad eccezione delle distribuzioni PWA dell'app store. In questa materia, iOS e iPadOS sono le piattaforme più limitate per PWA, mentre Chrome (per Android e sistemi operativi desktop) ha una maggiore disponibilità e sta lavorando duramente per aggiungere ogni possibile API a JavaScript con il progetto Fugu.
- Miglior cloud storage: scegli l'opzione giusta per te.
React Native
Punti di forza di React Native
- Stessi schemi di React.js
- Alcune API web sono esposte
- Supporto Web e desktop
Debolezze di React Native
- Impossibile riutilizzare i componenti dell'interfaccia utente web
- Il bridge nativo ha bisogno di un po 'di lavoro
- È necessaria l'esperienza di React
React Native è un framework di componenti basato su JavaScript open source, sponsorizzato da Facebook, che utilizza i modelli di progettazione React, nonché il linguaggio JavaScript per compilare app native per iOS, iPadOS e Android da un unico codice sorgente.
Ma nessun elemento HTML è accettato per il rendering; sono validi solo gli altri componenti nativi. Pertanto, invece di eseguire il rendering di un file div> con un p> e a input> elemento con JSX, eseguirai il rendering di un file Visualizza> con un Testo> e a TextInput>. Per i componenti di stile, usi ancora i CSS e il layout è definito tramite Flexbox.
L'interfaccia utente non verrà renderizzata nel DOM di un browser ma utilizzando le librerie dell'interfaccia utente nativa su Android e iOS. Pertanto, a Pulsante> in ReactNative diventerà un'istanza di UIButton su iOS e android.widget.Button lezione su Android; non vi è alcun runtime web coinvolto in React Native.
Tuttavia, tutto il codice JavaScript verrà eseguito in una macchina virtuale JavaScript sul dispositivo, quindi non c'è conversione da JavaScript a codice nativo reale durante la compilazione dell'app. Esiste una serie di API ben note per gli sviluppatori web, come Fetch API, WebSocket e timer del browser: setInterval e requestAnimationFrame. Altre capacità vengono distribuite nella piattaforma tramite API personalizzate, come le animazioni.
Puoi avviare un rapido progetto React Native con due CLI gratuite: Expo o la più avanzata e ufficiale ReactNative CLI. Se utilizzi la CLI ufficiale, hai anche bisogno di Android Studio per compilare e testare l'app Android e Xcode per fare lo stesso su iOS e iPadOS, quindi avrai bisogno di un computer macOS per quella piattaforma.
React Native compila app native per iOS e Android, il che significa che la distribuzione della tua app seguirà le stesse regole delle altre app native: app store per app pubbliche, distribuzione aziendale e alpha / beta test. In genere, non è possibile distribuire un'app tramite un browser, sebbene React Native for Web e React Native di Microsoft per le piattaforme Windows possano essere d'aiuto.
NativeScript
Punti di forza di NativeScript
- Buoni strumenti per la codifica e il test
- Ampia galleria di app pronte per giocare
- Tutte le API Android e iOS sono esposte in JS
Punti deboli di NativeScript
- Piccola comunità
- Non è possibile riutilizzare i componenti dell'interfaccia utente Web
- Nessun supporto web, desktop o React
NativeScript non è noto come React Native, ma compete nello stesso campo: app native per iOS e Android da JavaScript e framework web. Ti consente di utilizzare JavaScript o TypeScript e un file di interfaccia utente XML per creare app native. Supporta anche Angular e Vue immediatamente, quindi è un'ottima soluzione per gli sviluppatori abituati a questi framework.
I vantaggi di NativeScript sono più chiari quando usi Angular o Vue. Per Angular, crei gli stessi componenti a cui sei abituato ma usando XML invece di HTML per il modello, comprese tutte le associazioni di dati. Nell'XML, invece di un file div> con un p> e un img>, inserirai un file StackLayout> con un Etichetta> e un Immagine> componente.
CSS e Sass sono supportati con stili simili a CSS nel browser. Il routing e la gestione della rete vengono effettuati tramite implementazioni dei servizi angolari standard. Per Vue, è qualcosa di simile; scrivi il modello in XML invece di usare HTML nello stesso modello> elemento nel tuo file .vue.
NativeScript include una raccolta di componenti che vengono quindi mappati a un controllo nativo Android o iOS, quindi quando esegui il rendering di un elenco o di un selettore, sarà l'app nativa, utilizzando la stessa idea di React Native.
Il codice JavaScript o TypeScript (traspilato) viene eseguito in una macchina virtuale JavaScript sul dispositivo con un bridge da / per l'ambiente nativo. In quel bridge, le intere API native di Android o iOS / iPadOS sono esposte, quindi nonostante abbiamo accesso alle API multipiattaforma, possiamo istanziare o chiamare qualsiasi codice Java o Objective-C da JavaScript / TypeScript e NativeScript eseguirà il marshalling dei tipi di dati.
NativeScript ha un ottimo supporto per gli strumenti, inclusi plug-in di codice VS, CLI, un sistema di test di ricarica a caldo e un'app di giochi NativeScript, quindi non è necessario installare tutte le dipendenze durante il test, così come diversi servizi aggiuntivi come un online terreno di gioco.
Infine, NativeScript compila solo un'app per Android e iOS che può essere installata dai canali di distribuzione ufficiali e dagli app store se rispetti le loro regole, la distribuzione aziendale e i test alpha / beta. In genere non ci sarà modo di distribuire app da un browser e non ci sono soluzioni per app desktop per questa piattaforma.
Questo articolo è stato originariamente pubblicato in numero 325 of net, la rivista più venduta al mondo per web designer e sviluppatori. Acquistare numero 325 o sottoscrivi a rete.
Unisciti a noi nell'aprile 2020 con la nostra formazione di superstar JavaScript a GenerateJS, la conferenza che ti aiuta a creare JavaScript migliore. Prenota ora agenerateconf.com
