Une introduction à NativeScript

Dans cet article, nous allons jeter un coup d'œil à NativeScript, un framework open source pour la création d'applications mobiles avec JavaScript. À la fin de l'article, vous devriez avoir une assez bonne idée de ce qu'est NativeScript, de son fonctionnement et des technologies qu'il utilise. En plus de cela, nous allons également répondre aux questions courantes que vous pourriez avoir lors de l'exploration d'une nouvelle technologie, telle que la différence de solutions alternatives telles que Cordova et React Native, et la manière dont Telerik est impliqué dans le projet..

1. Qu'est-ce que NativeScript??

NativeScript est un cadre permettant de créer des applications mobiles natives multiplates-formes. Il permet aux développeurs d'utiliser XML, CSS et JavaScript pour créer des applications pour Android, iOS et même la plate-forme universelle Windows. Contrairement à Cordova, qui utilise WebView pour restituer l'interface utilisateur de l'application, NativeScript utilise le moteur de rendu de la plate-forme native, ce qui signifie qu'il offre une expérience utilisateur réellement native.. 

2. Avantages

• C'est gratuit et open source. Cela signifie que vous pouvez contribuer au code et l'utiliser comme bon vous semble, à condition de ne pas enfreindre la licence Apache 2.0..
• Il vous permet de créer des applications véritablement natives pour les appareils Android et iOS. Chacun des composants d'interface utilisateur exposés par NativeScript est traduit en ses composants d'interface utilisateur natifs correspondants..
• Il vous permet d'accéder aux API de la plate-forme native via du code JavaScript. Vous n'avez pas besoin de connaître Java ou Objective-C pour utiliser les API de plate-forme native, car vous pouvez tout écrire en JavaScript. Cela signifie que si vous avez besoin d'accéder à une fonctionnalité de périphérique spécifique, vous pouvez simplement apprendre à accéder aux API natives avec JavaScript et vous êtes prêt à partir.. 
• Il offre aux utilisateurs une expérience plus proche de l’application native que celle fournie par les infrastructures d’applications mobiles hybrides telles que Cordova.. 
• Il permet aux développeurs de créer, déployer et gérer facilement leurs applications NativeScript via la plate-forme Telerik. Je discuterai de la plate-forme Telerik dans une section ultérieure..
• Il prend en charge le jour zéro pour les nouvelles plates-formes natives. Cela signifie que vous pouvez utiliser immédiatement les dernières API natives et les composants de l'interface utilisateur chaque fois que Google ou Apple met à jour leur plate-forme..
• La documentation fournit de nombreuses informations sur la mise en route, les concepts de base et l'interface utilisateur. Il existe également des exemples, des tutoriels, un forum, des questions sur le débordement de pile et des exemples d'applications pouvant aider les débutants à démarrer avec NativeScript.. 
• Vous pouvez écrire vos applications NativeScript avec TypeScript. TypeScript est un langage qui transpile en JavaScript et ajoute des fonctionnalités de programmation orientée objet à JavaScript..
• Toute bibliothèque JavaScript que vous pouvez trouver sur npm qui ne repose pas sur le navigateur et le DOM peut être utilisée dans NativeScript. Des exemples de telles bibliothèques incluent des bibliothèques d’utilitaires telles que lodash et underscore.. 
• Vous pouvez faire presque n'importe quoi avec la CLI NativeScript. Des notions de base telles que la création d'un nouveau projet, l'ajout d'une plate-forme, son exécution sur un périphérique et son déploiement sur une plate-forme spécifique sont toutes incluses. En plus de cela, vous pouvez également installer des plugins, déboguer l'application et les télécharger sur l'App Store..

3. Inconvénients

• Il n'y a pas de HTML ni de DOM dans NativeScript. Vous devrez apprendre à utiliser les différents composants de l'interface utilisateur pour créer l'interface utilisateur de l'application.. 
• Les plugins vérifiés font défaut. Au moment de la rédaction de cet article, il n’existe au total que 16 plugins vérifiés. Bien que de nombreux plug-ins NativeScript soient répertoriés sur npm, vous ne pouvez jamais être vraiment sûr de leur qualité.. 
• Les développeurs doivent connaître les API natives Android et iOS pour pouvoir accéder au matériel de l'appareil et aux autres fonctionnalités spécifiques à la plate-forme..
• En raison de sa nature native, vous ne pouvez tester les applications que sur un appareil réel ou un émulateur. Cela ralentit la configuration initiale des tests. Mais une fois que vous l'avez lancé sur le périphérique, le rechargement à chaud prend le relais. Cela signifie que chaque fois que vous modifiez le code source, l'application est immédiatement rechargée pour refléter les modifications..
• Tous les composants de l'interface utilisateur ne sont pas disponibles gratuitement. Vous devez acheter l'interface utilisateur Telerik pour NativeScript si vous souhaitez utiliser des composants tels que des graphiques et des calendriers..

