SlideShare une entreprise Scribd logo
Juin 2017
NATIVE MOBILE
NativeScript®
Créez vos applications mobiles natives multi
plateformes avec JavaScript
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
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.
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
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
.
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
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)
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
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;
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.
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:
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().
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.
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.
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
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
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
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
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
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
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

Contenu connexe

Tendances

[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap
Thomas Bassetto
 
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Loïc Knuchel
 
REX react native
REX react nativeREX react native
REX react native
Florent Le Gall
 
Phonegap
PhonegapPhonegap
Phonegap
VISEO
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto Phonegap
SUN
 
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Microsoft
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
Tap publisher par Frédéric Aloé
Tap publisher par Frédéric AloéTap publisher par Frédéric Aloé
Tap publisher par Frédéric Aloé
CocoaHeads France
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS AppceleratorTiyab K.
 
What’s Next Replay! Lyon 2011 - G. Darmont
What’s Next Replay! Lyon 2011 - G. DarmontWhat’s Next Replay! Lyon 2011 - G. Darmont
What’s Next Replay! Lyon 2011 - G. Darmont
Zenika
 
What’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. FornaciariWhat’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. Fornaciari
Zenika
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentation
CocoaHeads France
 
Introduction à Xamarin
Introduction à XamarinIntroduction à Xamarin
Introduction à Xamarin
Patrice Cote
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
Microsoft
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
SOAT
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
ekino
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Loïc Knuchel
 
L’environnement du développement mobile iOS & Android
L’environnement du développement mobile iOS & AndroidL’environnement du développement mobile iOS & Android
L’environnement du développement mobile iOS & Android
Chris Saez
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
CocoaHeads France
 
How javascript core helped PAW to move from a small app to an extensible tool
How javascript core helped PAW to move from a small app to an extensible toolHow javascript core helped PAW to move from a small app to an extensible tool
How javascript core helped PAW to move from a small app to an extensible tool
CocoaHeads France
 

Tendances (20)

[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap
 
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
 
REX react native
REX react nativeREX react native
REX react native
 
Phonegap
PhonegapPhonegap
Phonegap
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto Phonegap
 
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Tap publisher par Frédéric Aloé
Tap publisher par Frédéric AloéTap publisher par Frédéric Aloé
Tap publisher par Frédéric Aloé
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
 
What’s Next Replay! Lyon 2011 - G. Darmont
What’s Next Replay! Lyon 2011 - G. DarmontWhat’s Next Replay! Lyon 2011 - G. Darmont
What’s Next Replay! Lyon 2011 - G. Darmont
 
What’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. FornaciariWhat’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. Fornaciari
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentation
 
Introduction à Xamarin
Introduction à XamarinIntroduction à Xamarin
Introduction à Xamarin
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
 
L’environnement du développement mobile iOS & Android
L’environnement du développement mobile iOS & AndroidL’environnement du développement mobile iOS & Android
L’environnement du développement mobile iOS & Android
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
 
How javascript core helped PAW to move from a small app to an extensible tool
How javascript core helped PAW to move from a small app to an extensible toolHow javascript core helped PAW to move from a small app to an extensible tool
How javascript core helped PAW to move from a small app to an extensible tool
 

Similaire à Native script

La Rochelle workshop 2016
La Rochelle workshop 2016La Rochelle workshop 2016
La Rochelle workshop 2016
Christian Brousseau
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
Christophe Zome
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
Microsoft
 
Initiation au développement mobile sous Android
Initiation au développement mobile sous AndroidInitiation au développement mobile sous Android
Initiation au développement mobile sous Android
Abdelkader Rhouati
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
benjguin
 
Server Side Javascript in the cloud
Server Side Javascript in the cloudServer Side Javascript in the cloud
Server Side Javascript in the cloud
stefounet
 
React xp
React xpReact xp
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
Calculus System SARL
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
Khalid Jebbari
 
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et DerueGab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
AZUG FR
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
Calculus System SARL
 
Introduction a Flutter
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
Christian SUMBANG
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
Thierry Buisson
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
FethiBenYahia1
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux
 
Ionic
IonicIonic
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 

Similaire à Native script (20)

La Rochelle workshop 2016
La Rochelle workshop 2016La Rochelle workshop 2016
La Rochelle workshop 2016
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
 
Initiation au développement mobile sous Android
Initiation au développement mobile sous AndroidInitiation au développement mobile sous Android
Initiation au développement mobile sous Android
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
 
Server Side Javascript in the cloud
Server Side Javascript in the cloudServer Side Javascript in the cloud
Server Side Javascript in the cloud
 
React xp
React xpReact xp
React xp
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et DerueGab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
 
Introduction a Flutter
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
Ionic
IonicIonic
Ionic
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 

Dernier

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 

Dernier (6)

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 

Native script

  • 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