Pourquoi JavaScript? Considéré comme « l’un des langages les plus universels », a déclaré Todd Anglin, vice-président de la gestion des produits et du marketing chez Telerik. Quels sont les enjeux? Exposer les APIs de la plateforme native à JavaScript Produire une interface utilisateur native Faire abstraction des interfaces utilisateurs natives

1. Juin 2017
NATIVE MOBILE
NativeScript®
Créez vos applications mobiles natives multi
plateformes avec JavaScript

2. PLAN
➔ Présentation
◆ A propos de NativeScript
◆ Pourquoi utiliser NativeScript
◆ NativeScript par rapport à ses concurrents
➔ Installation et configuration sur Linux
➔ Architecture d’une application NativeScript
➔ Accès aux APIs natives
➔ La prise en main du framework
◆ Quels sont les pré-requis?
◆ Comment créer une application NS?
◆ Comment debugger?
◆ Comment générer les exécutables?
◆ Comment exécuter des tests unitaires?
➔ Démo
➔ Références

3. Présentation
❖ Créé en 2014 par Telerik, NativeScript est un framework open source
multiplateforme pour la création d'applications natives à l'aide de
JavaScript, CSS et XML. Dernière version: 2.5.4
❖ Comment est né ce framework?
Tout a commencé lorsque Microsoft annonça la sortie de Windows Phone 7 en
2010. Telerik décida alors de former une équipe afin de développer des composants
graphiques natifs très avancés, dédiés à cette plateforme. Ce qui fut un succès total
car leurs outils Windows Phone étaient utilisés à l’époque par de nombreuses
applications haut de gamme dans Microsoft Store.
Peu de temps après, leurs clients avaient demandés le même jeu d'outils natif pour
iOS et Android. Au cours de ces années, l’équipe Telerik acquiert ainsi l'art de créer
des applications mobiles avec une UI magnifique et une excellente expérience
d'utilisateur native.

4. Présentation
La compagnie a su répondre au besoin exact des clients. La parfaite précision de
pixels, l'interface utilisateur fluide et la manipulation rapide de données ont été leurs
piliers.
C’est à travers cette expérience réussie que les dirigeants de Telerik ont compris
que l’enjeu majeur du développement mobile est la création d’applications natives
et multi plateforme à l’aide d’un seul code source. D’où la naissance ce NativeScript.
❖ Pourquoi JavaScript?
Considéré comme « l’un des langages les plus universels », a déclaré Todd
Anglin, vice-président de la gestion des produits et du marketing chez Telerik.
❖ Quels sont les enjeux?
● Exposer les APIs de la plateforme native à JavaScript
● Produire une interface utilisateur native
● Faire abstraction des interfaces utilisateurs natives

5. Présentation
◆ Pourquoi utiliser NativeScript?
Une vue complète
Accéder à toutes les API natives d'iOS,
Android et Windows directement avec
JavaScript.
Une animation fluide
Les animations s'exécutent à une vitesse
de 60 images par seconde pour donner à
votre application une sophistication et
une intuitivité.
Performance
Nous veillerons à ce que vous ayez ce
dont vous avez besoin pour obtenir des
performances de pointe.
Open source
Sous licence apache 2. Vous avez un
accès total à l’ensemble du code source,
ce qui vous permettra de voir comment
nous avons fait pour produire la magie
.

6. Présentation
◆ NativeScript par rapport à ses concurrents
Apache Cordova vs. Xamarin vs. NativeScript, disponible sur https://stackshare.io/stackups/apache-cordova-vs-nativescript-vs-xamarin,
dernière mise à jour: 30/01/2017 à 10:06

7. Présentation
◆ NativeScript par rapport à ses concurrents
Pourquoi les développeurs aiment utiliser cette plateforme?
Apache Cordova Xamarin NativeScript
● Open source et gratuit
● Applications hybrides
(utilisation du WebView)
multiplate-formes
● Riche en plugins
● Grande communauté
● JavaScript
● Développement facile
● Apprentissage facile
● Propriétaire
● Puissance de c # sur les
appareils mobiles
● Performance native
● Pas de javascript - code
véritablement compilé
● Mvvm pattern
(Model-View-ViewModel
)
● Richesse de la
bibliothèque C#
● Utilisation de la
puissance de visual
studio
● Support utilisateur
● Plate-forme puissante
pour les développeurs
.net
● Entièrement open
source sous la licence
apache 2.0
● Applications natives
multi-plateformes
● Accès complet aux Apis
natives
● UX native très
performant
● UI et code déclaratif
multiplateforme
● Prise en charge des
bibliothèques natives
iOS et android
● Prise en charge des
bibliothèques
JavaScript
● Supporte Angular 2.0 et
typeScript
● Prise en charge des
feuilles de style (CSS)

8. Installation
◆ L’installation
● NodeJS
Source: https://nodejs.org/
Test: node --version
● NativeScript CLI
npm install -g nativescript
● iOS SDK & Android SDK
● Vérification avec tns doctor