4. Comment ça marche?

NativeScript est composé d'une machine virtuelle JavaScript, d'un runtime et d'un module de pont. La machine virtuelle JavaScript interprète et exécute le code JavaScript. Ensuite, le module de pont convertit les appels en appels d’API spécifiques à la plate-forme et renvoie le résultat à l’appelant. Pour le dire simplement, NativeScript offre aux développeurs un moyen de commander la plate-forme native via JavaScript au lieu d'Objective-C sur iOS ou de Java sur Android.

Bien sûr, il se passe beaucoup plus dans les coulisses, mais les développeurs de Telerik l'expliquent mieux que moi. Si vous souhaitez en savoir plus sur le fonctionnement interne de NativeScript, vous pouvez lire l'article de Georgi Atanasov sur NativeScript - une présentation technique ou un article de TJ VanToll sur le fonctionnement de NativeScript.

5. Quelles technologies utilise-t-il??

Avec NativeScript, vous utilisez XML pour décrire l'interface utilisateur de l'application, CSS pour le style et JavaScript pour ajouter des fonctionnalités.. 

Vous pouvez utiliser TypeScript avec Angular 2 si vous préférez utiliser un cadre pour la création de votre code JavaScript.. 

Pour le style, NativeScript utilise uniquement un sous-ensemble de CSS. Cela signifie que toutes les fonctionnalités CSS disponibles dans un environnement de navigateur ne peuvent pas être utilisées. Par exemple, vous ne pouvez pas utiliser d'attributs float ou de position. Voici la liste complète des propriétés CSS prises en charge. Tout comme dans le navigateur, vous pouvez ajouter des styles qui s'appliquent à l'ensemble de l'application, à des pages spécifiques ou à un composant de l'interface utilisateur uniquement. Si vous préférez utiliser Sass, vous pouvez installer le plug-in NativeScript Dev Sass.

Pour décrire la structure de l'interface utilisateur, vous utilisez XML. Chaque page de l'application doit être dans son propre fichier XML. NativeScript est livré avec des widgets ou des composants d'interface utilisateur prédéfinis que vous pouvez utiliser pour créer l'interface utilisateur de l'application. Certains de ces composants sont similaires aux différents éléments HTML que vous utilisez dans le navigateur.. 

Par exemple, il y a un Image composant, qui est l'équivalent de la img élément, ou le Champ de texte composant, qui est équivalent à la contribution élément avec un type de texte. Les gestionnaires d'événements, tels que le fait d'appuyer sur un bouton, sont ajoutés au composant lui-même. Voici un exemple:

exports.doQuelque chose = function () // faire quelque chose

Une autre chose à noter est que les composants servent également de modèles. Si vous connaissez les bibliothèques de modèles telles que Handlebars ou Moustache, vous devriez être à l'aise avec la syntaxe suivante:

L'exemple ci-dessus utilise le ListView composant. Comme son nom l'indique, ce composant vous permet de créer des listes. animaux est un tableau défini dans le fichier JavaScript et est lié à la animaux variable au chargement de la page. Cela rend le animaux variable disponible pour utilisation dans le fichier XML.

var animaux = ['panda', 'tigre', 'singe', 'serpent', 'mante']; fonction pageLoaded (args) var page = args.object; page.bindingContext = animaux: animaux

Ceci produit chaque élément du tableau à l'intérieur du ListView.

Enfin, il existe des plug-ins qui vous permettent d'accéder au matériel du périphérique et aux fonctionnalités spécifiques à la plate-forme. NativeScript est livré avec un plugin de caméra pré-installé. Cela vous permet d'accéder à la caméra de l'appareil et de prendre des photos. Vous pouvez ensuite enregistrer le chemin d'accès local à la photo dans votre application pour une utilisation ultérieure. Des fonctionnalités spécifiques à la plate-forme telles que le partage social peuvent également être utilisées en installant des plugins tels que le plug-in NativeScript Social Share.

6. Quelles applications pouvez-vous créer??

En raison de la nature native de NativeScript, vous pouvez créer presque tout type d'application avec ce dernier. Voici quelques exemples d'applications que vous pouvez créer avec NativeScript:

• Applications qui communiquent avec le serveur, telles que les applications d'actualités et les applications de réseau social.
• Jeux simples tels que les échecs, le tic-tac-toe ou le flipper.
• Applications en temps réel telles que des applications de chat ou des flux en direct. Il existe un plugin Firebase pour NativeScript que vous pouvez utiliser pour implémenter des applications en temps réel..
• Musique et vidéos en streaming. Il existe un plug-in de lecteur vidéo qui vous permet de lire des vidéos stockées localement ou de diffuser des vidéos distantes telles que celles sur YouTube..
• Cartes et applications de géolocalisation. Il existe des plugins pour Google Maps et des API de cartes natives..
• Applications qui accèdent au matériel de l'appareil. Les exemples incluent les applications de caméra et les applications IoT.

