Un'introduzione a NativeScript

In questo articolo, daremo un'occhiata a NativeScript, un framework open source per la creazione di app mobili con JavaScript. Alla fine dell'articolo, dovresti avere una buona idea di cosa sia NativeScript, come funziona e quali tecnologie usa. Oltre a ciò, risponderemo anche a domande comuni che potreste avere quando esplorate una nuova tecnologia, ad esempio in che modo si differenzia da alternative come Cordova e React Native e da come Telerik è coinvolta nel progetto..

1. Che cos'è NativeScript?

NativeScript è un framework per la creazione di app mobili native multipiattaforma. Consente agli sviluppatori di utilizzare XML, CSS e JavaScript per creare app per Android, iOS e persino la piattaforma universale Windows. A differenza di Cordova, che utilizza WebView per il rendering dell'interfaccia utente dell'app, NativeScript utilizza il motore di rendering della piattaforma nativa, il che significa che fornisce un'esperienza utente veramente nativa. 

2. Pro

• È gratuito e open source. Ciò significa che puoi contribuire al codice e utilizzarlo come vuoi, purché non violi la licenza di Apache 2.0.
• Ti consente di creare app veramente native per dispositivi Android e iOS. Ciascuno dei componenti dell'interfaccia utente che NativeScript espone viene tradotto nei componenti UI nativi corrispondenti.
• Ti consente di accedere alle API della piattaforma nativa tramite il codice JavaScript. Non è necessario avere conoscenze di Java o Objective-C per utilizzare le API della piattaforma nativa perché è possibile scrivere tutto in JavaScript. Ciò significa che se devi accedere a una funzione specifica del dispositivo, puoi semplicemente imparare come accedere alle API native con JavaScript e sei pronto per andare. 
• Offre agli utenti un'esperienza più vicina a quella nativa rispetto a quelle fornite da framework di app per dispositivi mobili ibridi come Cordova. 
• Consente agli sviluppatori di creare, distribuire e gestire facilmente le proprie app NativeScript tramite la piattaforma Telerik. Discuterò la piattaforma Telerik più in una sezione successiva.
• Ha supporto zero-day per nuove piattaforme native. Ciò significa che puoi immediatamente utilizzare le ultime API native e i componenti dell'interfaccia utente ogni volta che Google o Apple aggiornano la loro piattaforma.
• La documentazione fornisce molte informazioni su come iniziare, concetti di base e l'interfaccia utente. Esistono anche esempi, esercitazioni, forum, domande Stack Overflow e app di esempio che possono aiutare i principianti a iniziare con NativeScript. 
• Puoi scrivere le tue app NativeScript con TypeScript. TypeScript è un linguaggio che traspone in JavaScript e aggiunge funzionalità di programmazione orientate agli oggetti a JavaScript.
• Qualsiasi libreria JavaScript che puoi trovare su npm che non si basa sul browser e sul DOM può essere utilizzata all'interno di NativeScript. Esempi di tali librerie includono librerie di utilità come lodash e underscore. 
• Puoi fare quasi tutto con la CLI di NativeScript. Elementi di base come la creazione di un nuovo progetto, l'aggiunta di una piattaforma, l'esecuzione su un dispositivo e la distribuzione su una piattaforma specifica sono tutti inclusi. Oltre a ciò, puoi anche installare plug-in, eseguire il debug dell'applicazione e caricare nell'app store.

3. Cons

• Non ci sono HTML e DOM in NativeScript. Dovrai imparare come utilizzare i diversi componenti dell'interfaccia utente per creare l'interfaccia utente dell'app. 
• Mancano i plugin verificati. Al momento della stesura di questo articolo, ci sono solo 16 plugin verificati in totale. Sebbene ci siano molti plugin NativeScript elencati su npm, non si può mai essere veramente sicuri della loro qualità. 
• Gli sviluppatori devono conoscere le API Android e iOS native per accedere all'hardware del dispositivo e ad altre funzionalità specifiche della piattaforma.
• A causa della sua natura nativa, puoi testare solo le app su un dispositivo reale o un emulatore. Ciò rende più lento il setup iniziale per i test. Ma una volta acceso sul dispositivo, subentra il caricamento a caldo. Ciò significa che ogni volta che apporti una modifica al codice sorgente, ricarica immediatamente l'app per riflettere le modifiche.
• Non tutti i componenti dell'interfaccia utente sono disponibili gratuitamente. È necessario acquistare Telerik UI per NativeScript se si desidera utilizzare componenti come grafici e calendari.

4. Come funziona?