9. Architecture d’une application NS
◆ Pages
Une application NativeScript est constitué d’un ensemble de pages représentant
chacune un écran ou vue séparée. Les pages sont des instances de la class page du
module portant le même nom (Page).
NativeScript fournit deux approches pour instancier les pages:
Via XML Via code JS
<!-- main-page.xml-->
<Page loaded="onPageLoaded">
<Label text="Hello, world!"/>
</Page>
// main-page.js
function onPageLoaded(args) {
console.log("Page Loaded");
}
exports.onPageLoaded = onPageLoaded;
var pagesModule = require("ui/page");
var labelModule = require("ui/label");
function createPage() {
var label = new labelModule.Label();
label.text = "Hello, world!";
var page = new pagesModule.Page();
page.content = label;
return page;
}
exports.createPage = createPage;

10. Architecture d’une application NS
◆ Navigation
● Navigation en passant le context:
var navigationEntry = {
moduleName: "details-page",
context: {info: "something you want to pass to your page"},
animated: false
};
topmost.navigate(navigationEntry);
Lorsque vous naviguez vers une autre page, vous pouvez passer le contexte à la page avec
un objet NavigationEntry. Cette approche offre un meilleur contrôle sur la navigation par
rapport aux autres approches de navigation. Par exemple, avec NavigationEntry, vous
pouvez également animer la navigation.
● Autres navigations: par transition, sans garder l’historique, navigation
parsonnalisée, etc.

11. Accès aux APIs natives
NativeScript vous permet d'accéder à toutes les API natives de la plate-forme sous-jacente.
Pour atteindre ce comportement, de nombreuses choses se produisent sous le capot. L'un
d'entre eux est le transtypage: la conversion entre les types de données JavaScript et
Objective-C pour iOS et Java pour Android. Cette conversion est assurée par le RunTime de
chaque plateforme développé par Telerik.
Quelques exemples de conversions pour les types numériques:
Tout type numérique natif (char, short, int, double, float on iOS and byte, short, int, long,
double, float sur Android) est implicitement converti en number en JavaScript et vice versa.
Voici deux exemples pour iOS et Android:
// iOS
console.log('pow(2.5, 3) = ', pow(2.5, 3));
Le Runtime iOS convertit le number JavaScript en double natif et le passe à la fonction
native pow(double x, double y). La valeur de type integer (native) retournée est
automatiquement converti en number pour JavaScript et passée à la fonction
console.log().
C'est exactement le même procédé pour Android:

12. Accès aux APIs natives
// Android
console.log('min(3, 4) = ', java.lang.Math.min(3, 4));
La méthode native java.lang.Math.min() reçoit en paramètre deux entiers (integers). Le
Runtime d'android connait la signature de la fonction java.lang.Math.min() et transforme
les number 3 et 4 en entier pour Java. L'entier retourné est aussi converti
automatiquement en number pour JavaScript avant d’être passé à la fonction
console.log().

13. Accès aux APIs natives
NB: mapping between the JavaScript and the Java/Android worlds. Besides a full list with all
the available classes and methods, the metadata contains the JNI signature for each
accessible method/field.

14. La prise en main du framework
◆ Quels sont les pré-requis?
● JavaScript: vous devez connaître les concepts de base de JavaScript, tels que la
fonction, les instructions et les boucles.
● CSS: vous devez savoir comment écrire des sélecteurs CSS simples et savoir comment
appliquer les règles CSS en tant que paires nom / valeur.
● Le terminal: vous devez savoir comment ouvrir un terminal ou une invite de ligne de
commande sur votre machine de développement, comment modifier les répertoires et
comment exécuter les commandes.
● Un éditeur de texte ou IDE: Vous devez connaître les bases de votre éditeur de texte
ou IDE de votre choix. Vous pouvez utiliser n'importe quel éditeur de texte pour créer
des applications NativeScript.
Si vous utilisez un éditeur comme sublimeText ou Visual Studio, Telerik vous la
possibilité d’installer le plugin appBuilder pour faciliter vos développements.

15. La prise en main du framework
◆ Comment créer une application NS?
Les applications sont créées en ligne de commande grâce à NativeScript CLI disponible
après installation.
Exemple:
tns create HelloWorld --template nativescript-template-tutorial
HelloWorld: Nom de l'application
--template option indique NativeScript CLI l'utilisation d'un template prédéfini nommé
“nativescript-template-tutorial” chargé de gérer l'aspect visuel de l'application.
Après l'étape de création, nous devons y ajouter les plateformes d'exécution android, iOs ou
windows phone à l'aide des commandes ci-dessous.
tns platform add ios
tns platform add android
Il faudra ensuite installer les dépendances npm requises pour chaque plateforme avec tns
install