En ce qui concerne les types d'applications que vous pouvez créer avec NativeScript, les seuls facteurs limitants sont les performances et la disponibilité du plugin. L'écriture d'applications mobiles natives en JavaScript a un prix: vous ne pouvez pas vous attendre à créer des applications qui exigent des performances élevées. Les exemples incluent des jeux avec des graphismes et des animations complexes, des applications avec beaucoup de pièces mobiles et des processus en arrière-plan. 

Une autre limitation est la disponibilité du plugin. La plupart des développeurs utilisent NativeScript à partir d'un environnement de développement Web. Cela signifie que la plupart d'entre eux ne connaissent pas ou ont une connaissance limitée des API de la plate-forme native qui pourraient être utilisées pour créer des plug-ins permettant d'accéder au matériel du périphérique ou à des fonctionnalités spécifiques à la plate-forme, telles que les contacts ou la messagerie.

Si vous souhaitez en savoir plus sur les types d'applications que vous pouvez créer avec NativeScript, vous pouvez consulter la page Vitrines d'applications. La plupart des applications qui y sont répertoriées sont publiées à la fois sur le Google Play Store et sur l'Apple Store. Cela signifie que vous pouvez l'installer et l'exécuter sur votre appareil pour avoir une idée de ce à quoi ressemblent les applications créées avec NativeScript et de leurs performances..

7. Comparaison entre NativeScript et les cadres hybrides?

Si vous n'êtes pas nouveau dans le développement d'applications mobiles hybrides, vous avez peut-être rencontré des infrastructures telles que Cordova et React Native. NativeScript est lié à ces deux frameworks en ce qu'ils visent tous les deux à résoudre le problème "Ecrire une fois, courir partout" dans le domaine du développement d'applications mobiles. Examinons maintenant chaque framework côte à côte:

Pour résumer, Cordova est l'ancienne génération de frameworks d'applications hybrides. Il utilise WebView pour rendre l'interface utilisateur de l'application et accède aux fonctionnalités de l'appareil natif au moyen de plug-ins. React Native et NativeScript constituent la nouvelle génération, car ils traduisent votre code JavaScript afin qu'il puisse être exécuté par la plate-forme native..

Quelqu'un pourrait proposer un meilleur nom pour des frameworks tels que React Native et NativeScript à l'avenir. Mais pour le moment, classons-les en tant que "Frameworks hybrides natifs", car ils utilisent tous deux JavaScript pour créer des applications et offrent tous deux une expérience et des performances similaires à celles des logiciels natifs..

8. Comment Telerik est-elle impliquée dans le projet??

Telerik est la société qui a créé NativeScript. Et, comme toute autre entreprise, elles ont besoin de gagner de l'argent pour survivre. Donc, vous pourriez vous demander, si NativeScript est gratuit et open source, comment Telerik gagne-t-il de l'argent? Eh bien, la réponse se fait par la plate-forme Telerik et l'interface utilisateur Telerik pour NativeScript. 

La plate-forme Telerik fournit aux développeurs les outils nécessaires pour concevoir, créer, tester, déployer, gérer et mesurer facilement les performances des applications NativeScript. Voici quelques exemples des outils qu’ils offrent:

• un générateur d'application visuelle qui vous permet de faire glisser et de déposer différents composants de l'interface utilisateur
• une base de données en nuage qui fournit la base de données pour votre application
• mises à jour de l'application en direct pour envoyer facilement les mises à jour à l'application sans avoir à la soumettre à nouveau au magasin d'applications et à demander à l'utilisateur de mettre à jour l'application manuellement
• un service d'analyse qui répond à des questions telles que l'utilisation de votre application, ses performances et l'avis de vos utilisateurs

UI Telerik pour NativeScript est un ensemble de composants permettant de construire l’UI de l’application. NativeScript est déjà livré avec des composants d'interface utilisateur gratuits, mais il existe également des composants d'interface utilisateur payants, tels que le graphique et le calendrier, que vous ne pouvez utiliser que lorsque vous les achetez à Telerik..

9. Prochaines étapes

Si vous souhaitez en savoir plus sur NativeScript, je vous recommande de consulter les ressources suivantes:

• Si vous avez encore des questions concernant NativeScript, consultez la page FAQ..
• Pour un article pratique sur la création d'une application hello world avec NativeScript, consultez la rubrique Premiers pas avec NativeScript..
• Si vous souhaitez une collection d'articles, de didacticiels vidéo et d'extraits de code sur NativeScript, utilisez NativeScript Snacks et Ressources NativeScript..

Conclusion

Dans cet article, vous avez appris les bases de NativeScript. Comme vous l'avez vu, NativeScript est une bonne option pour créer des applications mobiles en utilisant les compétences que vous avez déjà en tant que développeur Web. J'espère que cet article vous a fourni les connaissances nécessaires pour vous aider à décider si NativeScript vous convient.