NativeScript è composto da una macchina virtuale JavaScript, un runtime e un modulo bridge. La macchina virtuale JavaScript interpreta ed esegue il codice JavaScript. Quindi il modulo bridge traduce le chiamate per le chiamate API specifiche della piattaforma e restituisce il risultato al chiamante. Per dirla semplicemente, NativeScript offre agli sviluppatori un modo per comandare la piattaforma nativa tramite JavaScript invece di Objective-C su iOS o Java su Android.

Naturalmente, dietro le quinte c'è molto di più, ma gli sviluppatori di Telerik lo spiegano meglio di me, quindi se vuoi saperne di più sul funzionamento interno di NativeScript, puoi leggere l'articolo di Georgi Atanasov su NativeScript - una panoramica tecnica o l'articolo di TJ VanToll su How NativeScript Works.

5. Quali tecnologie utilizza?

Con NativeScript, si utilizza XML per descrivere l'interfaccia utente dell'app, i CSS per lo stile e JavaScript per aggiungere funzionalità. 

Puoi usare TypeScript con Angular 2 se preferisci utilizzare un framework per l'authoring del tuo codice JavaScript. 

Per lo stile, NativeScript utilizza solo un sottoinsieme di CSS. Ciò significa che non tutte le funzionalità CSS disponibili in un ambiente browser possono essere utilizzate. Ad esempio, non puoi usare i float o gli attributi di posizione. Ecco l'elenco completo delle proprietà CSS supportate. Proprio come nel browser, puoi aggiungere stili che si applicano a tutta l'app, a pagine specifiche o solo a una specifica componente dell'interfaccia utente. Se si preferisce usare Sass, è possibile installare il plugin NativoScript Dev Sass.

Per descrivere la struttura dell'interfaccia utente, si utilizza XML. Ogni pagina dell'app deve trovarsi nel proprio file XML. NativeScript viene fornito con widget o componenti dell'interfaccia utente predefiniti che è possibile utilizzare per creare l'interfaccia utente dell'app. Alcuni di questi componenti sono simili ai diversi elementi HTML utilizzati nel browser. 

Ad esempio, c'è un Immagine componente, che è l'equivalente del img elemento, o il Campo di testo componente, che è equivalente al ingresso elemento con un tipo di testo. I gestori di eventi come il tocco di un pulsante vengono aggiunti nel componente stesso. Ecco un esempio:

exports.doSomething = function () // fa qualcosa

Un'altra cosa da notare è che i componenti servono anche come modelli. Se hai familiarità con le librerie di template come Handlebars o Moustache, dovresti essere a casa con la seguente sintassi:

L'esempio sopra utilizza il Visualizzazione elenco componente. Come suggerisce il nome, questo componente ti consente di creare elenchi. animali è un array definito nel file JavaScript ed è associato a animali variabile sul caricamento della pagina. Questo rende il animali variabile disponibile per l'uso all'interno del file XML.

var animals = ['panda', 'tiger', 'monkey', 'snake', 'mantis']; function pageLoaded (args) var page = args.object; page.bindingContext = animals: animals

Questo emette ogni elemento nell'array all'interno del Visualizzazione elenco.

Infine, ci sono plugin che consentono di accedere all'hardware del dispositivo e alle funzionalità specifiche della piattaforma. NativeScript viene fornito con un plug-in per telecamera preinstallato. Questo ti consente di accedere alla fotocamera del dispositivo e scattare foto. Puoi quindi salvare il percorso locale della foto nella tua app per un uso futuro. Le funzionalità specifiche della piattaforma come la condivisione social possono anche essere utilizzate installando plug-in come il plug-in Social Share di NativeScript.

6. Quali app puoi creare?

Grazie alla nativa natura di NativeScript, puoi creare praticamente qualsiasi tipo di app con esso. Ecco alcuni esempi di app che puoi creare con NativeScript:

• App che parlano al server, come app di notizie e app di social networking.
• Giochi semplici come scacchi, tic-tac-toe o flipper.
• App in tempo reale come app di chat o feed live. C'è un plug-in Firebase per NativeScript che puoi utilizzare per implementare app in tempo reale.
• App di musica e video streaming. Esiste un plug-in per video player che consente di riprodurre video memorizzati localmente o di trasmettere video in remoto, come quelli su YouTube.
• Mappe e app di geolocalizzazione. Esistono plugin per Google Maps e API di mappe native.
• App che accedono all'hardware del dispositivo. Gli esempi includono app per fotocamera e app IoT.