16. La prise en main du framework
◆ Comment debugger?
La commande debug construit et déploie un nouveau package sur le périphérique /
émulateur connecté. Il suit également les modifications apportées au dossier de
l'application, ce qui signifie qu'il va synchroniser votre application lorsque des modifications
dans votre code sont enregistrées. Lors du changement de code et de l'enregistrement,
l'application redémarre automatiquement.
tns debug android
En cas de bug lors de l'exécution de vos programmes, vous pouvez trouver la solution en
consultant le liens ci-dessous:
https://discourse.nativescript.org/
En cas de problème avec le framework NativeScript lui-même, vous pouvez le signaler dans
le référentiel GitHub approprié.
NativeScript CLI: https://github.com/nativescript/nativescript-cli/issues
NativeScript modules : https://github.com/nativescript/nativescript/issues
NativeScript documentation: https://github.com/nativescript/docs
NativeScript iOS runtime: https://github.com/nativescript/ios-runtime
NativeScript Android runtime: https://github.com/nativescript/android-runtime

17. La prise en main du framework
◆ Comment générer et déployer les exécutables?
Se placer sur le répertoire racine du projet et exécuter la commande appropriée
● Pour la préparation:
Lorsque vous exécutez la compilation, la CLI NativeScript utilise les ressources du
sous-répertoire spécifique à la plate-forme dans le répertoire des plates-formes. Pour
remplir le sous-répertoire spécifique à la plate-forme avec les actifs d'application corrects,
vous devez exécuter la préparation.
tns prepare android
tns prepare ios
● Pour le build
tns build android
tns build ios
● Pour le déploiement
tns deploy android
tns deploy ios

18. La prise en main du framework
◆ Comment générer et déployer les exécutables?
Consignes avant le déploiement sur appareil physique:
Avant de déployer vous pouvez consulter la liste des devices (physiques) disponibles avec
la commande: tns devices.
Pour ensuite en cibler un appareil suivant vos préférences:
tns run deploy --device 1 par exemple
Si vous n'avez pas device vous pouvez utiliser un emulateur pré-configuré
tns run android --emulator
tns run ios --emulator
Vous pouvez exécuter rapidement votre application sur des périphériques connectés, y
compris tous les périphériques virtuels Android en cours d'exécution. La commande
suivante est un raccourci pour préparer, construire et déployer:
tns run android
tns run ios

19. La prise en main du framework
◆ Comment écrire et exécuter des tests unitaires?
Les tests unitaires peuvent être écrits en utilisant:
● Jasmine,
● Mocha avec Chai
● QUnit.
NativeScript CLI utilise Karma pour lancer les tests unitaires.
Configuration du projet avec tns test init.
Exemple de test unitaire écrit avec Jasmine:
var mainViewModel = require("../main-view-model"); //Require the main view model to expose the functionality inside it.
describe("Hello World Sample Test:", function() {
it("Check counter.", function() {
expect(mainViewModel.createViewModel().counter).toEqual(42); //Vérifie si le compteur est égale à 42.
});
it("Check message.", function () {
expect(mainViewModel.createViewModel().message).toBe("42 taps left"); //Vérifie si le message est"42 taps left".
});
});
Exécution des tests unitaire avec: tns test android

20. Limites
Le runtime de iOS présente cependant quelques limites:
Aujourd’hui, il est impossible de faire le transtypage depuis Javascript vers
Objective-C pour certains types ou structures de données à savoir:
● Unions
● Variadic Objective-C methods, function pointers, blocks
● Structs with constant size array members
● Vectors
● Inline functions
● int64_t, uint64_t outside the [-2^53, 2^53] range
● long double, int128_t, uint128_t

21. Quelques liens utiles
A propos:
http://www.telerik.com/blogs/announcing-nativescript---cross-platform-framework-for-building-native-mobil
e-applications
http://angularjs.blogspot.sn/2015/12/building-mobile-apps-with-angular-2-and.html
https://github.com/NativeScript/NativeScript
http://www.developpez.com/actu/84940/Telerik-lance-NativeScript-un-framework-open-source-pour-develo
pper-des-applications-mobiles-multiplateformes/
https://github.com/NativeScript/theme
https://github.com/NativeScript/nativescript-marketplace-demo
https://github.com/NativeScript/nativescript-sdk-examples-ng
https://www.thepolyglotdeveloper.com/2016/07/create-native-ios-and-android-plugins-with-nativescript/
http://docs.telerik.com/platform/appbuilder/nativescript/index?utm_source=telerik&utm_me
http://docs.telerik.com/platform/appbuilder/cordova/overview
Témoignage:
https://www.nativescript.org/docs/default-source/default-document-library/cim_final_case_study.pdf?sfvrs
n=2
Installation complète: https://docs.nativescript.org/start/ns-setup-linux
NativeScript CLI: https://github.com/nativescript/nativescript-cli/issues
Accès aux APIs: https://docs.nativescript.org/core-concepts/accessing-native-apis-with-javascript