Per quanto riguarda i tipi di app che è possibile creare con NativeScript, i soli fattori limitanti sono le prestazioni e la disponibilità dei plug-in. La scrittura di app mobili native in JavaScript ha un prezzo: non puoi davvero aspettarti di creare app che richiedono alte prestazioni. Gli esempi includono giochi con grafica e animazioni complesse, app con molte parti mobili e processi in background. 

Un'altra limitazione è la disponibilità dei plugin. La maggior parte degli sviluppatori arriva su NativeScript da uno sfondo di sviluppo web. Ciò significa che la maggior parte di loro non ha familiarità o conoscenza limitata delle API della piattaforma nativa che potrebbero essere utilizzate per creare plug-in per accedere all'hardware del dispositivo o alle funzionalità specifiche della piattaforma come contatti o messaggistica.

Se vuoi saperne di più su quali tipi di app puoi creare con NativeScript, puoi consultare la pagina App Showcases. La maggior parte delle app elencate sono pubblicate su Google Play Store e Apple Store. Ciò significa che puoi installarlo ed eseguirlo sul tuo dispositivo per avere un'idea di quali app sono state create con NativeScript e come si comportano.

7. Come funziona NativeScript con i framework ibridi?

Se non sei nuovo nello sviluppo di app per dispositivi mobili ibridi, potresti aver trovato framework come Cordova e React Native. NativeScript è correlato a questi due framework in quanto entrambi mirano a risolvere il problema di "Scrivi una volta, corri ovunque" nel campo dello sviluppo di app per dispositivi mobili. Ora diamo un'occhiata a ciascun quadro:

Per riassumere, Cordova è la vecchia generazione di framework per app mobili ibridi. Utilizza WebView per eseguire il rendering dell'interfaccia utente dell'app e accedere alle funzionalità dei dispositivi nativi tramite plug-in. React Native e NativeScript sono la nuova generazione perché traducono il tuo codice JavaScript in modo che possa essere eseguito dalla piattaforma nativa.

Qualcuno potrebbe trovare un nome migliore per framework come React Native e NativeScript in futuro. Ma per ora li classifichiamo come "Native Hybrid Frameworks" perché entrambi usano JavaScript per creare app e offrono un'esperienza e prestazioni native agli utenti.

8. Come è coinvolto Telerik nel progetto?

Telerik è la società che ha creato NativeScript. E, proprio come qualsiasi altra azienda, hanno bisogno di fare soldi per sopravvivere. Quindi potresti chiedere, se NativeScript è gratuito e open source, come fa Telerik a fare soldi da esso? Bene, la risposta è attraverso la piattaforma Telerik e l'interfaccia utente di Telerik per NativeScript. 

La piattaforma Telerik fornisce agli sviluppatori gli strumenti necessari per progettare, costruire, testare, distribuire, gestire e misurare facilmente le prestazioni delle app NativeScript. Ecco alcuni esempi degli strumenti che offrono:

• un app visual builder che ti consente di trascinare e rilasciare diversi componenti dell'interfaccia utente
• un database cloud che fornisce il database per la tua app
• aggiornamenti dell'app in tempo reale per spingere facilmente gli aggiornamenti all'app senza doverli inviare nuovamente all'app store e richiedere all'utente di aggiornare manualmente l'app
• un servizio di analisi che risponde a domande come il modo in cui viene utilizzata l'app, come si sta eseguendo e cosa ne pensano gli utenti

L'interfaccia utente di Telerik per NativeScript è un insieme di componenti per la creazione dell'interfaccia utente dell'app. NativeScript è già dotato di componenti UI gratuiti, ma ci sono anche componenti UI a pagamento come il grafico e il calendario che puoi usare solo quando lo acquisti da Telerik.

9. Passi successivi

Se vuoi saperne di più su NativeScript, ti consiglio di controllare le seguenti risorse:

• Se hai ancora domande su NativeScript, assicurati di controllare la pagina delle FAQ.
• Per un articolo pratico sulla creazione di un'app di Hello World con NativeScript, consulta la guida introduttiva di NativeScript.
• Se si desidera una raccolta di articoli, esercitazioni video e frammenti di codice su NativeScript, esistono NativeScript Snacks e NativeScript Resources.

Conclusione

In questo articolo hai imparato le basi di NativeScript. Come hai visto, NativeScript è una buona opzione per creare app per dispositivi mobili utilizzando le competenze che hai già come sviluppatore web. Spero che questo articolo ti abbia fornito le conoscenze necessarie per aiutarti a decidere se NativeScript è giusto per te.